Kilo Design

Design guidance for the Kilo Code frontend. Use this skill whenever the task involves how something looks, how it behaves, how it reads, or how it adapts.

Canonical rule: design contract first

Root DESIGN.md is the source of truth for token names, exact values, domain mappings, typography roles, radius, and spacing. reference/kilo-brand.md explains how to apply that contract. When guidance, existing CSS, or a component conflicts with DESIGN.md, treat it as implementation drift rather than precedent.

Load DESIGN.md and reference/kilo-brand.md on every invocation before picking tokens, typography, layout, or motion. Together they define:

• Kilo's dark-first web theme and six-role surface ladder.
• Brand yellow-green primary token as the primary CTA color, used once per surface.
• Fixed status-domain mappings, syntax colors, and diff colors.
• Inter / Roboto Mono typography roles and editor-only JetBrains Mono usage.
• Spacing, radius, component, and motion conventions.
• Kilo-specific anti-patterns to reject on sight.