Halcyon DESIGN.md Example

What this file renders to

Computed from the file below when this page is built. Open it in the viewer for the full guideline with navigation and diagnostics.

Lint summary

The same checks as the DESIGN.md linter, run on this file at build time. Design system defines 6 colors, 3 typography scales, 5 rounding levels, 5 spacing tokens, 2 components.

• 0 errors
• 4 warnings
• 1 info

• warningbroken-ref components.button-primary.borderRadius
  'borderRadius' is not a recognized component sub-token. Valid sub-tokens: backgroundColor, textColor, typography, rounded, padding, size, height, width.
• warningorphaned-tokens colors.slate
  'slate' is defined but never referenced by any component.
• warningorphaned-tokens colors.teal
  'teal' is defined but never referenced by any component.
• warningorphaned-tokens colors.mist
  'mist' is defined but never referenced by any component.

Copy it, edit it, and use it as a starting point for your own file. Nothing is uploaded.

---
version: alpha
name: Halcyon
description: A cool, architectural interface system for a modern analytics product.
colors:
  primary: "#2D5BFF"
  ink: "#0E1726"
  slate: "#5A6472"
  teal: "#0FB5AE"
  mist: "#EDF1F7"
  surface: "#FFFFFF"
typography:
  display-lg: { fontFamily: Sora, fontSize: 52px, fontWeight: 600, lineHeight: 1.04, letterSpacing: -0.025em }
  body-md: { fontFamily: Inter, fontSize: 16px, fontWeight: 400, lineHeight: 1.6 }
  label-caps: { fontFamily: Space Grotesk, fontSize: 12px, fontWeight: 600, lineHeight: 1.0, letterSpacing: 0.12em }
rounded: { none: 0px, sm: 6px, md: 10px, lg: 16px, full: 9999px }
spacing: { xs: 4px, sm: 8px, base: 16px, lg: 32px, xl: 64px }
components:
  button-primary: { backgroundColor: "{colors.primary}", textColor: "{colors.surface}", borderRadius: "{rounded.md}", padding: 12px 20px }
  button-primary-hover: { backgroundColor: "{colors.ink}" }
---

## Overview

Halcyon is built for focus at altitude: cool graphite surfaces, a single
electric cobalt reserved for the one action that matters, and generous air
between everything. Teal carries data and secondary accents, kept clear of
cobalt so the hierarchy never blurs.

## Colors

- **primary (#2D5BFF):** electric cobalt, the single interaction and brand color.
- **ink (#0E1726):** near-black graphite for headlines and body text.
- **teal (#0FB5AE):** data and secondary accents only, never adjacent to cobalt.

## Typography

Three specimens carry the whole system. Sora sets display, Inter carries body
copy, and Space Grotesk handles the uppercase labels reserved for the one action.

## Do's and Don'ts

- Do reserve cobalt for the single most important action per view.
- Do keep body text on surface above a 7:1 contrast ratio.
- Don't place teal and cobalt adjacent at full saturation.
- Don't use more than two weights of Sora on one screen.

More files: all DESIGN.md examples and templates.