2026-08-07 15:50:54 +02:00

6.9 KiB

Raw Blame History

Black & White UI Style Guide

A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable.

Pure black and white can feel harsh. Layered grey surfaces and off-white content areas preserve the monochrome look while lowering visual strain.

This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents.

1. Core rules

Use neutral backgrounds and surfaces for most of the page.
Reserve the primary colour for the next important action.
Use the secondary colour for optional or supporting actions.
Use spacing and typography before adding colour.
Keep one main task visible at a time.
Avoid decorative motion and unexpected layout changes.
Never communicate status using colour alone.

2. Light mode

Token	Value	Purpose
`--page`	`#F7F7F7`	Main page background
`--page-accent`	`#ECECEC`	Subtle page depth
`--surface`	`#FFFFFF`	Cards and dialogs
`--surface-alt`	`#F1F1F1`	Inputs and secondary regions
`--surface-strong`	`#DEDEDE`	Selected and elevated elements
`--text`	`#111111`	Main text
`--muted`	`#626262`	Secondary text
`--border`	`#CDCDCD`	Borders and dividers
`--primary`	`#111111`	Main action and brand colour
`--primary-hover`	`#000000`	Primary hover and active state
`--secondary`	`#E1E1E1`	Secondary action
`--secondary-hover`	`#D2D2D2`	Secondary hover state

3. Dark mode

Token	Value	Purpose
`--page`	`#000000`	Main dark background
`--page-accent`	`#050505`	Background depth
`--surface`	`#101010`	Cards and dialogs
`--surface-alt`	`#1A1A1A`	Inputs and secondary regions
`--surface-strong`	`#2B2B2B`	Selected and elevated elements
`--text`	`#FFFFFF`	Main text
`--muted`	`#BEBEBE`	Secondary text
`--border`	`#444444`	Borders and dividers
`--primary`	`#FFFFFF`	Main action and brand colour
`--primary-hover`	`#E8E8E8`	Primary hover and active state
`--secondary`	`#353535`	Secondary action
`--secondary-hover`	`#494949`	Secondary hover state

4. Colour roles

Primary

Use the primary colour for the single strongest action, active navigation and unmistakable selection.

Use it on:

the main button
active navigation
selected controls
important links
compact brand marks

The primary colour should answer:

What should I do next?

Secondary

Use the secondary colour for supporting controls and optional actions without introducing colour.

Use it on:

secondary buttons
optional actions
toolbars
supporting cards
inactive navigation

The secondary colour should answer:

What else can I do?

Supporting accents

Role	Light	Dark
Accent 1	`#777777`	`#D0D0D0`
Accent 2	`#A0A0A0`	`#9A9A9A`
Accent 3	`#C5C5C5`	`#6E6E6E`
Success	`#666666`	`#B8B8B8`
Danger	`#4A4A4A`	`#D8D8D8`

Use one supporting accent per component whenever possible.

Recommended page balance:

70% neutral backgrounds and surfaces
20% primary and secondary structure
10% supporting accents and status colours

5. Typography

--font-body:
  "Atkinson Hyperlegible",
  "Segoe UI",
  Arial,
  sans-serif;

--font-ui:
  "Lexend",
  "Segoe UI",
  Arial,
  sans-serif;

Use Atkinson Hyperlegible for paragraphs, instructions, tables and form help.

Use Lexend for headings, buttons, navigation and labels.

Recommended settings:

body text: 18px
body line-height: 1.6
paragraphs: no wider than 70ch
labels and buttons: 16–18px
left-aligned body text
concise headings
no long all-caps passages

6. Layout and spacing

Use an 8-pixel spacing rhythm.

4px   tiny adjustment
8px   closely related elements
16px  normal component spacing
24px  groups inside a section
32px  separation between sections
48px+ major page regions

Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows.

7. Components

Primary button

background: var(--primary);
color: var(--on-primary);

Use one obvious primary button per task area.

Secondary button

background: var(--secondary);
color: var(--on-secondary);

Use for optional or reversible actions.

Inputs

background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text);

On focus:

border-color: var(--primary);
outline: 3px solid var(--focus);

Validation

Place the error beside the affected field.
Explain how to fix the problem.
Preserve the user’s entered data.
Use text or an icon as well as colour.

8. ADHD-friendly interaction rules

Present one main task at a time.
Reduce optional decisions near the primary action.
Keep related controls close together.
Use consistent button placement.
Avoid unexpected layout movement.
Respect prefers-reduced-motion.
Keep notifications short and actionable.
Use progressive disclosure for advanced options.

9. Accessibility checks

Before release:

test keyboard navigation
verify visible focus states
check text and button contrast
test at 200% zoom
connect labels to controls
test light and dark modes separately
use semantic HTML before ARIA

10. Quick tokens

:root {
  --page: #F7F7F7;
  --surface: #FFFFFF;
  --surface-alt: #F1F1F1;
  --text: #111111;
  --muted: #626262;
  --border: #CDCDCD;
  --primary: #111111;
  --secondary: #E1E1E1;
}

html[data-theme="dark"] {
  --page: #000000;
  --surface: #101010;
  --surface-alt: #1A1A1A;
  --text: #FFFFFF;
  --muted: #BEBEBE;
  --border: #444444;
  --primary: #FFFFFF;
  --secondary: #353535;
}

11. Final rule

When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention.

Typography sample card

Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface.

The demos load the fonts through the Google Fonts CSS API:

@import url(
  "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap"
);

Recommended use:

Lexend for the card heading, subheading, labels and badges
Atkinson Hyperlegible for the paragraph and longer reading text

Example structure:

<article class="sample-card">
  <p class="sample-card__eyebrow">Typography sample</p>
  <h3>A calm and readable card heading</h3>
  <p class="sample-card__subheading">
    A concise subheading demonstrates Lexend at a smaller interface size.
  </p>
  <p class="sample-card__body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</article>

6.9 KiB Raw Blame History Unescape Escape