HDS WEB · Design System

Token Reference

The actual token file exported from Token Studio for Figma. Tokens are structured across three layers — ref → system → component — and synced automatically to code via GitHub integration.

ref · Colors

ref · Spacing

ref · Font Sizes

ref · Border Radius

ref · Font Weights & Line Heights & Letter Spacing

system · Typography

system · Spacing & Border Radius

component · button

Button — Primary & Selection Controls

Component Playground

Button
Semantic
Variant
Size
Shape
Left Icon
Right Icon
Label

Checkbox & Radio

Applied tokens (token studio)

component.button · large · fill
1paddingRight:"component.button.large-padding-horizontal"
2paddingLeft:"component.button.large-padding-horizontal"
3borderRadius:"component.button.large-border-radius"
4fill:"component.button.primary-brand-background"
5fill:press:"component.button.primary-brand-background-press"
6color:"component.button.primary-neutral-text"
7typography:"component.button.large-text"
large-padding-horizontalref.spacing-xl · 24px
primary-brand-backgroundref.yellow.500 · #FEDE00
large-border-radiusref.border-radius-l · 12px
large-textsystem.label-l · 16px SemiBold
component.checkbox & radio
1size:"ref.spacing-l"
2borderRadius (checkbox):"ref.border-radius-xs"
3borderColor:"ref.gray.300"
4fill:checked:"component.button.primary-brand-background"
5label-typography:"system.body-m"

Text Field — States

Component Preview

Store name Visible to all staff members
Phone number Used for shift notifications
Password Password must be at least 8 characters

Click any field to see focus state · 3rd field shows error state

Applied tokens (token studio)

component.text-field · default / focus / error
1paddingRight:"ref.spacing-m"
2paddingLeft:"ref.spacing-m"
3borderRadius:"ref.border-radius-l"
4borderColor:"ref.gray.300"
5borderColor:focus:"ref.yellow.500"
6borderColor:error:"ref.red.400"
7background:"system.neutral-background-main"
8input-typography:"system.body-l"
9label-typography:"system.label-s"
10helper-typography:"system.caption-m"
ref.spacing-m16px
ref.border-radius-l12px
ref.gray.300#C8C8C8
ref.red.400#F14E48
system.body-l16px Regular · 150% lh

Tabs — Navigation

Component Preview

Schedule
Tasks
Staff
Reports
Staff schedule is displayed here. Tap a tab to switch views.

Click tabs to switch — active indicator uses brand yellow

Applied tokens (token studio)

component.tabs · item
1paddingTop:"ref.spacing-s"
2paddingBottom:"ref.spacing-s"
3paddingRight:"ref.spacing-m"
4paddingLeft:"ref.spacing-m"
5indicator-color:"ref.yellow.500"
6divider-color:"ref.gray.100"
7color:active:"ref.gray.900"
8color:inactive:"ref.gray.400"
9typography:"system.label-m"
ref.spacing-s · padding12px
ref.yellow.500 · indicator#FEDE00
ref.gray.900 · active#212121
system.label-m14px SemiBold · 125% lh

Switch — Toggle

Component Preview

Push NotificationsReceive alerts for new shifts
Auto Check-inUse GPS to verify attendance
Weekly ReportReceive summary every Monday

Click to toggle — spring animation on the thumb

Applied tokens (token studio)

component.switch
1track-color:off:"ref.gray.200"
2track-color:on:"ref.yellow.500"
3thumb-color:"ref.white"
4track-border-radius:"ref.border-radius-full"
5title-typography:"system.label-m"
6sub-typography:"system.caption-m"
7row-padding:"ref.spacing-s"
8divider-color:"ref.gray.100"
ref.gray.200 · track off#E1E1E1
ref.yellow.500 · track on#FEDE00
system.label-m · title14px SemiBold
system.caption-m · sub12px Regular

Bottom Sheet

Mobile Preview — iPhone 17 Pro

9:41
Today's Schedule
Next shift
Kim Jihoon · 09:00 – 18:00
▲ 8hrs

Swipe down handle or tap outside to dismiss

Staff Actions
✏️Edit shift schedule
📋Assign task checklist
💬Send announcement
🗑️Remove staff member

Applied tokens (token studio)

component.bottom-sheet
1border-radius-top:"ref.border-radius-xxl"
2background:"system.neutral-background-main"
3handle-color:"ref.gray.300"
4item-padding:"ref.spacing-m"
5item-divider:"ref.gray.100"
6title-typography:"system.title-l"
7item-typography:"system.body-m"
8overlay-color:rgba(ref.black · 0.45)
ref.border-radius-xxl20px
system.neutral-bg-mainref.white · #FFFFFF
system.title-l22px Bold · 125% lh
system.body-m14px Regular · 150% lh

Interaction

Tap button → overlay fades in + sheet slides up from bottom using translateY(100%→0). Dismiss by tapping overlay or dragging the handle downward.

Bottom Navigation & CTA

Mobile Preview — iPhone 17 Pro

9:41
My Store
App screen
To-do
Scan
Job&Hire
More

Applied tokens (token studio)

component.top-nav
1background:"system.neutral-background-main"
2divider-color:"ref.gray.100"
3height:— (52px, not tokenized)
4icon-color:"ref.gray.900"
5title-typography:"system.title-l"
component.bottom-nav
1background:"system.neutral-background-main"
2divider-color:"ref.gray.100"
3icon-color:active:"ref.gray.900"
4icon-color:inactive:"ref.gray.300"
5label-typography:"system.caption-s"
component.cta-button (bottom)
1borderRadius:"component.button.large-border-radius"
2fill:"component.button.primary-brand-background"
3typography:"component.button.large-text"
system.title-l · top-nav title22px Bold
ref.gray.900 · active icon#212121
ref.gray.300 · inactive icon#C8C8C8
system.caption-s · nav label11px Regular

ref · Color Palettes

system · Background Colors

component · button