@askewly/design 0.3.0 → 0.4.0

package/data/tokens.css

@@ -16,9 +16,27 @@
   --accent: #B9FAF8;
   --accent-foreground: oklch(0.16 0.015 270);
   --destructive: oklch(0.58 0.22 27);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.88 0.015 270);
   --input: oklch(0.88 0.015 270);
   --ring: #6F2DBD;
+  --primary-hover: #5F22A8;
+  --emphasis-surface: oklch(0.962 0.018 272.314);
+  --emphasis-foreground: oklch(0.457 0.24 277.023);
+  --emphasis-solid: oklch(0.511 0.262 276.966);
+  --emphasis-solid-hover: oklch(0.585 0.233 277.117);
+  --emphasis-ring: oklch(0.585 0.233 277.117);
+  --emphasis-on-solid: oklch(1 0 0);
+  --info-surface: oklch(0.951 0.026 236.824);
+  --info-foreground: oklch(0.5 0.134 242.749);
+  --info-link: oklch(0.685 0.169 237.323);
+  --info-link-hover: oklch(0.588 0.158 241.966);
+  --success-surface: oklch(0.979 0.021 166.113);
+  --success-foreground: oklch(0.508 0.118 165.612);
+  --danger-surface: oklch(0.941 0.03 12.58);
+  --danger-foreground: oklch(0.586 0.253 17.585);
+  --danger-solid: oklch(0.586 0.253 17.585);
+  --danger-solid-hover: oklch(0.645 0.246 16.439);
   --askewly-violet: #6F2DBD;
   --askewly-orchid: #A663CC;
   --askewly-lavender: #B298DC;
@@ -30,11 +48,16 @@
   --space-8: 32px;
   --space-12: 48px;
   --space-16: 64px;
+  --font-size-2xs: 0.625rem;
+  --font-size-xs: 0.75rem;
   --font-size-sm: 14px;
   --font-size-base: 16px;
   --font-size-lg: 20px;
   --font-size-xl: 28px;
   --font-size-2xl: 40px;
+  --font-size-3xl: 1.875rem;
+  --font-size-5xl: 3rem;
+  --font-size-7xl: 4.5rem;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-sans: Geist, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
@@ -61,7 +84,25 @@
   --accent: oklch(0.35 0.03 270);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.58 0.22 27);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.35 0.03 270);
   --input: oklch(0.35 0.03 270);
   --ring: #B298DC;
+  --primary-hover: #A663CC;
+  --emphasis-surface: oklch(0.257 0.09 281.288);
+  --emphasis-foreground: oklch(0.785 0.115 274.713);
+  --emphasis-solid: oklch(0.585 0.233 277.117);
+  --emphasis-solid-hover: oklch(0.673 0.182 276.935);
+  --emphasis-ring: oklch(0.673 0.182 276.935);
+  --emphasis-on-solid: oklch(1 0 0);
+  --info-surface: oklch(0.293 0.066 243.157);
+  --info-foreground: oklch(0.828 0.111 230.318);
+  --info-link: oklch(0.746 0.16 232.661);
+  --info-link-hover: oklch(0.828 0.111 230.318);
+  --success-surface: oklch(0.262 0.051 172.552);
+  --success-foreground: oklch(0.845 0.143 164.978);
+  --danger-surface: oklch(0.271 0.105 12.094);
+  --danger-foreground: oklch(0.712 0.194 13.428);
+  --danger-solid: oklch(0.586 0.253 17.585);
+  --danger-solid-hover: oklch(0.645 0.246 16.439);
 }

package/data/tokens.json

@@ -1 +1 @@
-{"$description":"Askewly Design token SSOT (DTCG-compatible, stable 2025.10 subset). Tier rule: component -> semantic -> primitive, one direction only. Dark mode lives in $extensions['com.askewly.modes'].dark on semantic tokens. Generated artifacts: DESIGN.md frontmatter, examples/ui-vocabulary-site/src/tokens.css. Do not edit generated files by hand.","color":{"primitive":{"$description":"Raw values only. gray is the site's violet-tinted neutral (hue 270) formalized as a 12-step ramp; usage convention: 1-2 app background, 3-5 interactive component states, 6-8 borders, 9-10 solid/low-contrast foreground, 11-12 text.","white":{"$type":"color","$value":{"colorSpace":"oklch","components":[1,0,0]}},"gray":{"1":{"$value":{"colorSpace":"oklch","components":[0.985,0,0]}},"2":{"$value":{"colorSpace":"oklch","components":[0.97,0.005,270]}},"3":{"$value":{"colorSpace":"oklch","components":[0.95,0.015,270]}},"4":{"$value":{"colorSpace":"oklch","components":[0.94,0.02,270]}},"5":{"$value":{"colorSpace":"oklch","components":[0.91,0.015,270]}},"6":{"$value":{"colorSpace":"oklch","components":[0.88,0.015,270]}},"7":{"$value":{"colorSpace":"oklch","components":[0.72,0.02,270]}},"8":{"$value":{"colorSpace":"oklch","components":[0.6,0.025,270]}},"9":{"$value":{"colorSpace":"oklch","components":[0.46,0.03,270]}},"10":{"$value":{"colorSpace":"oklch","components":[0.35,0.03,270]}},"11":{"$value":{"colorSpace":"oklch","components":[0.25,0.03,270]}},"12":{"$value":{"colorSpace":"oklch","components":[0.16,0.015,270]}},"$type":"color"},"askewly":{"$type":"color","$description":"Brand palette extracted from the landing planning reference image (2026-07-05). Canonical purple: violet.","violet":{"$value":{"colorSpace":"srgb","components":[0.435294,0.176471,0.741176],"hex":"#6F2DBD"}},"orchid":{"$value":{"colorSpace":"srgb","components":[0.65098,0.388235,0.8],"hex":"#A663CC"}},"lavender":{"$value":{"colorSpace":"srgb","components":[0.698039,0.596078,0.862745],"hex":"#B298DC"}},"sky":{"$value":{"colorSpace":"srgb","components":[0.721569,0.815686,0.921569],"hex":"#B8D0EB"}},"mint":{"$value":{"colorSpace":"srgb","components":[0.72549,0.980392,0.972549],"hex":"#B9FAF8"}}},"red":{"9":{"$value":{"colorSpace":"oklch","components":[0.58,0.22,27]}},"$type":"color"}},"semantic":{"$description":"Role tokens. Components and site CSS consume this layer only. Dark values in $extensions['com.askewly.modes'].dark.","surface":{"$type":"color","base":{"$value":"{color.primitive.gray.1}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.12}"}}},"raised":{"$description":"Cards, panels sitting on base.","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.11}"}}},"overlay":{"$description":"Popovers, dropdowns, floating layers.","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.11}"}}},"muted":{"$value":"{color.primitive.gray.3}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"secondary":{"$description":"Secondary button / subtle filled surface.","$value":"{color.primitive.gray.4}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"tint":{"$description":"Informational wash, agent-ready signal surface.","$value":"{color.primitive.askewly.mint}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}}},"text":{"$type":"color","default":{"$value":"{color.primitive.gray.12}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}},"muted":{"$value":"{color.primitive.gray.9}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.7}"}}},"secondary":{"$description":"Foreground on surface.secondary.","$value":"{color.primitive.gray.11}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.3}"}}},"on-accent":{"$description":"Text/icon on action.primary solid fills.","$value":"{color.primitive.gray.1}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.12}"}}}},"action":{"$type":"color","primary":{"$value":"{color.primitive.askewly.violet}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}},"secondary":{"$value":"{color.primitive.askewly.orchid}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.mint}"}}},"destructive":{"$value":"{color.primitive.red.9}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.red.9}"}}}},"accent":{"$type":"color","base":{"$description":"Informational accent wash (mint family).","$value":"{color.primitive.askewly.mint}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"foreground":{"$value":"{color.primitive.gray.12}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}}},"border":{"$type":"color","default":{"$value":"{color.primitive.gray.6}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"input":{"$value":"{color.primitive.gray.6}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"focus":{"$description":"Focus ring.","$value":"{color.primitive.askewly.violet}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.lavender}"}}},"accent":{"$description":"Selected/active edges only.","$value":"{color.primitive.askewly.lavender}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.orchid}"}}}}},"component":{"$description":"Minimal by policy (survey criterion A-5): only overrides that semantic roles cannot express. Exemplar tier for the lint chain.","button":{"$type":"color","bg":{"$value":"{color.semantic.action.primary}"},"text":{"$value":"{color.semantic.text.on-accent}"}}}},"dimension":{"space":{"1":{"$value":{"value":4,"unit":"px"}},"2":{"$value":{"value":8,"unit":"px"}},"4":{"$value":{"value":16,"unit":"px"}},"8":{"$value":{"value":32,"unit":"px"}},"12":{"$value":{"value":48,"unit":"px"}},"16":{"$value":{"value":64,"unit":"px"}},"$type":"dimension","$description":"4/8 grid. Reference variables only - not bound into the Tailwind theme namespace."},"radius":{"$type":"dimension","$description":"Canonical = shipped site values (PSS1 visually approved), not the older 2/4px draft.","sm":{"$value":{"value":4,"unit":"px"}},"md":{"$value":{"value":6,"unit":"px"}},"lg":{"$value":{"value":8,"unit":"px"}},"xl":{"$value":{"value":12,"unit":"px"}},"2xl":{"$description":"SD gen2 (2026-07-12): large-surface corner radius for sheets/overlays that sit above the base scale — device-frame inner viewport, bottom-sheet-detents. Recurs identically in >=2 mobile components as Tailwind's built-in rounded-2xl (16px), currently outside the tokenized sm-xl range.","$value":{"value":16,"unit":"px"}}},"size":{"$type":"dimension","$description":"Fixed-purpose sizing constants that are not part of the 4/8 spacing grid. SD gen2 (2026-07-12): touch-target minimum recurs across mobile surfaces (large-title-collapsing-header back button, mobile-signup-field-stack inputs/submit, plus pre-existing search-autocomplete/showcase-card/term-visual usage) as Tailwind size-11/h-11/min-h-11 (44px) — the WCAG 2.5.5 / iOS HIG minimum hit target.","touch-target-min":{"$value":{"value":44,"unit":"px"}}},"z-index":{"$type":"number","$description":"SD gen2 (2026-07-12): layering scale distilled from recurring hardcoded z-index values across mobile overlays and dense-data sticky headers. 'sticky' = content pinned within its own scroll container (collapsing header bar, bottom-sheet/action-sheet root within DeviceFrame, table sticky header row). 'elevated' = a second layer above a sticky layer in the same local stacking context (permission-matrix-editor-grid's sticky corner cell, which must sit above both its own header row and column). 'overlay' = page-level modal/scrim/popover stacking context (ui/dialog, ui/sheet, ui/popover, ui/tooltip, full-screen confirm overlays).","sticky":{"$value":10},"elevated":{"$value":20},"overlay":{"$value":50}}},"typography":{"font":{"$type":"fontFamily","sans":{"$value":["Geist","Noto Sans KR","ui-sans-serif","system-ui","sans-serif"]},"mono":{"$value":["Geist Mono","ui-monospace","monospace"]}},"scale":{"$type":"dimension","sm":{"$value":{"value":14,"unit":"px"}},"base":{"$value":{"value":16,"unit":"px"}},"lg":{"$value":{"value":20,"unit":"px"}},"xl":{"$value":{"value":28,"unit":"px"}},"2xl":{"$value":{"value":40,"unit":"px"}}},"weight":{"$type":"fontWeight","regular":{"$value":400},"medium":{"$value":500}}},"motion":{"$description":"SD gen2 (2026-07-12): motion timing constants. Kept minimal by the same policy as color.component — only the value that actually recurs, not a full scale invented ahead of need.","duration":{"$type":"duration","overlay":{"$description":"Open/close transition for modal-style surfaces. Recurs identically (200ms) in bottom-sheet-detents.tsx and ui/dialog.tsx.","$value":{"value":200,"unit":"ms"}}}}}
+{"$description":"Askewly Design token SSOT (DTCG-compatible, stable 2025.10 subset). Tier rule: component -> semantic -> primitive, one direction only. Dark mode lives in $extensions['com.askewly.modes'].dark on semantic tokens. Generated artifacts: DESIGN.md frontmatter, examples/ui-vocabulary-site/src/tokens.css. Do not edit generated files by hand.","color":{"primitive":{"$description":"Raw values only. gray is the site's violet-tinted neutral (hue 270) formalized as a 12-step ramp; usage convention: 1-2 app background, 3-5 interactive component states, 6-8 borders, 9-10 solid/low-contrast foreground, 11-12 text.","white":{"$type":"color","$value":{"colorSpace":"oklch","components":[1,0,0]}},"gray":{"1":{"$value":{"colorSpace":"oklch","components":[0.985,0,0]}},"2":{"$value":{"colorSpace":"oklch","components":[0.97,0.005,270]}},"3":{"$value":{"colorSpace":"oklch","components":[0.95,0.015,270]}},"4":{"$value":{"colorSpace":"oklch","components":[0.94,0.02,270]}},"5":{"$value":{"colorSpace":"oklch","components":[0.91,0.015,270]}},"6":{"$value":{"colorSpace":"oklch","components":[0.88,0.015,270]}},"7":{"$value":{"colorSpace":"oklch","components":[0.72,0.02,270]}},"8":{"$value":{"colorSpace":"oklch","components":[0.6,0.025,270]}},"9":{"$value":{"colorSpace":"oklch","components":[0.46,0.03,270]}},"10":{"$value":{"colorSpace":"oklch","components":[0.35,0.03,270]}},"11":{"$value":{"colorSpace":"oklch","components":[0.25,0.03,270]}},"12":{"$value":{"colorSpace":"oklch","components":[0.16,0.015,270]}},"$type":"color"},"askewly":{"$type":"color","$description":"Brand palette extracted from the landing planning reference image (2026-07-05). Canonical purple: violet.","violet":{"$value":{"colorSpace":"srgb","components":[0.435294,0.176471,0.741176],"hex":"#6F2DBD"}},"orchid":{"$value":{"colorSpace":"srgb","components":[0.65098,0.388235,0.8],"hex":"#A663CC"}},"lavender":{"$value":{"colorSpace":"srgb","components":[0.698039,0.596078,0.862745],"hex":"#B298DC"}},"sky":{"$value":{"colorSpace":"srgb","components":[0.721569,0.815686,0.921569],"hex":"#B8D0EB"}},"mint":{"$value":{"colorSpace":"srgb","components":[0.72549,0.980392,0.972549],"hex":"#B9FAF8"}},"violet-deep":{"$description":"Hover shade of the canonical brand violet (M2 2026-08-01, promoted from hardcoded #5f22a8).","$value":{"colorSpace":"srgb","components":[0.372549,0.133333,0.658824],"hex":"#5F22A8"}}},"red":{"9":{"$value":{"colorSpace":"oklch","components":[0.58,0.22,27]}},"$type":"color"},"indigo":{"50":{"$value":{"colorSpace":"oklch","components":[0.962,0.018,272.314]}},"300":{"$value":{"colorSpace":"oklch","components":[0.785,0.115,274.713]}},"400":{"$value":{"colorSpace":"oklch","components":[0.673,0.182,276.935]}},"500":{"$value":{"colorSpace":"oklch","components":[0.585,0.233,277.117]}},"600":{"$value":{"colorSpace":"oklch","components":[0.511,0.262,276.966]}},"700":{"$value":{"colorSpace":"oklch","components":[0.457,0.24,277.023]}},"950":{"$value":{"colorSpace":"oklch","components":[0.257,0.09,281.288]}},"$type":"color","$description":"Emphasis/selection accent ramp (M2 2026-08-01). Values = Tailwind v4 defaults the site already rendered, promoted verbatim for light-mode visual losslessness."},"skyx":{"100":{"$value":{"colorSpace":"oklch","components":[0.951,0.026,236.824]}},"300":{"$value":{"colorSpace":"oklch","components":[0.828,0.111,230.318]}},"400":{"$value":{"colorSpace":"oklch","components":[0.746,0.16,232.661]}},"500":{"$value":{"colorSpace":"oklch","components":[0.685,0.169,237.323]}},"600":{"$value":{"colorSpace":"oklch","components":[0.588,0.158,241.966]}},"700":{"$value":{"colorSpace":"oklch","components":[0.5,0.134,242.749]}},"950":{"$value":{"colorSpace":"oklch","components":[0.293,0.066,243.157]}},"$type":"color","$description":"Informational accent ramp (M2 2026-08-01, Tailwind v4 sky — named skyx to avoid clashing with brand askewly.sky)."},"emerald":{"50":{"$value":{"colorSpace":"oklch","components":[0.979,0.021,166.113]}},"300":{"$value":{"colorSpace":"oklch","components":[0.845,0.143,164.978]}},"700":{"$value":{"colorSpace":"oklch","components":[0.508,0.118,165.612]}},"950":{"$value":{"colorSpace":"oklch","components":[0.262,0.051,172.552]}},"$type":"color","$description":"Success accent ramp (M2 2026-08-01, Tailwind v4 defaults)."},"rose":{"100":{"$value":{"colorSpace":"oklch","components":[0.941,0.03,12.58]}},"400":{"$value":{"colorSpace":"oklch","components":[0.712,0.194,13.428]}},"500":{"$value":{"colorSpace":"oklch","components":[0.645,0.246,16.439]}},"600":{"$value":{"colorSpace":"oklch","components":[0.586,0.253,17.585]}},"950":{"$value":{"colorSpace":"oklch","components":[0.271,0.105,12.094]}},"$type":"color","$description":"Danger accent ramp (M2 2026-08-01, Tailwind v4 defaults). Distinct from red.9 (--destructive): the site's danger demos render rose, and the shades intentionally differ."}},"semantic":{"$description":"Role tokens. Components and site CSS consume this layer only. Dark values in $extensions['com.askewly.modes'].dark.","surface":{"$type":"color","base":{"$value":"{color.primitive.gray.1}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.12}"}}},"raised":{"$description":"Cards, panels sitting on base.","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.11}"}}},"overlay":{"$description":"Popovers, dropdowns, floating layers.","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.11}"}}},"muted":{"$value":"{color.primitive.gray.3}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"secondary":{"$description":"Secondary button / subtle filled surface.","$value":"{color.primitive.gray.4}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"tint":{"$description":"Informational wash, agent-ready signal surface.","$value":"{color.primitive.askewly.mint}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}}},"text":{"$type":"color","default":{"$value":"{color.primitive.gray.12}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}},"muted":{"$value":"{color.primitive.gray.9}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.7}"}}},"secondary":{"$description":"Foreground on surface.secondary.","$value":"{color.primitive.gray.11}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.3}"}}},"on-accent":{"$description":"Text/icon on action.primary solid fills.","$value":"{color.primitive.gray.1}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.12}"}}},"on-destructive":{"$description":"Text/icon on action.destructive solid fills. Theme-invariant white (M2: promotes the settled 'text-white is correct' marker verdict into a token).","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.white}"}}}},"action":{"$type":"color","primary":{"$value":"{color.primitive.askewly.violet}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}},"primary-hover":{"$description":"Hover state for brand-violet fills/text (M2). Dark uses the brighter orchid — darkening on hover loses contrast on dark surfaces.","$value":"{color.primitive.askewly.violet-deep}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.orchid}"}}},"secondary":{"$value":"{color.primitive.askewly.orchid}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.mint}"}}},"destructive":{"$value":"{color.primitive.red.9}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.red.9}"}}}},"emphasis":{"$type":"color","$description":"Selection/emphasis accent (indigo family, M2 2026-08-01). Distinct from 'accent' (shadcn interaction-state wash, mint family) — do not merge (group-semantics collision, fresh-verifier finding).","surface":{"$description":"Chip/selected-row wash.","$value":"{color.primitive.indigo.50}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.indigo.950}"}}},"foreground":{"$description":"Text on emphasis.surface.","$value":"{color.primitive.indigo.700}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.indigo.300}"}}},"solid":{"$description":"Solid emphasis fill (buttons).","$value":"{color.primitive.indigo.600}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.indigo.500}"}}},"solid-hover":{"$value":"{color.primitive.indigo.500}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.indigo.400}"}}},"ring":{"$description":"Focus border/ring on emphasis-accented inputs.","$value":"{color.primitive.indigo.500}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.indigo.400}"}}},"on-solid":{"$description":"Text/icon on emphasis.solid fills. White holds contrast on indigo-600 (light) and indigo-500 (dark).","$value":"{color.primitive.white}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.white}"}}}},"status":{"$type":"color","$description":"Status colors (M2 2026-08-01). info=sky, success=emerald, danger=rose. Kept out of 'accent' (interaction-state group).","info-surface":{"$value":"{color.primitive.skyx.100}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.skyx.950}"}}},"info-foreground":{"$value":"{color.primitive.skyx.700}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.skyx.300}"}}},"info-link":{"$description":"Standalone info-accented link/action text.","$value":"{color.primitive.skyx.500}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.skyx.400}"}}},"info-link-hover":{"$value":"{color.primitive.skyx.600}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.skyx.300}"}}},"success-surface":{"$value":"{color.primitive.emerald.50}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.emerald.950}"}}},"success-foreground":{"$value":"{color.primitive.emerald.700}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.emerald.300}"}}},"danger-surface":{"$value":"{color.primitive.rose.100}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.rose.950}"}}},"danger-foreground":{"$value":"{color.primitive.rose.600}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.rose.400}"}}},"danger-solid":{"$value":"{color.primitive.rose.600}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.rose.600}"}}},"danger-solid-hover":{"$value":"{color.primitive.rose.500}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.rose.500}"}}}},"accent":{"$type":"color","base":{"$description":"Informational accent wash (mint family).","$value":"{color.primitive.askewly.mint}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"foreground":{"$value":"{color.primitive.gray.12}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.1}"}}}},"border":{"$type":"color","default":{"$value":"{color.primitive.gray.6}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"input":{"$value":"{color.primitive.gray.6}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.gray.10}"}}},"focus":{"$description":"Focus ring.","$value":"{color.primitive.askewly.violet}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.lavender}"}}},"accent":{"$description":"Selected/active edges only.","$value":"{color.primitive.askewly.lavender}","$extensions":{"com.askewly.modes":{"dark":"{color.primitive.askewly.orchid}"}}}}},"component":{"$description":"Minimal by policy (survey criterion A-5): only overrides that semantic roles cannot express. Exemplar tier for the lint chain.","button":{"$type":"color","bg":{"$value":"{color.semantic.action.primary}"},"text":{"$value":"{color.semantic.text.on-accent}"}}}},"dimension":{"space":{"1":{"$value":{"value":4,"unit":"px"}},"2":{"$value":{"value":8,"unit":"px"}},"4":{"$value":{"value":16,"unit":"px"}},"8":{"$value":{"value":32,"unit":"px"}},"12":{"$value":{"value":48,"unit":"px"}},"16":{"$value":{"value":64,"unit":"px"}},"$type":"dimension","$description":"4/8 grid. Reference variables only - not bound into the Tailwind theme namespace."},"radius":{"$type":"dimension","$description":"Canonical = shipped site values (PSS1 visually approved), not the older 2/4px draft.","sm":{"$value":{"value":4,"unit":"px"}},"md":{"$value":{"value":6,"unit":"px"}},"lg":{"$value":{"value":8,"unit":"px"}},"xl":{"$value":{"value":12,"unit":"px"}},"2xl":{"$description":"SD gen2 (2026-07-12): large-surface corner radius for sheets/overlays that sit above the base scale — device-frame inner viewport, bottom-sheet-detents. Recurs identically in >=2 mobile components as Tailwind's built-in rounded-2xl (16px), currently outside the tokenized sm-xl range.","$value":{"value":16,"unit":"px"}}},"size":{"$type":"dimension","$description":"Fixed-purpose sizing constants that are not part of the 4/8 spacing grid. SD gen2 (2026-07-12): touch-target minimum recurs across mobile surfaces (large-title-collapsing-header back button, mobile-signup-field-stack inputs/submit, plus pre-existing search-autocomplete/showcase-card/term-visual usage) as Tailwind size-11/h-11/min-h-11 (44px) — the WCAG 2.5.5 / iOS HIG minimum hit target.","touch-target-min":{"$value":{"value":44,"unit":"px"}}},"z-index":{"$type":"number","$description":"SD gen2 (2026-07-12): layering scale distilled from recurring hardcoded z-index values across mobile overlays and dense-data sticky headers. 'sticky' = content pinned within its own scroll container (collapsing header bar, bottom-sheet/action-sheet root within DeviceFrame, table sticky header row). 'elevated' = a second layer above a sticky layer in the same local stacking context (permission-matrix-editor-grid's sticky corner cell, which must sit above both its own header row and column). 'overlay' = page-level modal/scrim/popover stacking context (ui/dialog, ui/sheet, ui/popover, ui/tooltip, full-screen confirm overlays).","sticky":{"$value":10},"elevated":{"$value":20},"overlay":{"$value":50}}},"typography":{"font":{"$type":"fontFamily","sans":{"$value":["Geist","Noto Sans KR","ui-sans-serif","system-ui","sans-serif"]},"mono":{"$value":["Geist Mono","ui-monospace","monospace"]}},"scale":{"$type":"dimension","$description":"M6 2026-08-01: expanded to the 9 steps screens actually render (M1 closeout measurement). New steps (2xs/xs/3xl/5xl/7xl) carry Tailwind v4 default values verbatim in rem — they are wired into @theme --text-* so existing utility classes route through the SSOT with zero render change. Legacy 5 names (sm/base/lg/xl/2xl, px) are kept for backward compat; lg(20) and 2xl(40) differ from Tailwind's same-named defaults and are NOT wired.","2xs":{"$description":"Micro labels (10px at default root). New utility text-2xs — Tailwind has no built-in 2xs.","$value":{"value":0.625,"unit":"rem"}},"xs":{"$value":{"value":0.75,"unit":"rem"}},"sm":{"$value":{"value":14,"unit":"px"}},"base":{"$value":{"value":16,"unit":"px"}},"lg":{"$value":{"value":20,"unit":"px"}},"xl":{"$description":"Unused by live screens as of M1 measurement (2026-08-01) — kept as record for llms consumers.","$value":{"value":28,"unit":"px"}},"2xl":{"$value":{"value":40,"unit":"px"}},"3xl":{"$value":{"value":1.875,"unit":"rem"}},"5xl":{"$value":{"value":3,"unit":"rem"}},"7xl":{"$value":{"value":4.5,"unit":"rem"}}},"weight":{"$type":"fontWeight","regular":{"$value":400},"medium":{"$value":500}}},"motion":{"$description":"SD gen2 (2026-07-12): motion timing constants. Kept minimal by the same policy as color.component — only the value that actually recurs, not a full scale invented ahead of need.","duration":{"$type":"duration","overlay":{"$description":"Open/close transition for modal-style surfaces. Recurs identically (200ms) in bottom-sheet-detents.tsx and ui/dialog.tsx.","$value":{"value":200,"unit":"ms"}}}}}

package/dist/index.js

@@ -3,6 +3,7 @@ import { readFileSync } from "node:fs";
 import path from "node:path";
 import { Command } from "commander";
 import { addRecipe, initProject, InjectError } from "./inject.js";
+import { runKickstart, KickstartError } from "./kickstart.js";
 import { DEFAULT_TYPOGRAPHY_THRESHOLD } from "./typography.js";
 import { verifyDir } from "./verify.js";
 import { loadRecipes, loadTerms, loadTokens, loadTokensCss, searchTerms, tokensForTier, } from "./load.js";
@@ -104,8 +105,25 @@ program
     .command("init")
     .argument("[dir]", "target directory", ".")
     .option("--force", "overwrite existing files")
-    .description("write DESIGN.md and tokens.css into a project")
-    .action((dir, options) => {
+    .option("--block <name>", "kickstart: brief → DESIGN.md → tokens → transplant this block → verify (block-contract §8)")
+    .option("--yes", "kickstart: accept recommended defaults for unanswered brief questions")
+    .option("--tone <tone>", "kickstart brief answer (agent path)")
+    .option("--color <color>", "kickstart brief answer (agent path)")
+    .option("--type <type>", "kickstart brief answer (agent path)")
+    .option("--registry <baseUrl>", "kickstart: registry base URL", "https://ui.askewly.com")
+    .description("write DESIGN.md and tokens.css into a project; with --block, run the one-command kickstart")
+    .action(async (dir, options) => {
+    if (options.block) {
+        try {
+            await runKickstart(dir, { block: options.block, yes: options.yes, tone: options.tone, color: options.color, type: options.type, registry: options.registry, force: options.force });
+        }
+        catch (error) {
+            if (error instanceof KickstartError)
+                fail(error.message);
+            throw error;
+        }
+        return;
+    }
     try {
         const written = initProject(path.resolve(dir), Boolean(options.force));
         for (const file of written)

package/dist/kickstart.js

@@ -0,0 +1,410 @@
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { createInterface } from "node:readline/promises";
+import { stdin, stdout } from "node:process";
+import { verifyDir } from "./verify.js";
+export class KickstartError extends Error {
+}
+const REGISTRY_BASE = "https://ui.askewly.com";
+const SHADCN_BASE = "https://ui.shadcn.com/r/styles/new-york-v4";
+const BRIEF_QUESTIONS = [
+    {
+        key: "tone",
+        label: "Tone — how should the product feel?",
+        options: ["minimal-clean", "warm-editorial", "dark-technical"],
+        recommended: "minimal-clean",
+    },
+    {
+        key: "color",
+        label: "Color direction — the single accent family",
+        options: ["blue", "teal", "violet", "amber", "cosmos"],
+        recommended: "blue",
+    },
+    {
+        key: "type",
+        label: "Type direction — one family, hierarchy by weight/size",
+        options: ["system-sans", "geist-sans", "humanist-serif-display"],
+        recommended: "system-sans",
+    },
+];
+const FONT_STACKS = {
+    "system-sans": "system-ui, 'Noto Sans KR', sans-serif",
+    "geist-sans": "'Geist', 'Noto Sans KR', system-ui, sans-serif",
+    "humanist-serif-display": "'Source Serif 4', 'Noto Serif KR', Georgia, serif",
+};
+// Accent hue pairs. Hex only — the flat-colors DESIGN.md parser (slide-theme
+// converter, parser A) accepts hex exclusively; the template stays canonical,
+// the generator conforms (M17 decision carried over).
+const ACCENTS = {
+    blue: { light: "#2256C4", onLight: "#F8FAFD", dark: "#6D9DF6", onDark: "#0E1626", ring: "#2256C4", darkRing: "#6D9DF6" },
+    teal: { light: "#1C877E", onLight: "#F6FBFA", dark: "#37BEAD", onDark: "#0A1F1D", ring: "#1C877E", darkRing: "#37BEAD" },
+    violet: { light: "#6231C4", onLight: "#FAF8FD", dark: "#A683EE", onDark: "#160E26", ring: "#6231C4", darkRing: "#A683EE" },
+    amber: { light: "#BC6E0F", onLight: "#FDFBF6", dark: "#F3A324", onDark: "#211405", ring: "#BC6E0F", darkRing: "#F3A324" },
+    // cosmos: harvested from second-brain/poc-graph (brain.askewly.com) knowledge-graph
+    // palette — muted navy primary over a near-black ground family (harvest-contract §4, 2026-08-04).
+    cosmos: { light: "#3E5F94", onLight: "#F7F9FC", dark: "#6E8FC4", onDark: "#0E1420", ring: "#3E5F94", darkRing: "#6E8FC4" },
+};
+const CANVASES = {
+    "minimal-clean": {
+        light: { bg: "#F9FAFB", fg: "#171B26", card: "#FFFFFF", muted: "#EDF0F4", mutedFg: "#5C6472", border: "#DEE2E9" },
+        dark: { bg: "#0F1219", fg: "#E7EAEF", card: "#14181F", muted: "#1E242E", mutedFg: "#949CA9", border: "#262D3A" },
+        radius: "0.5rem",
+    },
+    "warm-editorial": {
+        light: { bg: "#FAF7F1", fg: "#2B241C", card: "#FDFBF7", muted: "#EFEAE1", mutedFg: "#746A5C", border: "#E1DACF" },
+        dark: { bg: "#191410", fg: "#EBE5DB", card: "#211B16", muted: "#2B241E", mutedFg: "#A69C8F", border: "#352D25" },
+        radius: "0.625rem",
+    },
+    "dark-technical": {
+        light: { bg: "#EFF1F4", fg: "#14181F", card: "#F8F9FB", muted: "#E2E5EA", mutedFg: "#59616D", border: "#D2D6DD" },
+        dark: { bg: "#080B12", fg: "#DFE3E9", card: "#0D1119", muted: "#161C26", mutedFg: "#8B93A1", border: "#232B3A" },
+        radius: "0.375rem",
+    },
+};
+export async function collectBrief(opts) {
+    const answers = {};
+    const assumed = [];
+    for (const q of BRIEF_QUESTIONS) {
+        const injected = opts[q.key];
+        if (injected) {
+            if (!q.options.includes(injected)) {
+                throw new KickstartError(`--${q.key} "${injected}" is not an option — use one of: ${q.options.join(", ")}`);
+            }
+            answers[q.key] = injected;
+            continue;
+        }
+        if (opts.yes) {
+            answers[q.key] = q.recommended;
+            assumed.push(q.key);
+            continue;
+        }
+        const rl = createInterface({ input: stdin, output: stdout });
+        try {
+            const menu = q.options.map((o, i) => `  ${i + 1}. ${o}${o === q.recommended ? "  (recommended)" : ""}`).join("\n");
+            const raw = (await rl.question(`${q.label}\n${menu}\n> [1-${q.options.length}, Enter = recommended] `)).trim();
+            if (raw === "") {
+                answers[q.key] = q.recommended;
+            }
+            else {
+                const idx = Number(raw);
+                const picked = Number.isInteger(idx) && idx >= 1 && idx <= q.options.length ? q.options[idx - 1] : q.options.includes(raw) ? raw : null;
+                if (!picked)
+                    throw new KickstartError(`"${raw}" is not a valid choice for ${q.key}`);
+                answers[q.key] = picked;
+            }
+        }
+        finally {
+            rl.close();
+        }
+    }
+    return { answers, assumed };
+}
+// ---------------------------------------------------------------------------
+// DESIGN.md generation — flat-colors form of templates/DESIGN.md.tmpl
+// (the form the slide-theme converter already reads; do not invent new keys).
+// ---------------------------------------------------------------------------
+export function renderDesignMd(project, answers, assumed) {
+    const accent = ACCENTS[answers.color];
+    const canvas = CANVASES[answers.tone];
+    const font = FONT_STACKS[answers.type];
+    const date = new Date().toISOString().slice(0, 10);
+    const assumedNote = assumed.length > 0
+        ? `기본값 채택(추정): ${assumed.join(", ")} — 비대화 실행으로 추천값을 그대로 썼다.`
+        : "세 축(tone·color·type) 모두 사용자 답변으로 결정됐다.";
+    return `---
+# 공식 스키마: google-labs-code/design.md spec (version: alpha)
+# generated by \`askewly-design init --block\` — tone=${answers.tone} color=${answers.color} type=${answers.type}
+name: "${project}"
+description: "Kickstart brief: ${answers.tone} tone, ${answers.color} accent, ${answers.type} type."
+colors:
+  primary: "${accent.light}"
+  on-primary: "${accent.onLight}"
+  surface: "${canvas.light.bg}"
+  on-surface: "${canvas.light.fg}"
+  surface-raised: "${canvas.light.card}"
+  muted: "${canvas.light.mutedFg}"
+  border: "${canvas.light.border}"
+typography:
+  headline-lg:
+    fontFamily: "${font}"
+    fontSize: 48px
+    fontWeight: "800"
+    lineHeight: 1.1
+    letterSpacing: -0.03em
+  body-md:
+    fontFamily: "${font}"
+    fontSize: 16px
+    fontWeight: "400"
+    lineHeight: 1.65
+  label-md:
+    fontFamily: "${font}"
+    fontSize: 14px
+    fontWeight: "500"
+    lineHeight: 1.4
+rounded:
+  sm: 4px
+  md: 8px
+  lg: 16px
+  full: 9999px
+spacing:
+  unit: 4px
+  gap: 16px
+  container-padding: 24px
+  section-margin: 64px
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+  card:
+    backgroundColor: "{colors.surface-raised}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.container-padding}"
+---
+
+# ${project} — DESIGN.md
+
+## Overview
+
+Kickstart 축약 브리프 산출물 (block-contract §8). ${assumedNote}
+구조·인터랙션 레벨은 블록(saas-app-shell 등)이 결정하므로 묻지 않았다 — 나머지 브리프 영역(콘텐츠·모션 등)은 추천 기본값이며, 바뀌면 이 파일이 정본이다.
+
+## Colors
+
+- 코드에서는 의미 이름(\`surface\`, \`on-surface\`, \`muted\`)만 참조 — 값 하드코딩 금지.
+- \`primary\`는 유일한 액센트: CTA·핵심 신호에만. WCAG AA(4.5:1) 통과 필수.
+
+## Typography
+
+- 서체 1종(${answers.type}). 위계는 굵기·크기·색으로만.
+- 한글: \`word-break: keep-all\`.
+
+## Do's and Don'ts
+
+- Do: 상태 완비(hover/focus-visible/active/disabled/loading/error), 다크 모드, reduced-motion 분기.
+- Don't: 이모지 아이콘, 좌측 컬러 라인 카드, 그라디언트 남발, primary의 비-CTA 사용.
+
+<!-- Changelog: ${date} kickstart 초기화 (축약 브리프 산출) -->
+`;
+}
+// ---------------------------------------------------------------------------
+// Token derivation — the CSS variable definition layer the block's
+// required-CSS-variable list (registry meta.requiredCssVars) is checked against.
+// ---------------------------------------------------------------------------
+export function renderBrandCss(answers) {
+    const a = ACCENTS[answers.color];
+    const c = CANVASES[answers.tone];
+    const font = FONT_STACKS[answers.type];
+    const vars = (m, primary, onPrimary, ring) => `  --background: ${m.bg};
+  --foreground: ${m.fg};
+  --card: ${m.card};
+  --card-foreground: ${m.fg};
+  --popover: ${m.card};
+  --popover-foreground: ${m.fg};
+  --primary: ${primary};
+  --primary-foreground: ${onPrimary};
+  --secondary: ${m.muted};
+  --secondary-foreground: ${m.fg};
+  --muted: ${m.muted};
+  --muted-foreground: ${m.mutedFg};
+  --accent: ${m.muted};
+  --accent-foreground: ${m.fg};
+  --destructive: hsl(0 72% 45%);
+  --destructive-foreground: ${m.card};
+  --border: ${m.border};
+  --input: ${m.border};
+  --ring: ${ring};
+  --radius: ${c.radius};
+  --sidebar: ${m.bg};
+  --sidebar-foreground: ${m.fg};
+  --sidebar-primary: ${primary};
+  --sidebar-primary-foreground: ${onPrimary};
+  --sidebar-accent: ${m.muted};
+  --sidebar-accent-foreground: ${m.fg};
+  --sidebar-border: ${m.border};
+  --sidebar-ring: ${ring};`;
+    return `/* Generated by \`askewly-design init --block\` from DESIGN.md (tone=${answers.tone}, color=${answers.color}).
+ * This file is the project's token definition layer — the block's required
+ * CSS variables (block-contract §4/§6) are defined here, nowhere else. */
+:root {
+  font-family: ${font};
+${vars(c.light, a.light, a.onLight, a.ring)}
+}
+
+.dark {
+${vars(c.dark, a.dark, a.onDark, a.darkRing)}
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+`;
+}
+/** Presence-only check (block-contract §8-5): every required var must be *defined* in css. */
+export function missingRequiredVars(css, required) {
+    return required.filter((name) => !new RegExp(`${name.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&")}\\s*:`).test(css));
+}
+async function fetchJson(url) {
+    let res;
+    try {
+        res = await fetch(url);
+    }
+    catch (error) {
+        throw new KickstartError(`fetch failed: ${url} — ${error.message}`);
+    }
+    if (!res.ok)
+        throw new KickstartError(`registry fetch ${res.status}: ${url}`);
+    return (await res.json());
+}
+function rewriteImports(content) {
+    return content
+        .replaceAll(/@\/registry\/[a-z0-9-]+\/hooks\//g, "@/hooks/")
+        .replaceAll(/@\/registry\/[a-z0-9-]+\/lib\/utils/g, "@/lib/utils")
+        .replaceAll(/@\/registry\/[a-z0-9-]+\/ui\//g, "@/components/ui/")
+        .replaceAll(/@\/registry\/[a-z0-9-]+\/blocks\/[a-z0-9-]+\/components\//g, "./");
+}
+function destFor(file, srcRoot) {
+    if (file.target)
+        return path.join(srcRoot, file.target);
+    const p = file.path;
+    const uiMatch = p.match(/\/ui\/([^/]+)$/);
+    if (uiMatch)
+        return path.join(srcRoot, "components", "ui", uiMatch[1]);
+    const hookMatch = p.match(/\/hooks\/([^/]+)$/);
+    if (hookMatch)
+        return path.join(srcRoot, "hooks", hookMatch[1]);
+    const libMatch = p.match(/\/lib\/([^/]+)$/);
+    if (libMatch)
+        return path.join(srcRoot, "lib", libMatch[1]);
+    return path.join(srcRoot, "components", path.basename(p));
+}
+export async function fetchBlock(blockName, registryBase) {
+    const block = await fetchJson(`${registryBase}/r/${blockName}.json`);
+    if (block.meta?.tier !== "block") {
+        throw new KickstartError(`"${blockName}" is not a block-tier asset (meta.tier missing) — see block-contract §1`);
+    }
+    return block;
+}
+export async function transplantBlock(block, targetDir) {
+    const srcRoot = existsSync(path.join(targetDir, "src")) ? path.join(targetDir, "src") : targetDir;
+    const written = [];
+    const npmDeps = new Set(["clsx", "tailwind-merge"]);
+    const visited = new Set();
+    async function resolve(item) {
+        for (const dep of item.dependencies ?? [])
+            npmDeps.add(dep.split("@").slice(0, dep.startsWith("@") ? 2 : 1).join("@"));
+        for (const ref of item.registryDependencies ?? []) {
+            const url = ref.startsWith("http") ? ref : `${SHADCN_BASE}/${ref}.json`;
+            const key = url;
+            if (visited.has(key))
+                continue;
+            visited.add(key);
+            const child = await fetchJson(url);
+            await resolve(child);
+            for (const file of child.files ?? []) {
+                const dest = destFor(file, srcRoot);
+                mkdirSync(path.dirname(dest), { recursive: true });
+                writeFileSync(dest, rewriteImports(file.content));
+                written.push(dest);
+            }
+        }
+    }
+    await resolve(block);
+    for (const file of block.files ?? []) {
+        const dest = destFor(file, srcRoot);
+        mkdirSync(path.dirname(dest), { recursive: true });
+        writeFileSync(dest, rewriteImports(file.content));
+        written.push(dest);
+    }
+    // cn() — shadcn init would have created it; transplant guarantees it (M18 step-5 friction).
+    const utils = path.join(srcRoot, "lib", "utils.ts");
+    if (!existsSync(utils)) {
+        mkdirSync(path.dirname(utils), { recursive: true });
+        writeFileSync(utils, `import { clsx, type ClassValue } from "clsx"\nimport { twMerge } from "tailwind-merge"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n`);
+        written.push(utils);
+    }
+    return { written, npmDeps, requiredCssVars: block.meta?.requiredCssVars ?? [] };
+}
+// ---------------------------------------------------------------------------
+// Orchestrator — brief → DESIGN.md → tokens → transplant → required-var check → verify
+// ---------------------------------------------------------------------------
+export async function runKickstart(dir, opts) {
+    const targetDir = path.resolve(dir);
+    const registryBase = (opts.registry ?? REGISTRY_BASE).replace(/\/$/, "");
+    const designPath = path.join(targetDir, "DESIGN.md");
+    if (existsSync(designPath) && !opts.force) {
+        throw new KickstartError(`refusing to overwrite ${designPath} (use --force) — an existing DESIGN.md owns the look; kickstart is for blank projects`);
+    }
+    // 0. fetch the block first — an unknown block name must fail before any file
+    //    is written (no half-initialized project on exit 1).
+    const block = await fetchBlock(opts.block, registryBase);
+    // 1. brief
+    const { answers, assumed } = await collectBrief(opts);
+    console.log(`brief: tone=${answers.tone} color=${answers.color} type=${answers.type}${assumed.length ? ` (defaults: ${assumed.join(", ")})` : ""}`);
+    // 2. DESIGN.md
+    mkdirSync(targetDir, { recursive: true });
+    writeFileSync(designPath, renderDesignMd(path.basename(targetDir), answers, assumed));
+    console.log(`wrote ${designPath}`);
+    // 3. token layer
+    const srcRoot = existsSync(path.join(targetDir, "src")) ? path.join(targetDir, "src") : targetDir;
+    const brandCss = renderBrandCss(answers);
+    const cssPath = path.join(srcRoot, "askewly-brand.css");
+    writeFileSync(cssPath, brandCss);
+    console.log(`wrote ${cssPath}`);
+    // 4. transplant
+    const result = await transplantBlock(block, targetDir);
+    console.log(`transplanted ${result.written.length} file(s) from ${registryBase}/r/${opts.block}.json`);
+    // 5. required-var check (presence only — values are settled by human eyes)
+    const missing = missingRequiredVars(brandCss, result.requiredCssVars);
+    if (missing.length > 0) {
+        throw new KickstartError(`token layer is missing required CSS variables (block-contract §4): ${missing.join(", ")}`);
+    }
+    console.log(`required CSS variables: ${result.requiredCssVars.length}/${result.requiredCssVars.length} defined (presence check only — look at the rendered result before shipping)`);
+    // 6. verify
+    const blockDir = path.join(srcRoot, "components", "blocks", opts.block);
+    const { files, violations } = verifyDir(blockDir, ["tsx", "ts", "css"], {});
+    if (violations.length > 0) {
+        console.error(`verify FAIL — ${violations.length} violation(s) in ${files} file(s) under ${blockDir}`);
+        for (const violation of violations)
+            console.error(`  ${violation.file}:${violation.line} [${violation.rule}] ${violation.excerpt}`);
+        throw new KickstartError("transplanted block bypasses the token system — fix before continuing");
+    }
+    console.log(`verify PASS — ${files} block file(s), no color literals`);
+    // 7. handoff
+    console.log(`\nNext steps:`);
+    console.log(`  1. npm i ${[...result.npmDeps].sort().join(" ")}`);
+    console.log(`  2. import "./askewly-brand.css" after \`@import "tailwindcss";\` in your global stylesheet`);
+    console.log(`  3. render the block: import { SaasAppShell } from "@/components/blocks/${opts.block}/page"`);
+    console.log(`  4. wire routing yourself — the block deliberately ships none (block-contract §3)`);
+}

package/dist/verify.js

@@ -14,7 +14,7 @@ const TYPOGRAPHY_MARKER = /askewly-typography-ok(?::([^\n]*))?/;
 const DEFAULT_EXTENSIONS = ["tsx", "ts", "jsx", "js", "css", "html"];
 const SKIP_DIRS = new Set(["node_modules", "dist", "build", ".git", ".next"]);
 // Generated token files legitimately contain raw color values.
-const SKIP_FILES = new Set(["tokens.css", "askewly.css"]);
+const SKIP_FILES = new Set(["tokens.css", "askewly.css", "askewly-brand.css"]);
 const HEX_RULE = /#[0-9a-fA-F]{3,8}\b/;
 const COLOR_FN_RULE = /\b(?:rgb|rgba|hsl|hsla|oklch)\(/;
 // Every rule is checked independently per line. A single ternary would report

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askewly/design",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Query, inject, and verify the Askewly Design system (tokens, UI vocabulary, recipes) from your terminal or coding agent.",
   "license": "MIT",
   "homepage": "https://ui.askewly.com",