{"name":"Krown Design Manager","version":"2.7.0","groups":[{"id":"brand","title":"Brand","blurb":"Approved internal brand orange (locked). Krown’s public mark is yellow/gold; internal tools use this orange + black. Orange is brand and wayfinding only — never a button fill."},{"id":"ink","title":"Ink","blurb":"Near-black warm text ramp. Body and labels never drop below regular weight."},{"id":"surface","title":"Surfaces & borders","blurb":"Warm neutral canvas, card and inset surfaces with hairline and emphasized borders."},{"id":"ondark","title":"On-dark","blurb":"Controls and hairlines on the ink-900 header and nav — the one place the UI sits on near-black, so the usual neutrals invert."},{"id":"status","title":"Status","blurb":"Text colour + tint background pairs. Status is never colour-only — every status carries a word."},{"id":"module","title":"Module accents","blurb":"Quiet accents for module headers and labels only. Shared lightness/chroma, varied hue. Never fill large areas."},{"id":"font","title":"Font families","blurb":"Native system stack for everything readable; matching system monospace for IDs, labels and timestamps. No web fonts load — the UI feels instant and native."},{"id":"type-scale","title":"Type scale","blurb":"Size + line-height pairs. Headings run heavy with a real size jump to body."},{"id":"weight","title":"Weights","blurb":"Body floor is regular — never go thinner."},{"id":"tracking","title":"Letter spacing","blurb":"Tracking by role, eased for SF metrics."},{"id":"spacing","title":"Spacing","blurb":"4px base scale, with two micro steps for fine rhythm."},{"id":"radius","title":"Radius","blurb":"V2 softened scale — rounder, more tactile."},{"id":"border","title":"Border widths","blurb":"Stroke weights are a decision, not a magic number."},{"id":"size","title":"Control sizes","blurb":"The few fixed heights everything aligns to — header, controls, tiles."},{"id":"elevation","title":"Elevation","blurb":"Use sparingly — borders first. Shadows are reserved for things that float."},{"id":"glass","title":"Material / glass","blurb":"The premium translucent surface for things that FLOAT over the page: dialogs, menus, popovers. The page behind stays sharp; only a floating surface frosts what is directly beneath it."},{"id":"z-index","title":"Z-index","blurb":"Stacking order is a named scale, not an arms race."},{"id":"focus","title":"Focus","blurb":"One focus ring everywhere — surface gap + brand line."},{"id":"ease","title":"Easing","blurb":"Pick easing by what the element is DOING. All curves decelerate for the buttery glide; they never change with pace."},{"id":"duration","title":"Duration","blurb":"Pick duration by how BIG the move is. Anchored on the approved 280ms card-hover decelerate. Fast and Calm paces rescale every duration; easing stays constant."},{"id":"alias","title":"Legacy aliases","blurb":"Kept for back-compat; new code uses the explicit token."}],"tokens":[{"name":"--brand","value":"#EC6A1E","description":"Primary brand orange — brand mark, wayfinding","group":"brand"},{"name":"--brand-press","value":"#C9540F","description":"Pressed / hover-dark brand","group":"brand"},{"name":"--brand-tint","value":"#FCEBDD","description":"Faint wash behind brand things","group":"brand"},{"name":"--brand-ink","value":"#2A1606","description":"Near-black text used ON orange","group":"brand"},{"name":"--ink-900","value":"#1B1A18","description":"Primary text","group":"ink"},{"name":"--ink-700","value":"#3B3833","description":"Strong body / headings on surface","group":"ink"},{"name":"--ink-500","value":"#6B6862","description":"Secondary text","group":"ink"},{"name":"--ink-400","value":"#8C887F","description":"Muted / placeholder","group":"ink"},{"name":"--ink-800","value":"#322E29","description":"Hover lift on ink-900 fills (primary button hover)","group":"ink"},{"name":"--ink-inverse","value":"#FFFFFF","description":"Text on ink-900 fills","group":"ink"},{"name":"--bg","value":"#F6F5F1","description":"App canvas","group":"surface"},{"name":"--surface","value":"#FFFFFF","description":"Cards, panels","group":"surface"},{"name":"--surface-2","value":"#FBFAF7","description":"Alt rows, inset wells","group":"surface"},{"name":"--surface-3","value":"#F1EFEA","description":"Deeper inset / hover","group":"surface"},{"name":"--border","value":"#E6E3DD","description":"Hairline","group":"surface"},{"name":"--border-strong","value":"#D4D0C8","description":"Emphasized divider / input edge","group":"surface"},{"name":"--ondark-line","value":"#3A3833","description":"Outlined control border / hairline on dark","group":"ondark"},{"name":"--ondark-edge","value":"#000000","description":"Hard edge under the ink-900 header","group":"ondark"},{"name":"--ondark-ink","value":"#FFFFFF","description":"Primary text & icons on dark","group":"ondark"},{"name":"--ondark-ink-2","value":"#CFCCC4","description":"Secondary text on dark — nav links, header actions","group":"ondark"},{"name":"--ondark-ink-dim","value":"#B6B2A9","description":"Tertiary / inactive text on dark (resting tabs)","group":"ondark"},{"name":"--ondark-ink-mute","value":"#7D7A72","description":"Muted meta / group labels on dark","group":"ondark"},{"name":"--ondark-hover","value":"rgba(255,255,255,0.07)","description":"Subtle fill on hover","group":"ondark"},{"name":"--ondark-active","value":"rgba(255,255,255,0.11)","description":"Selected / active fill on dark","group":"ondark"},{"name":"--ok","value":"#1E7A48","description":"Published / live / done","group":"status"},{"name":"--ok-tint","value":"#E3F2E9","description":"Tint behind ok status","group":"status"},{"name":"--ok-tint-hover","value":"#D6EBDD","description":"Hover on ok-tint fills (live platform tile)","group":"status"},{"name":"--manual","value":"#9A6608","description":"Manual desk task / pending","group":"status"},{"name":"--manual-tint","value":"#FAEFD3","description":"Tint behind manual status","group":"status"},{"name":"--manual-ink","value":"#6B480A","description":"Readable manual text on manual-tint (banners)","group":"status"},{"name":"--manual-line","value":"#EAD49B","description":"Manual banner border","group":"status"},{"name":"--block","value":"#B42318","description":"Blocked / error","group":"status"},{"name":"--block-tint","value":"#FBE7E4","description":"Tint behind blocked status","group":"status"},{"name":"--block-ink","value":"#7D1A12","description":"Readable blocked text on block-tint (banners)","group":"status"},{"name":"--block-line","value":"#E3B6B1","description":"Blocked banner / danger button border","group":"status"},{"name":"--skip","value":"#6B6862","description":"Neutral / skipped / draft","group":"status"},{"name":"--skip-tint","value":"#ECEAE4","description":"Tint behind neutral status","group":"status"},{"name":"--m-reviews","value":"#2C7A6E","description":"Reviews module accent","group":"module"},{"name":"--m-reviews-tint","value":"#E2F0ED","description":"Reviews tint","group":"module"},{"name":"--m-photos","value":"#6A53AE","description":"Photos module accent","group":"module"},{"name":"--m-photos-tint","value":"#ECE8F6","description":"Photos tint","group":"module"},{"name":"--m-translation","value":"#A23E63","description":"Translation module accent","group":"module"},{"name":"--m-translation-tint","value":"#F6E6ED","description":"Translation tint","group":"module"},{"name":"--m-locations","value":"#E0A100","description":"Locations accent — Krown brand yellow","group":"module"},{"name":"--m-locations-tint","value":"#FBF0CE","description":"Locations tint","group":"module"},{"name":"--m-updates","value":"#9A5B2A","description":"Updates module accent","group":"module"},{"name":"--m-updates-tint","value":"#F3E9DF","description":"Updates tint","group":"module"},{"name":"--m-intake","value":"var(--brand)","description":"Intake = brand orange (the front door reuses the brand mark)","group":"module"},{"name":"--m-intake-tint","value":"var(--brand-tint)","description":"Intake tint = brand tint","group":"module"},{"name":"--font-ui","value":"ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif","description":"Native system stack — cleaner at dense sizes, zero web-font load","group":"font"},{"name":"--font-mono","value":"ui-monospace, \"SF Mono\", \"SFMono-Regular\", Menlo, Consolas, \"Liberation Mono\", monospace","description":"Matching system monospace — IDs, labels, timestamps","group":"font"},{"name":"--text-display","value":"48px","description":"Cover / hero title","group":"type-scale"},{"name":"--lh-display","value":"50px","description":"Display line-height","group":"type-scale"},{"name":"--text-page","value":"30px","description":"Route / page title","group":"type-scale"},{"name":"--lh-page","value":"36px","description":"Page line-height","group":"type-scale"},{"name":"--text-section","value":"19px","description":"Section title","group":"type-scale"},{"name":"--lh-section","value":"25px","description":"Section line-height","group":"type-scale"},{"name":"--text-card","value":"14px","description":"Card title (heavy, small)","group":"type-scale"},{"name":"--lh-card","value":"20px","description":"Card title line-height","group":"type-scale"},{"name":"--text-body","value":"14px","description":"Body text","group":"type-scale"},{"name":"--lh-body","value":"21px","description":"Body line-height","group":"type-scale"},{"name":"--text-sm","value":"13px","description":"Small body / control text","group":"type-scale"},{"name":"--lh-sm","value":"19px","description":"Small line-height","group":"type-scale"},{"name":"--text-meta","value":"12px","description":"Meta / timestamps","group":"type-scale"},{"name":"--lh-meta","value":"16px","description":"Meta line-height","group":"type-scale"},{"name":"--text-micro","value":"11px","description":"Micro labels, uppercase rows","group":"type-scale"},{"name":"--lh-micro","value":"15px","description":"Micro line-height","group":"type-scale"},{"name":"--text-ui-lg","value":"15px","description":"Header brand name / large control glyphs","group":"type-scale"},{"name":"--w-regular","value":"400","description":"Body floor — never go thinner","group":"weight"},{"name":"--w-medium","value":"500","description":"Medium","group":"weight"},{"name":"--w-semi","value":"600","description":"Semibold — control labels","group":"weight"},{"name":"--w-bold","value":"700","description":"Bold — card titles","group":"weight"},{"name":"--w-heavy","value":"800","description":"Fat headings","group":"weight"},{"name":"--track-label","value":"0.06em","description":"Uppercase row labels","group":"tracking"},{"name":"--track-tight","value":"-0.015em","description":"Page / section titles","group":"tracking"},{"name":"--track-heavy","value":"-0.02em","description":"Big fat display headings (eased for SF’s wider metrics)","group":"tracking"},{"name":"--space-05","value":"2px","description":"Micro nudge — tightest vertical rhythm","group":"spacing"},{"name":"--space-1","value":"4px","description":"Base unit","group":"spacing"},{"name":"--space-15","value":"6px","description":"Micro step — chip gaps, label margins","group":"spacing"},{"name":"--space-2","value":"8px","description":"2× base","group":"spacing"},{"name":"--space-3","value":"12px","description":"3× base","group":"spacing"},{"name":"--space-4","value":"16px","description":"4× base","group":"spacing"},{"name":"--space-5","value":"20px","description":"5× base","group":"spacing"},{"name":"--space-6","value":"24px","description":"6× base","group":"spacing"},{"name":"--space-8","value":"32px","description":"8× base","group":"spacing"},{"name":"--space-10","value":"40px","description":"10× base","group":"spacing"},{"name":"--space-12","value":"48px","description":"12× base","group":"spacing"},{"name":"--space-16","value":"64px","description":"16× base","group":"spacing"},{"name":"--radius-xs","value":"4px","description":"Chips, dots, status tiles","group":"radius"},{"name":"--radius-sm","value":"9px","description":"Inputs, buttons","group":"radius"},{"name":"--radius-md","value":"13px","description":"Cards, panels","group":"radius"},{"name":"--radius-lg","value":"18px","description":"Large containers, dialogs","group":"radius"},{"name":"--radius-pill","value":"999px","description":"Pills, fully round","group":"radius"},{"name":"--border-w","value":"1px","description":"Standard stroke — borders, dividers, outlines","group":"border"},{"name":"--border-w-hairline","value":"0.5px","description":"Hairline on glass surfaces","group":"border"},{"name":"--border-w-focus","value":"2px","description":"Focus ring line weight","group":"border"},{"name":"--size-header","value":"56px","description":"App header height","group":"size"},{"name":"--size-ctl","value":"34px","description":"Standard control height — buttons, inputs, facets","group":"size"},{"name":"--size-ctl-sm","value":"28px","description":"Small control height","group":"size"},{"name":"--size-tile","value":"26px","description":"Platform tile / brand mark","group":"size"},{"name":"--size-sidenav","value":"232px","description":"Left rail width — the .km-sidenav column","group":"size"},{"name":"--shadow-sm","value":"0 1px 2px rgba(27,26,24,0.05)","description":"Resting card","group":"elevation"},{"name":"--shadow-md","value":"0 4px 12px rgba(27,26,24,0.10), 0 1px 3px rgba(27,26,24,0.06)","description":"Hover lift","group":"elevation"},{"name":"--shadow-pop","value":"0 8px 28px rgba(27,26,24,0.16)","description":"Floating overlays","group":"elevation"},{"name":"--glass-bg","value":"rgba(252,251,249,0.78)","description":"Balanced — glassy yet soft over busy content","group":"glass"},{"name":"--glass-bg-solid","value":"rgba(252,251,249,0.92)","description":"Denser, for tall / legible bodies","group":"glass"},{"name":"--glass-blur","value":"50px","description":"Backdrop blur radius","group":"glass"},{"name":"--glass-saturate","value":"135%","description":"Backdrop saturation boost","group":"glass"},{"name":"--glass-border","value":"rgba(255,255,255,0.6)","description":"Bright glass edge","group":"glass"},{"name":"--glass-hi","value":"rgba(255,255,255,0.6)","description":"Inset top highlight","group":"glass"},{"name":"--glass-shadow","value":"0 1px 0 var(--glass-hi) inset, 0 16px 44px rgba(27,26,24,0.16), 0 2px 8px rgba(27,26,24,0.06)","description":"Composite glass shadow — highlight + deep soft drop","group":"glass"},{"name":"--glass-input-bg","value":"rgba(255,255,255,0.62)","description":"Frosted input resting on glass","group":"glass"},{"name":"--glass-input-bg-focus","value":"rgba(255,255,255,0.92)","description":"Frosted input focused — denser","group":"glass"},{"name":"--glass-input-line","value":"rgba(27,26,24,0.12)","description":"Hairline input edge on glass","group":"glass"},{"name":"--glass-inset-line","value":"rgba(27,26,24,0.07)","description":"Hairline divider inside glass (receipt rows)","group":"glass"},{"name":"--glass-inset-bg","value":"rgba(255,255,255,0.16)","description":"Inset well on glass (receipt card)","group":"glass"},{"name":"--z-shell","value":"100","description":"App shell chrome — header, nav","group":"z-index"},{"name":"--z-pop","value":"600","description":"Popovers, dropdown menus","group":"z-index"},{"name":"--z-overlay","value":"1000","description":"Dialog scrim + dialog","group":"z-index"},{"name":"--z-toast","value":"1400","description":"Toasts / audit badges above everything","group":"z-index"},{"name":"--focus-ring","value":"0 0 0 2px var(--surface), 0 0 0 4px var(--brand)","description":"One focus ring everywhere — surface gap + brand line","group":"focus"},{"name":"--ease-standard","value":"cubic-bezier(0.32, 0.72, 0, 1)","description":"Workhorse — smooth, soft landing","group":"ease"},{"name":"--ease-out","value":"cubic-bezier(0.22, 1, 0.36, 1)","description":"ENTERING — buttery quint decelerate","group":"ease"},{"name":"--ease-in","value":"cubic-bezier(0.64, 0, 0.78, 0)","description":"LEAVING — eases up, accelerates away","group":"ease"},{"name":"--ease-in-out","value":"cubic-bezier(0.76, 0, 0.24, 1)","description":"MOVING between two on-screen states","group":"ease"},{"name":"--ease-settle","value":"cubic-bezier(0.34, 1.40, 0.64, 1)","description":"RARE tiny overshoot — confirm / commit only","group":"ease"},{"name":"--ease-glide","value":"cubic-bezier(0.16, 1, 0.30, 1)","description":"SIGNATURE long expo decelerate — press & state-morph commits","group":"ease"},{"name":"--ease-smooth","value":"cubic-bezier(0.45, 0, 0.55, 1)","description":"EVEN symmetric — colour crossfades that reveal gradually","group":"ease"},{"name":"--dur-instant","value":"150ms","fast":"70ms","calm":"240ms","description":"Toggle, single dot flip","group":"duration"},{"name":"--dur-fast","value":"210ms","fast":"90ms","calm":"340ms","description":"Hover colour, focus, small state change","group":"duration"},{"name":"--dur-base","value":"280ms","fast":"120ms","calm":"460ms","description":"Chip morph, content swap, card hover","group":"duration"},{"name":"--dur-slow","value":"400ms","fast":"170ms","calm":"660ms","description":"List settle (FLIP), larger surfaces","group":"duration"},{"name":"--dur-morph","value":"520ms","fast":"210ms","calm":"840ms","description":"State-morph commit (publish) — deliberate","group":"duration"},{"name":"--dur-tag","value":"700ms","fast":"260ms","calm":"1120ms","description":"Status-tag colour crossfade — slow, even reveal","group":"duration"},{"name":"--dur-page","value":"560ms","fast":"200ms","calm":"900ms","description":"Route / tab transitions, smooth scroll","group":"duration"},{"name":"--dur-curve","value":"760ms","fast":"300ms","calm":"1180ms","description":"Easing-player dot — long enough to FEEL the curve","group":"duration"},{"name":"--dur-grow","value":"1100ms","fast":"420ms","calm":"1700ms","description":"Shared-surface growth — slow enough to track the edges from card to detail","group":"duration"},{"name":"--dur-roll","value":"1800ms","fast":"720ms","calm":"2900ms","description":"Value count roll — long dramatic settle","group":"duration"},{"name":"--dur-scroll-min","value":"520ms","fast":"220ms","calm":"800ms","description":"In-page scroll, short hops","group":"duration"},{"name":"--dur-scroll-max","value":"1100ms","fast":"420ms","calm":"1700ms","description":"In-page scroll, long hauls","group":"duration"},{"name":"--stagger","value":"55ms","fast":"20ms","calm":"95ms","description":"Stagger step for lists/grids (cap the count)","group":"duration"},{"name":"--ease","value":"var(--ease-standard)","description":"Legacy alias of --ease-standard","group":"alias","alias":true},{"name":"--dur","value":"var(--dur-fast)","description":"Legacy alias of --dur-fast","group":"alias","alias":true}]}