The design language

Daybreak is warm glass, one sun and the light of early morning. Follow these rules and your app looks like it belongs next to Files and Mail. The full rules, with every value, are in docs/design/DESIGN.md in the repository.

Principles

1. One sun. Flare, the orange of the logo, is the only accent. It marks the one main action in a window.
2. Warm glass over warm light. Neutrals are warm browns, never grey. Shadows are umber, never black, in light mode.
3. Focus is lit, the rest steps back. The focused window is brighter and sits higher.
4. Familiar first. People should know how to use your app before they've learned anything.
5. Moves like light. Things fade and glow into place. Nothing bounces or spins for fun.
6. Plain words. Say what it does, then stop.
7. Everyone can use it. Contrast, focus, the keyboard and reduced motion are part of the design.

Colour

• Use roles, not the palette. Write var(--text-2), not a hex value or var(--color-ink-600). Roles switch for dark mode, which Daybreak calls Flare, by themselves.
• One flare fill per window at rest, usually the primary button. Text on flare is ink, var(--on-accent), never white.
• Accent text is var(--text-accent). Flare 500 is never text.
• Status colour always comes with a word or an icon.
• Don't add colours. No blue links, no purple highlights, no green buttons.

Type

• Unbounded is for display and headings only, never below 14 px.
• Instrument Sans is for everything else: body, buttons and labels.
• IBM Plex Mono is for code, file sizes and other figures.
• Sentence case for every heading, button, menu item and window title.

Surfaces, space and motion

• Glass is only for the desktop's own parts: windows, the menu bar and the dock. Your app's content sits on solid --bg and --bg-raised.
• Space comes in steps of 4 px, from --space-1 to --space-7.
• Motion uses the duration and easing tokens. With reduced motion, everything becomes a simple fade.
• Lay out by the window's width, with container queries. A wider window gets more columns, not longer lines.

Words

Write the way does: plain, warm and exact, in Australian English. Talk to people, not "users". Name the thing, the file or the time. Buttons are a verb for what happens next, like Send or Rename. No exclamation marks and no emoji.

Next

• Components builds these rules in, so you rarely need to think about them.
• Icons and tokens has the values themselves.