Jay ParkProduct design · Systems & craft

Design systems

03

Design System Peptide

Soft Volume

Cream paper and a shallow lift. Teal for the brand, sand for warmth, and a glass capsule for the tab.

Foundations

Nine foundations stay on one scroll

The index stays with you and scrolls to each foundation. Every foundation stays on the page.

01

Color

Cream and ink are the product. Navy is the page. Teal is the brand on navy. Sand is the warm note. The feeling accent, the partial-day arc, and the settings switch are semantic. Topic plates and vials are expressive. The shipped tab uses a deeper green so the label still reads on cream.

Neutral

  • Cream#ece8dfSurfaces
  • Paper#f4efe4Type on navy
  • Ink#151716Product text
  • Navy#131321Page

Brand

  • Teal#00a0b0Brand on navy
  • Mist#7ad4deBrand wash

Supporting

  • Sand#fbe2b4Warm note
  • Warm#e5a17bAccent

Semantic

  • Accent#1f7a54Feeling face
  • Arc#8a8478Partial day
  • Switch#34c759Settings on
  • Selection#0e6f5fShipped tab

Expressive

  • Weight#E8C4B8
  • Recovery#C9D9CC
  • Sleep#C9D0E4
  • Metabolic#A8D5D5
  • Skin#F0D8C4
  • Cognition#D2CCE4

In the product

Weight

76 kg

76 kg55 kg

No change yet · 21 kg remaining

02

Type

Fraunces is the page. Figtree is the writing around the product. Inter is the product.

Page

Today

A dose, a goal, and a place to read.

Product

  • HeadingSemaglutide
  • BodyEvery day
  • LabelMark done
  • CaptionDone at 8:25 PM
  • Numeric76 kg

03

Shape

Corners stay soft. The tab is a full capsule.

  • 8A small corner
  • 12A topic tile
  • 18The weight card
  • 19A settings group
  • FullThe glass tab

In the product

04

Space

A 4-point scale. 8 between the time and the name. 16 inside the weight card. 24 before the next group.

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
8:00 PMSemaglutide

05

Stroke

A hairline keeps a group quiet. The dose circle is a real edge. Selection uses the shipped green. Focus uses teal, and the ring is its own signal.

  • Hairline0.5
  • Default1.25
  • Selected1.5
  • Focus2

06

Depth

Soft Volume stays shallow. Flat is the page. A hairline lifts a group. The weight card is a warm fill. The tab is glass, a blur, and a soft drop.

  • 0Flat
  • 1Hairline
  • 2Card
  • 3Glass

Rest, then press. The shadow eases. Reduced motion stays put.

07

Motion

Full motion can travel. Reduced motion keeps the result. This page follows the system setting.

Full

  1. Press
  2. Respond
  3. Settle

Reduced

  1. Press
  2. Respond
  3. Settle

The count still changes. The button stays put.

  • MicroA press140 ms
  • QuickA switch180 ms
  • StateA mark260 ms
  • ProgressA track500 ms

08

Icons

Today, Calendar, Stack, Explore, and Settings. Search and add sit with them. A 20px icon can live in a taller row. The size is optical. The row is the target.

  • Today
  • Calendar
  • Stack
  • Explore
  • Settings
  • Search
  • Add
  • Check
  • 16
  • 20
  • 24
  • 32

A 20px icon in a 44px study box. Shipped tabs are 40px.

09

Illustration

Vials stay small beside a dose. Topic sculptures carry Explore. A compound can grow when the screen is about that one entry.

01 FunctionalA vial beside a dose.
02 ExpressiveAn Explore topic on a soft plate.
03 HeroOne compound, large enough to read.

Plate #E8C4B8. Vial glass stays clear. The teal inside the vial is the compound, and the page brand is #00a0b0.

Components

The component studio

Choose a family. The hero, the states, and the notes stay on this page.

Tab bar

Hero

Phone size

States

  • Today
  • Explore
  • Focus

Anatomy

  1. 01Capsule
  2. 02Icon
  3. 03Label
  4. 04Selected fill

Behavior

Full

The selected fill eases.

Reduced

The selected tab changes in place.

Tokens

  • Page brandcolor.brand.teal #00a0b0
  • Capsulewhite 72%, blur 18
  • Selected fill#ececef
  • Selected iconcolor.product.selection #0e6f5f
  • Radiusradius.capsule

Accessibility

  • The visible label is the name.
  • The current tab uses aria-current.
  • These are navigation buttons in a nav landmark.
  • Focus is a ring. The selected fill is a separate signal.
  • Shipped tabs are 40px. This specimen uses that height.
Implementation
<TabBar value={tab} onChange={setTab} />

Scale

The same families, under real pressure

Peptide ships in English. The pressure is density, a long name, a target you can still reach, and a brand green that stays readable on cream.

Density

The week is a studio row. The dose beside it uses a 44px study target. Shipped phone marks are smaller.

8:00 PMSemaglutide

Localization

A long English name wraps in this studio row. The time and the mark stay put. Weight stays in kilograms.

8:00 PMRetatrutide evening protocol, long label

76 kg toward 55 kg.

Accessibility

Focus is a teal ring, separate from the selected fill. Shipped tabs are 40px. A due dose stays pressable. Save waits until a feeling is chosen.

Brand

Teal is the page brand on navy. The shipped tab uses a deeper green so the label still reads on cream.

  • Teal#00a0b0Page
  • Selection#0e6f5fShipped tab

Resilience

The phone, under stress

A due dose stays ink. A later day is quieter and still a button. A sheet can cover the screen. The last card is the shell before the app mounts.

Peptide Library app icon

Today

Phone recreation

Due, not disabledSemaglutide is still due, so the type stays ink. Done rows quiet down. Due still accepts a tap.
Peptide Library app icon

Today, Check-in

Phone recreation

Sheet over TodayNo feeling is chosen, so Save stays closed. The faces stay pressable.
Peptide Library app icon

Calendar

Phone recreation

Later daysDays ahead use a quieter ink. They are still buttons. Nothing uncollected is grayed out as if it were off.
Peptide Library app icon

Today, Stack

Phone recreation

Add over the titleThe corner plus and Add compounds open a sheet. Save stays closed until a name is entered.
Peptide Library app icon

Explore

Phone recreation

Nothing pinnedWith no interests pinned, the line is a sentence. It is not a dead control.
Peptide Library app icon

Today

Frame

ShellThis card is the frame before the app mounts. It holds the phone size. It is not a grayed screen.

Lineage

From a hex to the phone

Each shipped color has a role, then a component, then a place on the Peptide screen. Teal stays on the navy page. The phone keeps the deeper green.

  1. #00a0b0
    1. Primitive#00a0b0
    2. RolePage brand
    3. ComponentIndex numbers
    4. ProductNavy page
  2. #0e6f5f
    1. Primitive#0e6f5f
    2. RoleShipped selection
    3. ComponentTab icon
    4. ProductToday
  3. #fdf8ef
    1. Primitive#fdf8ef
    2. RolePersonal paper
    3. ComponentToday canvas
    4. ProductPhone
  4. #fbe2b4
    1. Primitive#fbe2b4
    2. RoleWarm note
    3. ComponentKicker
    4. ProductPage
  5. #34c759
    1. Primitive#34c759
    2. RoleSettings on
    3. ComponentSwitch
    4. ProductFace ID
  6. #eadfc9
    1. Primitive#eadfc9
    2. RoleHairline
    3. ComponentGoal track
    4. ProductWeight card
  7. #C9D9CC
    1. Primitive#C9D9CC
    2. RoleGood day wash
    3. ComponentFeeling face
    4. ProductCheck-in
  8. #1f7a54
    1. Primitive#1f7a54
    2. RoleFace accent
    3. ComponentSelected feeling
    4. ProductCheck-in
  9. #8a8478
    1. Primitive#8a8478
    2. RolePartial day
    3. ComponentWeek arc
    4. ProductCalendar
  10. #6a604e
    1. Primitive#6a604e
    2. RoleFinished type
    3. ComponentDone row
    4. ProductDose

Product peel

Today, in the phone

Tab, dose, check-in, goal, and cycle are the shipped screens.

Peptide Library app icon

Today

Phone recreation

TodayDose, feeling, weight, and the open cycle.

Close

This comes back to Today

Cream paper, a shallow card, and the glass tab. The phone above is the product those tokens serve.