example brand file · Nordlicht (fictional)

A complete DESIGN.md, made by brandmarkdown

This is the full brand file brandmarkdown produced for Nordlicht, a fictional rota app for night-shift teams. Every section is filled, so you can see what an AI tool reads. Download DESIGN.md.

---
version: alpha
name: "Nordlicht"
description: "Nordlicht is rota software for night-shift teams in hospitals and factories. Planners build fair rotas in minutes, and the people on nights see their week, swap shifts and protect their rest from one phone screen. It should feel like a quiet control room at 3 a.m.: dark, legible, unhurried, with one"
colors:
  primary: "#FF6A3D"
  accent: "#7FA7C9"
  surface: "#172840"
  text: "#F4F1EA"
  neutral: "#3A4A60"
  background: "#0E1A2B"
typography:
  h1:
    fontFamily: "Space Grotesk"
    fontSize: 39px
    fontWeight: 700
    lineHeight: 1.1
  h2:
    fontFamily: "Space Grotesk"
    fontSize: 31px
    fontWeight: 700
    lineHeight: 1.15
  h3:
    fontFamily: "Space Grotesk"
    fontSize: 25px
    fontWeight: 700
    lineHeight: 1.2
  body-md:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: "Inter"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: "4px"
  md: "8px"
  lg: "14px"
  pill: "999px"
spacing:
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  6: "24px"
  8: "32px"
  12: "48px"
  16: "64px"
omitted:
  - section: components
    reason: "components live in the product's code; this file carries brand-level tokens"
# Made with brandmarkdown
# format: bmd-brand-v1
# date: 2026-10-06
# sources:
#   - Colors: https://brandmarkdown.com/colors/#0E1A2B-172840-F4F1EA-FF6A3D-7FA7C9-3A4A60
#   - Fonts: https://brandmarkdown.com/fonts/#h=Space+Grotesk:500,700&b=Inter:400,600,700&m=JetBrains+Mono:400,500&s=16x1.25
#   - Tokens: https://brandmarkdown.com/tokens/#nordlicht
#   - Patterns: https://brandmarkdown.com/patterns/#contour-2207-0E1A2B-3A4A60-7FA7C9
#   - Gradient: https://brandmarkdown.com/gradient/#polar-night
---

Nordlicht

Design system for Nordlicht: one document for people and for AI coding agents. Made with brandmarkdown on 2026-10-06.

How to read this file: the values in the tables are the only allowed values. When something you need is missing, use the nearest listed value and flag it. Sections marked "Not set yet" have no decision behind them, so do not fill them with guesses.

Every part of the brand is set.

Overview

Nordlicht

Nordlicht is rota software for night-shift teams in hospitals and factories. Planners build fair rotas in minutes, and the people on nights see their week, swap shifts and protect their rest from one phone screen. It should feel like a quiet control room at 3 a.m.: dark, legible, unhurried, with one warm light where action is needed.

Art direction

Saved with the brand (style). Layouts, covers and new assets follow these axes.

Strategy

Criteria

Judge every design against these, in this order.

1. Rest first: Every screen protects someone's sleep: the next free day and hours of rest are shown before the next shift.

2. Readable at 3 a.m.: Dark ground, large figures, one action per view. If a tired nurse cannot read it in two seconds, it is wrong.

3. Fair in plain numbers: Nights, weekends and swaps are counted and shown to everyone, so fairness is a figure, not a promise.

Audience: Shift planners and ward or line managers in hospitals and factories with 40 to 400 people on rotating nights, and the nurses, technicians and operators who work those nights.

Promise: Rotas that respect sleep

Brand rules

• Show times in 24-hour format with a leading zero: 06:00, 22:30.
• Name a shift by its hours, not by a code, the first time it appears on a screen.
• Never send a notification between 08:00 and 16:00 to someone coming off a night, unless they turned it on.
• Count rest in hours, not in days: 'next shift in 38 h'.
• One warm accent per view: Ember marks the one thing to do now.
• Charts compare people only with their own consent; team views show totals.

Mark

SVG mark nordlicht-mark, saved with the brand (mark.svg).

Rules for the mark: see Mark rules below.

Colors

Roles

• primary #FF6A3D Ember: Main actions, links on dark or light where contrast allows, key brand moments.
• accent #7FA7C9 Fjord: Use sparingly: highlights, tags, focus, charts.
• surface #172840 Slate: Cards, panels, inputs on the background.
• text #F4F1EA Paper: Body copy and headings.
• neutral #3A4A60 Ridge: Borders, muted UI.
• background #0E1A2B Night: Page background.

Contrast pairs

WCAG 2.x ratio, either color can be the text. Normal text needs 4.5:1 (AA), large text and UI shapes 3:1.

Typography

Load the fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Scale: 16px base, ratio 1.25.

• Headings: Space Grotesk, line-height 1.05 to 1.15, tight tracking from 3xl up.
• Body: Inter at base size, line-height 1.5, 60 to 75 characters per line.
• Code, data and captions: JetBrains Mono.

Spacing & shape

Elevation & motion

Under prefers-reduced-motion, set durations to 0ms.

Components

Derived rules. Components read roles and tokens, never raw values.

• Button, primary: fill #FF6A3D, label #0E1A2B (6.14:1), radius 8px, padding 12px 24px, Inter 600. One primary action per view.
• Button, secondary: transparent fill, 1.5px inside outline and label in the text color. Same size and radius as primary.
• Input: surface fill, 1px border in the border role, radius 8px, label above in text-muted, focus ring 2px in the focus role, offset 2px.
• Card: surface fill, radius 14px, shadow --shadow-1, padding 24px. Eyebrow in mono caps, title in the heading font.
• Links: primary works as link color on the page background #0E1A2B (6.14:1).

Patterns & shapes

1. contour, seed 2207

• Colors: #0E1A2B, #3A4A60, #7FA7C9
• Share: https://brandmarkdown.com/patterns/#contour-2207-0E1A2B-3A4A60-7FA7C9

{
  "lines": 22,
  "spacing": 14,
  "stroke": 1.2,
  "noise": 0.34,
  "accentEvery": 6,
  "note": "isolines read as a night sky over a quiet ward"
}

2. stripe, seed 618

• Colors: #172840, #3A4A60, #FF6A3D
• Share: https://brandmarkdown.com/patterns/#stripe-618-172840-3A4A60-FF6A3D

{
  "bands": 14,
  "minWidth": 0.35,
  "maxWidth": 1.65,
  "accentEvery": 4,
  "note": "shift bands: each band is one block of a rota"
}

Use patterns as backgrounds for covers, dividers and social frames. Keep text off busy areas or put it on a solid plate.

Gradients

1. Polar night

• Colors: #0E1A2B, #172840, #7FA7C9
• Share (live, animated): https://brandmarkdown.com/gradient/#polar-night
• CSS approximation, static:

background: radial-gradient(at 18% 22%, #172840 0px, transparent 62%), radial-gradient(at 84% 16%, #7FA7C9 0px, transparent 62%), #0E1A2B;

2. First light

• Colors: #0E1A2B, #3A4A60, #FF6A3D
• Share (live, animated): https://brandmarkdown.com/gradient/#first-light
• CSS approximation, static:

background: radial-gradient(at 18% 22%, #3A4A60 0px, transparent 62%), radial-gradient(at 84% 16%, #FF6A3D 0px, transparent 62%), #0E1A2B;

Voice

From Voice. These rules are the only allowed choices for any text the brand publishes.

• Words we use: rota, rest, shift, swap, night, fair, hours of rest, planner
• Words we avoid: schedule grid, downtime, resources, headcount, optimise, seamless, revolutionary, hustle

Say this, not that

Mechanics

• Address: talk to the reader as you, casually. We speak as we.
• Headlines: sentence case, at most 8 words. Sentences at most 18 words. Buttons at most 3 words. Posts at most 120 words.
• Long dashes: never, use a comma, colon or full stop. Emoji: never. Exclamation marks: never. Languages: English, German, Polish.

Samples

• Headline: Rotas that respect sleep
• Subhead: Build a fair night rota in minutes. Everyone sees their week, swaps in two taps and knows their next rest to the hour.
• Button: Plan a rota
• Social caption: Ward 4 moved to Nordlicht in March. Night swaps now take two taps, and every nurse sees their next 38 h of rest before the shift ends.

Imagery

For photos and generated images. Keep every row; change only the subject.

Lexicon

Use the left column. Never write the right one.

Color use

Proportions on a typical page or layout:

• Night carries the page; Slate lifts panels and cards one step.
• Paper is for text and figures, never a large fill inside the product.
• Ember marks the one action or the current shift on a screen, nothing else.
• Fjord is for focus rings, rest periods in the rota and secondary data series.

Type scale

Mark rules

• Clear space: the height of the Ember dot times two on every side
• Minimum size: 24 px for the full lockup, 16 px for the symbol alone
• Versions: full lockup on Paper, full lockup on Night with Paper wordmark, symbol alone for app icon and favicon

Never:

• recolour the Ember dot
• add a glow or drop shadow
• stretch or rotate the symbol
• set the wordmark in any font other than Space Grotesk

Audiences & tone

Tone by channel:

Video

• Brand film: Nordlicht, 45 s: one night nurse's week from the planner's rota to her first full sleep. Horizontal 16:9 master, cut-downs 9:16 and 1:1.
• Formats: 16:9 master 45 s, 9:16 cut-down 15 s, 1:1 cut-down 15 s
• Lengths: 45 s master, 15 s cut-downs, 6 s bumper
• Opening: a real night scene in the first second, no logo
• Closing: the promise in Space Grotesk on Night, then the lockup for 2 s
• Captions: always burned in, Inter 600, Paper on a Slate plate
• Sound and music: sparse piano or low synth pad, no drums, ambient room sound kept
• Pace and editing: slow, shots of 3 to 5 s, cuts on movement, no speed ramps
• Avoid: fast montages, alarm sounds, clocks spinning, people yawning to camera

Motion

• Durations: 200ms, 320ms, 480ms, 640ms
• Easings: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0.4, 0, 1, 1)
• Libraries in use: CSS transitions, Web Animations API

Do

• Keep Night as the page background in the product; people read it at 3 a.m. with tired eyes.
• Use Ember for one action per screen and for the current shift marker.
• Set times and shift codes in JetBrains Mono with tabular figures.
• Keep headings in sentence case.
• Read colors from role tokens (--color-*), never from raw hex in components.
• Use the contour pattern on covers and empty states, at low contrast behind text plates.
• Use First light only on marketing covers and the end of a shift summary.
• Put text on color with the Text on it column from Colors (checked for WCAG contrast).
• Use at most two families on a page, plus mono for code and data.
• Use values from this file only. When one is missing, pick the nearest and flag it.

Don't

• Don't put Ember text on Paper; it fails contrast at body size.
• Don't use red for alerts next to Ember; overtime warnings use Paper text on Slate with an Ember rule.
• Don't set body copy below 15px in the product; screens are read at arm's length on a ward trolley.
• Don't stack shadows; one level of elevation per surface.
• Don't animate the patterns inside the product.
• Don't put gradients behind data tables or the rota grid.
• Don't use primary #FF6A3D for text or thin lines on #F4F1EA (2.52:1). Use it as a fill.
• Don't invent colors, sizes or fonts that are not listed here.

Code

Brand variables

:root {
  --brand-background: #0E1A2B;
  --brand-surface: #172840;
  --brand-text: #F4F1EA;
  --brand-primary: #FF6A3D;
  --brand-accent: #7FA7C9;
  --brand-neutral: #3A4A60;
  --brand-font-heading: "Space Grotesk", system-ui, sans-serif;
  --brand-font-body: "Inter", system-ui, sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

tokens.css

From Tokens. Import once; :root holds the default scheme, data-theme="dark" switches a subtree to the dark variant.

:root {
  --color-bg: #0E1A2B;
  --color-surface: #172840;
  --color-text: #F4F1EA;
  --color-text-muted: #B9C3CF;
  --color-primary: #FF6A3D;
  --color-on-primary: #0E1A2B;
  --color-accent: #7FA7C9;
  --color-on-accent: #0E1A2B;
  --color-border: #3A4A60;
  --color-focus: #7FA7C9;
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-width-1: 1px;
  --border-width-2: 1.5px;
  --shadow-1: 0 1px 2px rgba(4, 9, 16, 0.40), 0 4px 12px rgba(4, 9, 16, 0.28);
  --shadow-2: 0 8px 28px rgba(4, 9, 16, 0.45);
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 480ms;
  --duration-calm: 640ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* dimmed control rooms and wards after 22:00: lower luminance, same roles */
[data-theme="dark"] {
  --color-bg: #08111D;
  --color-surface: #0E1A2B;
  --color-text: #E4E0D6;
  --color-text-muted: #9AA6B4;
  --color-primary: #E85E36;
  --color-on-primary: #08111D;
  --color-accent: #6F94B4;
  --color-on-accent: #08111D;
  --color-border: #253549;
  --color-focus: #7FA7C9;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.6);
}

tokens.json

W3C Design Tokens format, shipped next to this file as tokens.json. Top-level groups: space, radius, duration, ease, color.

Sources

• Colors: https://brandmarkdown.com/colors/#0E1A2B-172840-F4F1EA-FF6A3D-7FA7C9-3A4A60
• Fonts: https://brandmarkdown.com/fonts/#h=Space+Grotesk:500,700&b=Inter:400,600,700&m=JetBrains+Mono:400,500&s=16x1.25
• Tokens: https://brandmarkdown.com/tokens/#nordlicht
• Patterns: https://brandmarkdown.com/patterns/#contour-2207-0E1A2B-3A4A60-7FA7C9
• Gradient: https://brandmarkdown.com/gradient/#polar-night
• Brandbook: not added
• Strategy: nordlicht-strategy.md
• Made with brandmarkdown: https://brandmarkdown.com/