Results for “token-creation”

Generate design tokens, color palettes, typography scales, component systems, and developer handoff documentation for UI design systems.

Creates and manages design tokens with a three-layer architecture (primitive, semantic, component), generates CSS variables and component specifications, and produces brand-compliant slide presentations with Chart.js integration.

Turn a chosen design direction into a canonical DESIGN.md plus production tokens that don't look vibecoded — state-level colors (8-step neutral ramp, rest/hover/active/ disabled, focus ring), APCA-checked contrast, typography, spacing/radius/motion/elevation, an icon strategy, and component contracts for the core atoms. Emits tokens in the project's stack format (shadcn HSL vars or Tailwind v4 @theme). Load when the user asks to build a design system, generate design tokens, create a DESIGN.md, set up a theme, design a color or type system, pick icons, or when frontend-design routes here. Replaces design-tokens-craft and icon-craft. Sub-skill of frontend-design. Reads DIRECTION.md first.

Use when a project's visual foundation — typography scale, color palette, spacing — needs establishing as canonical design tokens; the target has no design system yet (the 0→1 case), the A-Team design phase needs tokens for the lofi and the spec's design-system mapping, or a human runs the token flow standalone ("set up the design system", "pick fonts and colors", "define design tokens"). In the A-Team pipeline it is conducted by ateam-design in pipeline mode — no interview; inputs derive from context.md's

Creates and manages design token systems with three-layer architecture, generates CSS variables, validates token usage, and produces brand-compliant slide presentations with Chart.js and contextual decision logic.

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.