# DDS — dani design system # Single source of truth. Lives at shared/design/dot-tokens.yaml in the monorepo. # There is no auto-generation: the yaml is the contract, each project owns its translation. # Any change here must be mirrored in every consuming project's local token file # before that project's next release. version: 2.0.0 updated: 2026-04-08 base: dark: bg: "#000000" surface: "#0B0B0B" surface_2: "#141414" border: "#1F1F1F" text: "#FFFFFF" text_2: "#777777" text_3: "#444444" light: bg: "#F7F7F7" surface: "#FFFFFF" surface_2: "#F0F0F0" border: "#E0E0E0" text: "#111111" text_2: "#666666" text_3: "#AAAAAA" ui_accent: note: > The UI accent is the PRODUCT's own brand colour — see brand_colors below. Dot Red belongs to dani.go; it is not a system-wide accent. Scope a product with [data-product] and --accent follows. Every pair is tuned per mode and must never be cross-used. fallback: name: Dot Red (dani.go) dark: "#FF2D2D" light: "#E80000" on_accent: "#FFFFFF" contrast: ">=4.5:1 against both mode surfaces (WCAG AA)" typography: families: ui: Space Grotesk data: Space Mono scale: display: { size: 28, weight: 600, family: ui, tracking: -0.02em } title: { size: 20, weight: 600, family: ui } heading: { size: 18, weight: 600, family: ui } body: { size: 15, weight: 500, family: ui } # raised from 13 body_sm: { size: 13, weight: 500, family: ui } # raised from 12 amount: { size: 36, weight: 700, family: data, tracking: -0.03em } data: { size: 12, weight: 700, family: data, tracking: 0.04em } label: { size: 9, weight: 700, family: data, tracking: 0.10em, transform: uppercase } micro: { size: 8, weight: 700, family: data, tracking: 0.10em, transform: uppercase } spacing: grid: 4 xs: 4 sm: 8 md: 12 lg: 16 xl: 20 xxl: 24 screen_padding_x: 16 card_padding: 18 card_gap: 14 section_gap: 24 radii: xs: 2 # phone screens sm: 4 # controls, cards, buttons md: 8 # phone frame outer borders: hairline: 1 strong: 2 shadows: none motion: instant: 100 # button press, tab switch default: 200 # reveal, dismiss, route change easing: ease-out haptic: light reduced_motion: disabled # zero animation, not shortened accessibility: contrast_floor: 4.5 hit_area_min: 44 focus_ring: { width: 2, offset: 2, color: accent } dynamic_type_max: 1.3 brand_lockup: note: > The mark and the name are one object. Callers pass a single tile size S; gap, type size and vertical placement all derive from it. Read from dani_logo_dds_v3.svg, the 560x160 master — not measured off a rendering of it. Never size the wordmark independently of its tile. tile_shape: superellipse # |x/r|^n + |y/r|^n = 1 — NOT a rounded rectangle tile_exponent: 5 tile_r: 0.42 # fraction of the tile edge tile_effective_roundness: 0.20 # what it measures as, if you must approximate with an arc gap: 0.25 # tile to wordmark — x 170 against a tile ending at 140 type_size: 0.867 # wordmark font size — 104 at S 120 ink_height: 0.75 # 'd' ascender to 'g' descender ink_top: 0.214 # below the tile's top edge tracking: -0.029em # -3px at 104px weight: 700 family: Space Grotesk case: lowercase # "dani.ko", never "Dani.KO"; the dot is part of the name glyph: d. # every tile carries the 'd' master; only the hue changes sizes: compact: 24 # dense rows, breadcrumbs, footnotes default: 32 # list rows, footers, secondary placements primary: 40 # the main mark of a surface: site header, product-page header hero: 64 # splash, marketing hero, store artwork favicon: note: > Browser tabs render the mark at 16px, where the 'd.' loses stroke weight to antialiasing and reads smaller than the same mark beside a red or orange tile — the darker the tile, the worse it gets, because low-contrast edge pixels blend into the fill. The favicon variants in assets/favicons/ carry an optically compensated glyph so a tab icon reads at the same size as its siblings. Use them ONLY as favicons: at 24px and above the standard app-icon geometry in assets/icons/ is correct and must not be substituted. source: assets/icons/app-icon-.svg output: assets/favicons/favicon-.svg glyph_scale: 1.15 # about the tile centre; tile, hue and corner radius unchanged ship_as: - icon.svg # the mark itself, every modern browser - favicon.ico # 48 / 32 / 16 frames, older browsers - apple-icon.png # 180, flattened onto the tile hue — iOS masks transparency brand_colors: note: > One per product. This is BOTH the app-icon hue and the product's in-app UI accent. light is tuned for light surfaces with white type; dark for #000-family surfaces. subs: { name: Forest Green, dark: "#00D40A", light: "#007504" } news: { name: Scarlet, dark: "#FF4518", light: "#D11500" } penny: { name: Copper, dark: "#FF6B1A", light: "#C4470A" } park: { name: Signal Orange, dark: "#FF8A00", light: "#B26500" } tos: { name: Amber, dark: "#FFB300", light: "#8F5C00" } money: { name: Gold, dark: "#FFD400", light: "#8C7000" } snap: { name: Flash Yellow, dark: "#E8FF1A", light: "#5C7A00" } go: { name: Alert Red, dark: "#FF2D2D", light: "#E80000" } plant: { name: Green, dark: "#3AFF7D", light: "#0A8F3D" } budget: { name: Mint, dark: "#00FFB0", light: "#008F5E" } clean: { name: Teal, dark: "#00E0C4", light: "#00806F" } zone: { name: Dark Grey, dark: "#666666", light: "#333333" } # replaces Electric Cyan ko: { name: Flag Blue, dark: "#3D7BD9", light: "#0047A0" } # 태극기, 2026-08-05; replaced Dot Navy do: { name: unassigned, dark: "#4D7CFF", light: "#000080" } # retired Dot Navy; no longer tracks ko track: { name: Sky, dark: "#00B8FF", light: "#0070B2" } web: { name: Blue, dark: "#3D7AFF", light: "#0047D6" } bot: { name: Violet, dark: "#8F5CFF", light: "#4B1FBF" } photo: { name: Purple, dark: "#C14DFF", light: "#7A14B5" } design: { name: Magenta, dark: "#FF4DD4", light: "#B51495" } pet: { name: Pink, dark: "#FF4D8F", light: "#C4144F" }