Sitka logoSitkav1.8

Getting Started

  • Introduction
  • Design Principles
  • Installation

Foundations

  • AccessibilityNew
  • Color
  • Contrast
  • Typography
  • Icons
  • Spacing
  • Border Radius
  • Shadows
  • Glass
  • Spatial Computing
  • Motion
  • Interaction
  • Gestures
  • Haptics
  • Keyboard Shortcuts
  • Writing
  • Data Visualisation
  • Charting
  • Desktop Layout
  • Empty States
  • Loading States
  • AI Agent Standards
  • Density SystemNew
  • Responsive GridNew
  • RTL & i18nNew
  • Forced ColorsNew
  • Component LifecycleNew

Components

  • ButtonGold Standard
  • Split Button
  • Segmented Button
  • ToggleNew
  • Chip
  • Input
  • TextareaNew
  • Prompt Input
  • OTP / PIN
  • Select
  • Checkbox
  • Radio
  • Switch
  • Slider
  • Combobox
  • Date & Time Picker
  • Date Range Picker
  • File UploadNew
  • LabelNew
  • Form Controls
  • Modal
  • Tooltip
  • PopoverNew
  • Dropdown MenuNew
  • Snackbar
  • Bottom Sheet
  • Context MenuNew
  • Feature GateNew
  • Command PaletteNew
  • DrawerNew
  • Navigation
  • Navigation MenuNew
  • MenubarNew
  • Tabs
  • Bottom Tab Bar
  • Breadcrumb
  • Carousel
  • Card
  • Badge
  • Avatar
  • Brand LogoNew
  • Table
  • Data GridNew
  • Progress BarNew
  • KPI TileNew
  • GaugeNew
  • Color PickerNew
  • SkeletonNew
  • SpinnerNew
  • DividerNew
  • Code BlockNew
  • Streaming TextNew
  • Chat MessageNew
  • Layout PrimitivesNew
  • CollapsibleNew
  • PaginationNew
  • SidebarNew

Patterns

  • Master Detail
  • Navbar
  • Form
  • Form Layout
  • Form Validation
  • Settings
  • WizardNew
  • Onboarding
  • Mobile Navigation
  • Mobile Widgets
  • Mobile Time LoggingNew
  • Voice Memo & DictationNew
  • Interview Email ParserNew
  • Document AssemblerNew
  • Interview Prep HubNew
  • Ghost Employer TrackingNew
  • Barcode ScannerNew
  • GTD Task InboxNew
  • Kanban BoardNew
  • Gantt / TimelineNew
  • Analytics DashboardNew
  • Burn TrajectoryNew
  • Goal & StreakNew
  • Team Capacity GridNew
  • Alluvial / Sankey FlowNew
  • Pricing Table
  • Activity FeedNew
  • Multi-select & Bulk ActionsNew
  • Data Entry
  • Drag and Drop
  • Import / ExportNew
  • Integration SettingsNew
  • Paywall / UpsellNew
  • Compensation BreakdownNew
  • Strategic InsightsNew
  • Notifications · Mobile
  • Notifications · Desktop
  • Chat & Conversation
  • Collaboration & Sharing
  • Media Player

How-tos

  • All how-tos
  • Design for dark mode
  • Ensure colour is accessible
  • Write clear interface copy
  • Visualise data accessibly
  • Design an onboarding flow
  • Wire Sitka's ThemeManager in SwiftUI

Resources

  • Overview
  • React · Next.js
  • React · Vite
  • Storybook
  • Tokens Only
  • iOS · SwiftUI
  • macOS · SwiftUI
  • React Native
  • Android · Compose
  • Figma
  • Design Tokens
  • Token Export
  • Theme Customizer
  • ESLint Plugin

About

  • Changelog
  • License
  • Status

Sitka

Sitka logo

Sitka Design System

Sitka bridges engineering and design with a single source of truth — consistent, accessible, and built to scale across Web, iOS, macOS, Android, and visionOS.

Components

Documented, accessible building blocks for React and SwiftUI — every variant, state, and interaction covered.

Design Tokens

Mathematical constants for colour, spacing and typography shared across every platform and target.

Foundations

Core visual principles and layout systems that enforce product-wide consistency at any scale.

Accessibility

WCAG 2.1 compliance built-in. Contrast ratios, interaction models, and screen-reader semantics by default.

Sitka Standards · v1.8.0

ChangelogLicenseStatus