KIKA Design System v2 (June 2026)
Calm, minimal, premium, modern dark UI with excellent light mode support. Inspired by Cursor, Linear, and high-quality dev tools.
When to Use
Use this skill for any work touching KIKA's UI:
- Building or refactoring a SwiftUI view
- Designing a settings window, menu bar, or popover
- Adding a new component (button, row, card, divider)
- Designing a right-click context menu or the macOS main menu bar (File / Edit / View)
- Reviewing UI for consistency with the design system
- Generating new screens that should match the existing app
Do not use it for non-UI logic, backend, or app architecture decisions.
Built for the KIKA app, but the tokens and approach are reusable: adopt or adapt the same palette, type scale, spacing, and components for your own calm, premium Apple-platform app.
Philosophy
- Calm over loud. Accent color is restrained. Borders are thin or absent.
- Elevation over borders. Subtle background changes carry hierarchy.
- Generous spacing. Three gap values (
12pt, 16pt, 20pt) carry the whole layout. (8pt exists for internal component padding only — never as a gap.)
- One font family. SF Pro. No custom imports.
- Dark first, light equally. Every token has a dark and light value.
- Icons over text. Always reach for SF Symbols first. Labels stay on actions; chrome stays symbol-only.
- No subtitles. If a label and a description feel needed, the description is the label — rewritten, not stacked.
- No visual clutter. No drop shadows, no decorative gradients, no colored icon fills, no multi-color palettes. Restraint is a feature.
Workflow
- Read the relevant reference. Pick the slice of the design system that applies:
- Color tokens → Colors
- Type scale → Typography
- Gaps, padding, rhythm → Spacing & Layout
- Cards, buttons, rows, dividers → Components
- Settings or About window → Settings Window
- Resolve tokens once. Use
KikaTheme.resolve(scheme:) (see the asset) — never hard-code hex per call site.
- Compose from building blocks.
KikaSectionHeader, KikaDivider, KikaRow, KikaPrimaryButtonStyle, KikaSecondaryButtonStyle are provided in SettingsView.swift.
- Honor system color scheme. Don't force light or dark. Let macOS / iOS decide and resolve tokens accordingly.
- Self-review against anti-patterns. Each reference ends with a "Anti-Patterns" list. Run through it before declaring the view done.
Quick Reference
Color tokens (one-line summary)
| Token |
Dark |
Light |
background |
#0D0D0D |
#F8F8F8 |
surface |
#161616 |
#FFFFFF |
elevated |
#1F1F1F |
#F0F0F0 |
divider |
white.opacity(0.08) |
#E5E5E5 |
textPrimary |
#D9D9D9 |
#1A1A1A |
textSecondary |
#BFBFBF |
#4A4A4A |
textTertiary |
#8C8C8C |
#6B6B6B |
accent |
#6D80A6 |
#5A6E94 |
border |
#2A2A2A |
#E0E0E0 |
divider and border are intentionally distinct. Use divider for one-line separators and border for control outlines (e.g. secondary button stroke). Don't substitute one for the other.
Type scale
| Role |
Size |
Weight |
| Title |
18pt |
semibold |
| Body |
13pt |
regular |
| Caption |
11pt |
regular |
| Icon |
14pt |
regular |
The 18/13/11/14 numbers above are the canonical values. The wider 17–20 / 13–14 / 11–12 ranges in Typography describe where it is acceptable to deviate, e.g. for a hero display or a one-off dense caption — not defaults to use casually.
Spacing
| Token |
Value |
Use for |
xs |
8pt |
Internal component padding only (e.g. button vertical) |
sm |
12pt |
Tight stacks, between related items |
md |
16pt |
Default vertical/horizontal rhythm |
lg |
20pt |
Between sections, page-level padding |
For layout gaps between elements, pick from sm / md / lg. xs is reserved for internal component padding (button vertical, dense row internals) — using it for gap rhythm would fragment the 3-value system.
Assets
- SettingsView.swift — Complete SwiftUI reference implementation: token resolution, theme environment,
KikaSectionHeader, KikaDivider, KikaRow, primary/secondary button styles, General tab, About tab, and a working SettingsView scene. Copy and adapt.
References
- Colors — Full dark/light color palette with rules and token mapping
- Typography — SF Pro scale, weights, line height, anti-patterns
- Spacing & Layout — Gap scale, padding, rhythm, anti-patterns
- Components — Surfaces, buttons, dividers, section headers, settings rows
- Settings Window — General and About tab layout specs
- Menus — Right-click context menus, the macOS main menu bar, icon catalog
Parse-Safe Notes
When generating code from this design system:
- SwiftUI's
Color(hex:) initializer shown in the asset uses UInt32 — keep the 0x prefix on literals
Color.white.opacity(0.08) is the canonical divider in dark mode; do not substitute #1A1A1A or similarFont.system(size:weight:) is the only font constructor — do not introduce .font(.body) shortcuts that may resolve to a non-SF-Pro system font in some contexts- The accent color is intentionally desaturated (
#6D80A6 / #5A6E94). Do not "brighten" it.
Out of Scope
- App architecture, networking, persistence
- Non-UI Swift / Swift API design
- Cross-platform (web, Android) styling — KIKA-born, but Apple-platform (SwiftUI) only; the tokens themselves can inform other platforms
1---2name: kika-design-system3description: Use when building or modifying SwiftUI views, settings windows, menu-bar UIs, or any surface for the KIKA app — or any calm, premium app you want to feel the same way. Encodes the KIKA Design System v2 (June 2026) — a calm, premium, modern dark UI with first-class light mode, inspired by Cursor, Linear, and high-quality dev tools — that you can adopt or adapt for your own app. Apply it to keep color, typography, spacing, and component styling consistent.4---56# KIKA Design System v2 (June 2026)78Calm, minimal, premium, modern dark UI with excellent light mode support. Inspired by Cursor, Linear, and high-quality dev tools.910## When to Use1112Use this skill for any work touching KIKA's UI:1314- Building or refactoring a SwiftUI view15- Designing a settings window, menu bar, or popover16- Adding a new component (button, row, card, divider)17- Designing a right-click context menu or the macOS main menu bar (File / Edit / View)18- Reviewing UI for consistency with the design system19- Generating new screens that should match the existing app2021Do **not** use it for non-UI logic, backend, or app architecture decisions.2223Built for the KIKA app, but the tokens and approach are reusable: adopt or adapt the same palette, type scale, spacing, and components for your own calm, premium Apple-platform app.2425## Philosophy2627- **Calm over loud.** Accent color is restrained. Borders are thin or absent.28- **Elevation over borders.** Subtle background changes carry hierarchy.29- **Generous spacing.** Three gap values (`12pt`, `16pt`, `20pt`) carry the whole layout. (`8pt` exists for **internal** component padding only — never as a gap.)30- **One font family.** SF Pro. No custom imports.31- **Dark first, light equally.** Every token has a dark and light value.32- **Icons over text.** Always reach for SF Symbols first. Labels stay on actions; chrome stays symbol-only.33- **No subtitles.** If a label and a description feel needed, the description is the label — rewritten, not stacked.34- **No visual clutter.** No drop shadows, no decorative gradients, no colored icon fills, no multi-color palettes. Restraint is a feature.3536## Workflow37381. **Read the relevant reference.** Pick the slice of the design system that applies:39 - Color tokens → [Colors](references/colors.md)40 - Type scale → [Typography](references/typography.md)41 - Gaps, padding, rhythm → [Spacing & Layout](references/spacing-layout.md)42 - Cards, buttons, rows, dividers → [Components](references/components.md)43 - Settings or About window → [Settings Window](references/settings-window.md)442. **Resolve tokens once.** Use `KikaTheme.resolve(scheme:)` (see the asset) — never hard-code hex per call site.453. **Compose from building blocks.** `KikaSectionHeader`, `KikaDivider`, `KikaRow`, `KikaPrimaryButtonStyle`, `KikaSecondaryButtonStyle` are provided in [SettingsView.swift](assets/SettingsView.swift).464. **Honor system color scheme.** Don't force light or dark. Let macOS / iOS decide and resolve tokens accordingly.475. **Self-review against anti-patterns.** Each reference ends with a "Anti-Patterns" list. Run through it before declaring the view done.4849## Quick Reference5051### Color tokens (one-line summary)5253| Token | Dark | Light |54|------------------|------------|-----------|55| `background` | `#0D0D0D` | `#F8F8F8` |56| `surface` | `#161616` | `#FFFFFF` |57| `elevated` | `#1F1F1F` | `#F0F0F0` |58| `divider` | `white.opacity(0.08)` | `#E5E5E5` |59| `textPrimary` | `#D9D9D9` | `#1A1A1A` |60| `textSecondary` | `#BFBFBF` | `#4A4A4A` |61| `textTertiary` | `#8C8C8C` | `#6B6B6B` |62| `accent` | `#6D80A6` | `#5A6E94` |63| `border` | `#2A2A2A` | `#E0E0E0` |6465> `divider` and `border` are intentionally distinct. Use `divider` for one-line separators and `border` for control outlines (e.g. secondary button stroke). Don't substitute one for the other.6667### Type scale6869| Role | Size | Weight |70|---------|------|-----------|71| Title | 18pt | semibold |72| Body | 13pt | regular |73| Caption | 11pt | regular |74| Icon | 14pt | regular |7576> The 18/13/11/14 numbers above are the canonical values. The wider 17–20 / 13–14 / 11–12 ranges in [Typography](references/typography.md) describe where it is acceptable to deviate, e.g. for a hero display or a one-off dense caption — not defaults to use casually.7778### Spacing7980| Token | Value | Use for |81|-------|-------|----------------------------------|82| `xs` | 8pt | Internal component padding only (e.g. button vertical) |83| `sm` | 12pt | Tight stacks, between related items |84| `md` | 16pt | Default vertical/horizontal rhythm |85| `lg` | 20pt | Between sections, page-level padding |8687> For layout **gaps** between elements, pick from `sm` / `md` / `lg`. `xs` is reserved for **internal** component padding (button vertical, dense row internals) — using it for gap rhythm would fragment the 3-value system.8889## Assets9091- [SettingsView.swift](assets/SettingsView.swift) — Complete SwiftUI reference implementation: token resolution, theme environment, `KikaSectionHeader`, `KikaDivider`, `KikaRow`, primary/secondary button styles, General tab, About tab, and a working `SettingsView` scene. Copy and adapt.9293## References9495- [Colors](references/colors.md) — Full dark/light color palette with rules and token mapping96- [Typography](references/typography.md) — SF Pro scale, weights, line height, anti-patterns97- [Spacing & Layout](references/spacing-layout.md) — Gap scale, padding, rhythm, anti-patterns98- [Components](references/components.md) — Surfaces, buttons, dividers, section headers, settings rows99- [Settings Window](references/settings-window.md) — General and About tab layout specs100- [Menus](references/menus.md) — Right-click context menus, the macOS main menu bar, icon catalog101102## Parse-Safe Notes103104When generating code from this design system:105106- SwiftUI's `Color(hex:)` initializer shown in the asset uses `UInt32` — keep the `0x` prefix on literals107- `Color.white.opacity(0.08)` is the canonical divider in dark mode; do not substitute `#1A1A1A` or similar108- `Font.system(size:weight:)` is the only font constructor — do not introduce `.font(.body)` shortcuts that may resolve to a non-SF-Pro system font in some contexts109- The accent color is intentionally desaturated (`#6D80A6` / `#5A6E94`). Do not "brighten" it.110111## Out of Scope112113- App architecture, networking, persistence114- Non-UI Swift / Swift API design115- Cross-platform (web, Android) styling — KIKA-born, but Apple-platform (SwiftUI) only; the tokens themselves can inform other platforms
aka-kika