Corporate Identity
S19Labs design system
The visual language of the Studio19 players app, documented as the corporate identity. Ported verbatim from lib/theme/tokens.dart — itself a port of the iPad app's DesignSystem/Theme.swift.
Dark-first · near-black neutral base
One accent, used sparingly
The mark
App icon
The Studio19 script wordmark, white, on the neutral base with a turquoise bloom behind it. Shipped on iOS and Android; also this site's favicon.
Squircle radius scales with the mark — l (20px) around 72–82px, s (6px) at favicon sizes. Never outline it, never recolour it, never set it on a mid-tone.
Wordmark
The same script as pure vector — studio19-logo.svg, white paths, no background. Use this wherever the mark must sit on an existing surface or scale past icon sizes.
White only. On light surfaces the fill must be overridden to the base colour, never tinted with the accent.
Naming, unresolved. The mark reads Studio19 — the product —
while this site and the top bar say S19Labs — the company. They are
currently used side by side. Worth deciding whether the public site leads with the company or the
product before this hardens into two competing identities.
Colour
Four families. Surfaces layer; ink is white at declining opacity; the accent is brand-only; semantic colours mean something and are never decorative.
Surfaces
Ink
Brand accent
The one rule that matters. The accent #00DA9B is brand identity, not "good". The semantic positive green is #30D158 — a different colour. Using the accent to mean "this value is healthy" is the single most common way this system gets broken.
Semantic
Rating ramp
Monotonic green→red for 0–100 shot ratings. In the app this collapses to a three-band traffic light: green ≥ 70, amber 30–69, red < 30.
Typography
System sans throughout. Tight negative tracking on display sizes, neutral below. Every row below is set in the style it names.
displayStudio1956 / 700 / 1.04 / −2%
h1Session review40 / 700 / 1.08 / −2%
h2Your progress28 / 600 / 1.18 / −2%
h3Driver · carry20 / 600 / 1.28
h4Shot 14 of 4016 / 600 / 1.32
bodyYour coach marked this swing for review.15 / 400 / 1.55
bodySSecondary copy sits on ink2.13 / 400 / 1.5 · ink2
captionRecorded 12 Jun · 240fps11 / 500 / 1.4 · ink2
sectionSection opener11 / 500 / +0.14em / caps
monocarry 214.6y · 1.48 smashNumeric / IDs only
Space & radius
Corner radius
xs·4
s·6
m·12
l·20
xl·28
pill
Motion
Three curves, three durations. Hover a track to run it.
easeOut
.16, 1, .3, 1 — entrances
easeInOut
.65, 0, .35, 1 — moves
easeCinema
.22, 1, .36, 1 — video / hero
fast180ms
medium320ms
slow640ms
Usage
One accent action per view. If two things are turquoise, neither reads as primary.
Layer surfaces upward — bg → surface → elev → elev2. Depth comes from layering, not from borders.
Hairlines at 8% white. Visible structure, invisible lines.
Mono for numbers and identifiers only — carry, smash, ticket ids.
Never use the brand accent for "good". That's positive #30D158.
Never fill with accentGlow — it is a shadow colour.
Never tint the base surface turquoise. All warmth is light from the bloom; the surface stays neutral.
No pure-white body text at small sizes — textPrimary #F2F2F7 and below.
Known drift. Mission Control's own chrome predates this system and uses
#06D6A0 as its accent, not the brand
#00DA9B. The two are close enough to look like a rendering
difference and far enough apart to be wrong. Unifying it means restyling the dashboard,
so it is recorded here rather than silently patched.
