kika-design-system

name	kika-design-system
description	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.
version	1.0.0

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

1. 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
2. Resolve tokens once. Use KikaTheme.resolve(scheme:) (see the asset) — never hard-code hex per call site.
3. Compose from building blocks. KikaSectionHeader, KikaDivider, KikaRow, KikaPrimaryButtonStyle, KikaSecondaryButtonStyle are provided in SettingsView.swift.
4. Honor system color scheme. Don't force light or dark. Let macOS / iOS decide and resolve tokens accordingly.
5. 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 similar
• 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 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