Foundations

Color, type, spacing, radius, shadow, motion and layering tokens — normalized from computed styles across 13 pages.

Color Typography Spacing Radius & borders Shadows Motion Layers & breakpoints

Color

42 tokens, merged from 75 observed values. Ratios are computed against white and against text.default; “fail” means the swatch cannot carry body text on that background.

Brand

color.primary.default

#1d5fb4
--uatr-color-primary-default
vs white 6.3:1AA
vs text 2.3:1fail

color.primary.strong

#154a8f
--uatr-color-primary-strong
vs white 8.7:1AA
vs text 1.7:1fail

color.primary.bright

#2563eb
--uatr-color-primary-bright
vs white 5.2:1AA
vs text 2.8:1fail

color.primary.tint-1

#d6e4f7
--uatr-color-primary-tint-1
vs white 1.3:1fail
vs text 11.4:1AA

color.primary.tint-2

#e8f0fa
--uatr-color-primary-tint-2
vs white 1.1:1fail
vs text 12.8:1AA

color.primary.tint-3

#edf3fb
--uatr-color-primary-tint-3
vs white 1.1:1fail
vs text 13.2:1AA

color.primary.tint-4

#e1ebf8
--uatr-color-primary-tint-4
vs white 1.2:1fail
vs text 12.2:1AA

Accent

color.accent.default

#2f6fd6
--uatr-color-accent-default
vs white 4.8:1AA
vs text 3.1:1fail

color.accent.bright

#3b82f6
--uatr-color-accent-bright
vs white 3.7:1fail
vs text 4.0:1fail

Surfaces

color.bg.page

#f3f6fa
--uatr-color-bg-page
vs white 1.1:1fail
vs text 13.6:1AA

color.bg.surface

#ffffff
--uatr-color-bg-surface
vs white 1.0:1fail
vs text 14.7:1AA

color.bg.subtle

#f7fafd
--uatr-color-bg-subtle
vs white 1.0:1fail
vs text 14.1:1AA

color.bg.sunken

#eef1f6
--uatr-color-bg-sunken
vs white 1.1:1fail
vs text 13.0:1AA

color.bg.hover

#dbe6f5
--uatr-color-bg-hover
vs white 1.3:1fail
vs text 11.7:1AA

color.bg.control

#e3e8ef
--uatr-color-bg-control
vs white 1.2:1fail
vs text 12.0:1AA

Borders

color.border.subtle

#e0e7f0
--uatr-color-border-subtle
vs white 1.2:1fail
vs text 11.8:1AA

color.border.default

#d3dce8
--uatr-color-border-default
vs white 1.4:1fail
vs text 10.6:1AA

color.border.strong

#b8c7db
--uatr-color-border-strong
vs white 1.7:1fail
vs text 8.6:1AA

Text

color.text.default

#22292f
--uatr-color-text-default
vs white 14.7:1AA
vs text 1.0:1fail

color.text.strong

#111827
--uatr-color-text-strong
vs white 17.7:1AA
vs text 1.2:1fail

color.text.secondary

#374151
--uatr-color-text-secondary
vs white 10.3:1AA
vs text 1.4:1fail

color.text.muted

#6b7280
--uatr-color-text-muted
vs white 4.8:1AA
vs text 3.0:1fail

color.text.brand

#154a8f
--uatr-color-text-brand
vs white 8.7:1AA
vs text 1.7:1fail

color.text.inverse

#ffffff
--uatr-color-text-inverse
vs white 1.0:1fail
vs text 14.7:1AA

Danger

color.danger.default

#c0392b
--uatr-color-danger-default
vs white 5.4:1AA
vs text 2.7:1fail

color.danger.border

#f3c1bc
--uatr-color-danger-border
vs white 1.6:1fail
vs text 9.2:1AA

color.danger.text

#842029
--uatr-color-danger-text
vs white 9.5:1AA
vs text 1.6:1fail

color.danger.bg

#f8d7da
--uatr-color-danger-bg
vs white 1.3:1fail
vs text 11.0:1AA

color.danger.bg-subtle

#fde8e8
--uatr-color-danger-bg-subtle
vs white 1.2:1fail
vs text 12.5:1AA

Success

color.success.default

#1a8a4a
--uatr-color-success-default
vs white 4.4:1fail
vs text 3.4:1fail

color.success.text

#0f6b34
--uatr-color-success-text
vs white 6.6:1AA
vs text 2.2:1fail

color.success.bg

#e2f4e8
--uatr-color-success-bg
vs white 1.1:1fail
vs text 12.9:1AA

color.success.border

#b8e2c5
--uatr-color-success-border
vs white 1.4:1fail
vs text 10.3:1AA

Warning

color.warning.default

#b45309
--uatr-color-warning-default
vs white 5.0:1AA
vs text 2.9:1fail

color.warning.text

#92400e
--uatr-color-warning-text
vs white 7.1:1AA
vs text 2.1:1fail

color.warning.bg

#fff8e1
--uatr-color-warning-bg
vs white 1.1:1fail
vs text 13.9:1AA

color.warning.border

#f5d98a
--uatr-color-warning-border
vs white 1.4:1fail
vs text 10.6:1AA

Info

color.info.text

#3730a3
--uatr-color-info-text
vs white 9.9:1AA
vs text 1.5:1fail

color.info.bg

#eef2ff
--uatr-color-info-bg
vs white 1.1:1fail
vs text 13.2:1AA

TOG (domain tag)

color.tog.text

#5a2d91
--uatr-color-tog-text
vs white 9.5:1AA
vs text 1.6:1fail

color.tog.bg

#efe6fa
--uatr-color-tog-bg
vs white 1.2:1fail
vs text 12.2:1AA

color.tog.border

#d9c6f0
--uatr-color-tog-border
vs white 1.6:1fail
vs text 9.3:1AA

Overlays

Token	Value	Use
`overlay.scrim`	`rgba(34, 41, 47, 0.72)`
`overlay.modal`	`rgba(0, 0, 0, 0.45)`	modal backdrop (site also uses 0.5)
`overlay.on-primary-1`	`rgba(255, 255, 255, 0.18)`
`overlay.on-primary-2`	`rgba(255, 255, 255, 0.4)`	chip border on primary bar

Typography

The site names “Noto Sans Thai” first but never loads it; the guide uses the same stack so it renders with whatever the viewer has installed.

Families

Token	Stack	Sample
`font.family.base`	`"Noto Sans Thai", "Segoe UI", Tahoma, sans-serif`	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.family.system`	`system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif`	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.family.mono`	`ui-monospace, Menlo, Consolas, monospace`	ระบบสั่งตัดแว่น Web Ordering Aa 0123

Size scale

Token	Size	Sample	Observed values merged
`font.size.2xs`	11px	ระบบสั่งตัดแว่น Web Ordering Aa 0123	11px ×21
`font.size.xs`	12px	ระบบสั่งตัดแว่น Web Ordering Aa 0123	11.5px ×369, 12px ×145
`font.size.sm`	13px	ระบบสั่งตัดแว่น Web Ordering Aa 0123	12.5px ×2459, 13px ×2103
`font.size.md`	14px	ระบบสั่งตัดแว่น Web Ordering Aa 0123	13.5px ×299, 14px ×63, 14.5px ×15
`font.size.lg`	16px	ระบบสั่งตัดแว่น Web Ordering Aa 0123	15px ×15, 16px ×43
`font.size.xl`	18px	ระบบสั่งตัดแว่น Web Ordering Aa 0123	17px ×7
`font.size.2xl`	20px	ระบบสั่งตัดแว่น Web Ordering Aa 0123	20px ×11

Text styles

Token	Spec	Sample
`font.heading.lg`	20px / 700 / lh normal	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.heading.md`	16px / 700 / lh normal	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.heading.sm`	14px / 700 / lh normal	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.body.md`	13px / 400 / lh normal	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.body.sm`	12px / 400 / lh normal	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.body.label`	13px / 700 / lh normal	ระบบสั่งตัดแว่น Web Ordering Aa 0123
`font.body.caption`	11px / 400 / lh normal	ระบบสั่งตัดแว่น Web Ordering Aa 0123

Weights & line-height

font.weight.regular · 400font.weight.medium · 500font.weight.semibold · 600font.weight.bold · 700line-height.normal normalline-height.tight 1.35line-height.base 1.5line-height.relaxed 1.7

Spacing

Nine steps. 33% of spacing on the live site is off this scale (5, 7, 9, 10, 11px…); those values snap to the nearest step.

Token	Value	Observed values snapped here
`space.1`	2px	1px ×54, 2px ×174
`space.2`	4px	3px ×159, 4px ×1288
`space.3`	6px	5px ×2926, 6px ×7850
`space.4`	8px	7px ×2068, 8px ×8414, 9px ×3092
`space.5`	12px	10px ×225, 11px ×478, 12px ×1019, 13px ×4
`space.6`	16px	14px ×103, 16px ×55
`space.7`	20px	18px ×160, 19.1406px ×1, 20px ×16
`space.8`	24px	22px ×14
`space.9`	36px	36px ×20

Radius & borders

radius.sm 6px

radius.md 8px

radius.lg 12px

radius.pill 999px

border-width.default 1px

border-width.focus 2px

border-width.accent 3px

Shadows

shadow.card

shadow.sm

shadow.modal

shadow.drawer

shadow.tab-active

Motion

Token	Value
`motion.duration.fast`	150ms
`motion.duration.slide`	180ms
`motion.easing.default`	ease

The site uses transition: all .15s ease on 53 elements; prefer naming the properties. No prefers-reduced-motion handling exists.

Layers & breakpoints

Token	Value	Note
`z-index.sticky`	1
`z-index.raised`	2
`z-index.drawer`	50
`z-index.modal`	2000
`z-index.overlay`	9999
`breakpoint.mobile`	700px	max-width; site also uses 800px (near-duplicate). The live site has only these two media queries; 6 pages overflow at 390px.

Observed layers: 2000 on four modals, 50 on the CS-ticket modal and the tracking drawer, 9999 on six overlay elements — three ladders for one concept.

Files

tokens.css · tokens.json (W3C design-tokens style).