✦
┌──────────────┐ │ ● ● ● ● ● │ │ Colors │ ├──────────────┤ │ Aa Bb Cc │ │ Typography │ ├──────────────┤ │ ▐ ▌ ▐ ▌ ▐ │ │ Spacing │ └──────────────┘

Design System

Tokens, colors, typography, spacing, dark mode, and accessibility.

♿ A11y ───────── 44pt target VoiceOver Dynamic Type High Contrast
Developer Docs Archon iOS · Swift · SwiftUI API v1

Design System

Tokens, colors, typography, spacing, dark mode, and accessibility guidelines.

Design Tokens

All visual properties in Archon are defined as design tokens in DesignTokens.swift. Never use raw color values or hardcoded sizes in views.

enum DesignTokens {
    enum Colors { ... }
    enum Typography { ... }
    enum Spacing { ... }
    enum CornerRadius { ... }
    enum Shadows { ... }
}

Colors

Archon uses a purple-centric palette with semantic color roles. All colors are defined as SwiftUI Color extensions with dark mode variants.

●
Primary — Purple
#7C5CFC — Main brand color. Used for primary buttons, active states, and links.
●
Success — Green
#34D399 — Completed tasks, success messages, online indicators.
●
Warning — Orange
#F59E0B — In-progress states, warnings, credit alerts.
●
Info — Cyan
#06B6D4 — Informational badges, links in code browser.

Semantic Colors

Background
.background — Main screen background. .backgroundSecondary — Cards, sidebar. .backgroundTertiary — Input fields.
Text
.textPrimary — Headings. .textSecondary — Body, descriptions. .textTertiary — Captions, timestamps.
Borders
.border — Default dividers. .borderStrong — Active input fields, focused states.

Typography

Archon uses the system font (SF Pro) at fixed sizes mapped to semantic roles:

enum Typography {
    static let largeTitle = Font.system(size: 34, weight: .bold)
    static let title1     = Font.system(size: 28, weight: .bold)
    static let title2     = Font.system(size: 22, weight: .semibold)
    static let title3     = Font.system(size: 20, weight: .semibold)
    static let headline   = Font.system(size: 17, weight: .semibold)
    static let body       = Font.system(size: 17, weight: .regular)
    static let callout    = Font.system(size: 16, weight: .regular)
    static let subheadline = Font.system(size: 15, weight: .regular)
    static let footnote   = Font.system(size: 13, weight: .regular)
    static let caption    = Font.system(size: 12, weight: .regular)
    static let code       = Font.system(size: 14, weight: .regular, design: .monospaced)
}

Spacing

Consistent spacing using a 4pt grid system:

enum Spacing {
    static let xs: CGFloat = 4
    static let sm: CGFloat = 8
    static let md: CGFloat = 12
    static let lg: CGFloat = 16
    static let xl: CGFloat = 20
    static let xxl: CGFloat = 24
    static let xxxl: CGFloat = 32
    static let section: CGFloat = 40
}

Corner Radius

Small — 6pt
Badges, small buttons, tags.
Medium — 10pt
Cards, input fields, list items.
Large — 16pt
Sheets, modals, large containers.
Full — 999pt
Pill buttons, avatars, status dots.

Dark Mode

Archon fully supports dark mode using adaptive colors. Every semantic color has a light and dark variant defined in Color+Theme.swift.

Automatic Switching
The app follows the system appearance setting. No manual toggle — it uses .preferredColorScheme(nil).
OLED Black
Dark mode background uses true black (#000000) for OLED power savings on modern iPhones.
Contrast Ratios
All text/background combinations meet WCAG AA (4.5:1 for body text, 3:1 for large text).

Accessibility

Archon is built to be usable by everyone. Key accessibility commitments:

👆
44pt Touch Targets
All interactive elements have a minimum 44×44pt hit area. Buttons and links use padding to meet this even when the visual content is smaller.
🔊
VoiceOver
Every screen is fully navigable with VoiceOver. All images have accessibilityLabel. Custom controls implement accessibilityHint where needed.
🔤
Dynamic Type
All text uses semantic font styles that scale with Dynamic Type settings. Layouts adapt to accommodate larger text sizes without clipping.
🎨
High Contrast
Supports Increased Contrast accessibility setting. Border widths and color contrasts adjust automatically.

VoiceOver Best Practices in Archon

Labels
Every interactive element has a concise accessibilityLabel. Example: "Send message" instead of "Button".
Hints
Complex controls include accessibilityHint. Example: "Double tap to open project details".
Grouping
Related elements use .accessibilityElement(children: .combine) to form logical groups.
Announcements
State changes use UIAccessibility.post() to announce updates (e.g., "Task completed", "Message sent").