Brand book · 02
Colour
The Dwellir Extended palette in light and dark: grounds, ink, the green accent, the status scale and the aurora hues, with OKLCH and hex values and measured contrast.
The Dwellir Extended palette
Name a colour by its job, never by its value. The site's classes read these tokens (bg-background, text-accent-ink), so a sheet or a theme can swap them. The hex values are for design tools; the site draws in OKLCH.
Select a value to copy it. The values come from styles/aurora-tokens.css through the theme map in styles/design-system-theme.css, read when the site builds.
Grounds and sheets
About 60% of a layout
The page ground, the alt sheet and the sky carry most of every page. White and cool greys by day, neutral greys at night: never pure black.
backgroundThe page ground. Inside an alt sheet, the cards take it.
LightDarkcardCards and panels. By day also the ground of the alt sheet.
LightDarkalt-groundThe ground of the alt sheet: the card colour by day, a step below the page at night, so its cards still rise.
LightDarkskyThe deep sheet of heroes and closing calls to action.
LightDarkborderHairlines and card edges. White at 10% at night; the hex is the edge drawn on the page.
LightDark
Ink
About 25%
Three steps of text. Titles stand a step above the body; muted text still meets AA on every ground.
titleTitles and headings.
LightDarkforegroundBody text and icons.
LightDarkmuted-foregroundSecondary text, captions and labels.
LightDark
The green
About 8%
One green leads: the main action, links and focus. It is the same hue in both themes; its text step darkens by day and lightens at night.
primaryThe fill of the main action.
LightDarkprimary-hoverThe main action under the pointer.
LightDarkprimary-foregroundText on the green fill.
LightDarkaccent-inkGreen text and links.
LightDarkringThe keyboard focus ring.
LightDark
Status and signals
Only to report a state
A fill per uptime tier for bars and tints, and an ink for text. Errors and warnings have their own inks. A label always says the state too.
status-operationalOperational: fill.
LightDarkstatus-operational-inkOperational: text.
LightDarkstatus-minorMinor outage: fill.
LightDarkstatus-minor-inkMinor outage: text.
LightDarkstatus-majorMajor outage: fill.
LightDarkstatus-major-inkMajor outage: text.
LightDarkstatus-downDown: fill and text.
LightDarkstatus-no-dataNo data: fill.
LightDarkdestructiveErrors and destructive actions.
LightDarkwarning-inkWarnings, such as a fallback.
LightDark
Aurora hues
About 5%, in artwork and categories
Green, violet, rose and gold. They light the aurora, tell categories and chart series apart, and tint icon chips. Never for body text: use the ink step.
aurora-1Green: the curtain, series 1.
LightDarkaurora-2Violet: series 2.
LightDarkaurora-3Rose: series 3.
LightDarkaurora-4Gold: series 4.
LightDarkaurora-1-inkGreen text on its tint.
LightDarkaurora-2-inkViolet text on its tint.
LightDarkaurora-3-inkRose text on its tint.
LightDarkaurora-4-inkGold text on its tint.
LightDark
Contrast
Every pair the parts use, measured from the tokens with the WCAG 2 formula. Text needs 4.5:1; large text and graphics such as bars and control edges need 3:1.
| Pair | Light | Dark | Needs |
|---|---|---|---|
| Body text on the groundforeground on background | 15.46:1Pass | 8.29:1Pass | 4.5:1 |
| Body text on a cardforeground on card | 13.90:1Pass | 7.48:1Pass | 4.5:1 |
| Titles on the groundtitle on background | 19.21:1Pass | 11.08:1Pass | 4.5:1 |
| Muted text on the groundmuted-foreground on background | 6.31:1Pass | 6.77:1Pass | 4.5:1 |
| Muted text on a cardmuted-foreground on card | 5.67:1Pass | 6.12:1Pass | 4.5:1 |
| Muted text on the skymuted-foreground on sky | 5.18:1Pass | 8.41:1Pass | 4.5:1 |
| Links on the groundaccent-ink on background | 7.80:1Pass | 7.14:1Pass | 4.5:1 |
| Links on a cardaccent-ink on card | 7.02:1Pass | 6.45:1Pass | 4.5:1 |
| Text on the green buttonprimary-foreground on primary | 8.26:1Pass | 8.26:1Pass | 4.5:1 |
| Error text on the grounddestructive on background | 6.60:1Pass | 7.46:1Pass | 4.5:1 |
| Warning text on the groundwarning-ink on background | 5.90:1Pass | 7.39:1Pass | 4.5:1 |
| Status text on a cardstatus-operational-ink on card | 7.02:1Pass | 6.45:1Pass | 4.5:1 |
| Violet text on the groundaurora-2-ink on background | 8.68:1Pass | 7.06:1Pass | 4.5:1 |
| A status bar on the groundstatus-operational on background | 4.07:1Pass | 5.34:1Pass | 3:1 |
| A checkbox edge on the groundinput-strong on background | 4.29:1Pass | 4.71:1Pass | 3:1 |
Proportion
Neutrals do the work. The green marks what to do next. The aurora hues and the status colours are spice: a page that is mostly colour has lost its calm.
One green per view, on the next action. Everything else is ink and grey until the reader points at it. Each aurora hue then owns one role in that view: violet for where, blue for how much, gold for how fast, rose for who. Two parts side by side never share a hue. Text in a hue keeps 4.5:1 and marks keep 3:1. A hue that cannot reach 4.5:1 and still look like itself, such as gold on a light card, marks graphics only. Rose is an aurora hue, not an error colour. In a status view, rose means "major" and no aurora role uses it.
- Grounds and sheets 60%
- Ink 25%
- The green 8%
- Aurora hues 5%
- Status 2%
Start free.1 response = 1 credit.
100,000 responses a day at 20 per second, on 150+ networks. Upgrade when you need more.