Jay ParkProduct design · Systems & craft

Design systems

01

Design System Mobile

Built to feel alive. Built to scale.

An expressive mobile system spanning foundations, components, interaction, accessibility, patterns, and production.

Nova

Nova

In the room tonight

Hot dog
Hot dog goal3 of 5

01

Color

Neutral is the plum surface. Brand is the action. Supporting is one purple thread. Semantic is status. Expressive is the celebration on the card.

Neutral

0100200400500700800950

Brand

wash100200300dark500light700high900ink

Supporting

Expressive

Semantic

SentLowFailedQueued

In the product

Nova

Nova

In the room tonight

Hot dog goal3 of 5

02

Type

Two voices. One hierarchy.

Expressive

Nova

Level up

Hot dog goal

Identity, rewards, and the moments that should feel large.

Functional

  • Heading MHot dog goal
  • Body MIn the room tonight
  • Label MSend gift
  • CaptionShown on your profile
  • Numeric05

Navigation, controls, forms, reading, labels, and settings.

Display, Heading, Body, Label, Caption, Numeric. Numeric stays tabular.

In the product

Nova

Nova

In the room tonight

05

Hot dog goal

Shown on your profile

  1. 01Expressive display
  2. 02Functional UI
  3. 03Tabular numeric

03

Shape

Soft geometry with controlled hierarchy.

  • 4Small internal detail
  • 8A compact element
  • 12A control
  • 16A primary control
  • 24A card or sheet
  • 32An expressive container
  • FullAvatar, badge, some chips
NovaSend gift

Sheet 24. Card 16. Button 16. Avatar full.

04

Space

4-point foundation. 8-point dominant rhythm.

  • 0
  • 2
  • 4
  • 6
  • 8
  • 12
  • 16
  • 20
  • 24
  • 32
  • 40
  • 48
  • 64
  • 80
  • 96
Send gift
Next section

16 inside the control. 24 inside the card. 32 between the card and the next band.

05

Stroke

Edges carry identity and state.

A stroke is not a gray outline. It sets hierarchy and state.

  • Send giftHairline1
  • Send giftDefault1.5
  • Send giftStrong2
  • Send giftFocus2
  • Send giftDefault
  • Send giftSelected
  • Send giftFocused
  • Send giftError

06

Depth

Shallow dimension. Never heavy shadow.

Elevation is the surface, the border, the shadow, and the highlight.

  • 0Flat
  • 1Tactile
  • 2Raised
  • 3Floating
  • 4Overlay

Rest, then press. The shallow bottom depth compresses.

07

Motion

Four stages. One language.

Full

  1. Press
  2. Compress
  3. Respond
  4. Settle

Reduced

  1. Press
  2. Compress
  3. Respond
  4. Settle

The count still lands. The travel does not.

  • InstantState
    0 to 100 ms
  • FastPress
    120 to 160 ms
  • NormalResponse
    180 to 240 ms
  • SlowA sheet
    280 to 400 ms
  • ExpressiveA celebration
    400 to 800 ms

08

Icons

Rounded geometry. Consistent optical weight.

  • Gift
  • Home
  • Explore
  • Create
  • Profile
  • Heart
  • Check
  • Close
  • Arrow
  • More
  • 16
  • 20
  • 24
  • 32
  • 40
  • 48

A 20px icon sits in a 48px control. The icon is the optical size. The control is the touch target. Default, then active.

09

Illustration

Expression scales with the moment.

Small contextual gift
01 FunctionalA small object, an empty state, a badge.
Hot dog gift
02 ExpressiveA gift, a reward, a collection.
Golden phoenix celebration
03 HeroA milestone, a celebration, a major arrival.

Soft geometry, controlled perspective, a confident stroke, selective texture, a restrained palette, and a dimensional highlight.

Loading the live gift tray.

watchdiscovercreateinboxprofile

One task

Hot dog goal3 of 5

The sheet leaves first. One task, then it can close.

Button

Real size

Primary

Secondary

Tertiary

Presentation

The real size control is live. Focus in the states is shown, not focused.

  • Default

  • Pressed

  • Focus

  • Loading

  • Success

  • Disabled

Anatomy

Behavior

Full motion

Press, compress, respond, settle.

Reduced

The label can change. The button does not travel.

Tokens

Primitivecolor.brand.400

Semanticcolor.action.primary

Componentbutton.primary, button.secondary, button.tertiary, radius.control 16

Semanticcolor.status.success

Light action uses brand.600. Dark default uses brand.400. High contrast uses brand.800 in light and brand.600 in dark. This theme uses color.brand.400.

Accessibility

  • The visible label is the accessible name.
  • Focus is a ring, not a color shift by itself.
  • Success says Sent and shows a check. The fill is status success.
  • Primary, secondary, and tertiary are the same control. The product target is 48.
Implementation
<Button variant="primary" size="lg" leadingIcon="gift">Send gift</Button>
<Button variant="secondary" size="lg">Save</Button>
<Button variant="tertiary" size="lg">Details</Button>

Maps the component. The snippet does not create a Figma component.

5
  1. Celebration

    Level up

  2. Reward
    Reward3 of 5
    Hot dog

    Still in progress

  3. Action
  4. Navigation
  5. Input

    Shown on your profile

  6. Settings
Nova

Nova

In the room tonight

  • Sent a hot dog3
  • Nova
    Goal still openLive

Conceptual. Favorited did not ship these frames.

Nova

Nova

Nova

In the room tonight

Hot dog
Hot dog goal3 of 5

In the room tonight

Production type, contrast, shape, and brand.

  1. Primitivebrand.600
  2. ActionSemanticaction.primary
  3. Componentbutton.primary
  4. Hot dog goal3 of 5
    PatternGift tray
  5. NovaNovaIn the room tonightSend gift
    ProductFavorited
{
  "source": "feature/design-system-mobile tokens.ts",
  "note": "Favorited did not ship this file. The JSON file does not create Figma components.",
  "brand600": "#DB176F",
  "brand400": "#FF5AA5"
}

Nova

Nova

In the room tonight
Hot dog
Hot dog goal3 of 5