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

7.3 KiB

Raw Permalink Blame History

Sage Green UI Style Guide

A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode.

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

1. Core principles

Use neutral 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 more colour.
Present one main task at a time.
Avoid animation unless it communicates useful state.
Never use colour as the only status signal.

2. Light mode

Token	Value	Purpose
`--page`	`#F7F8F4`	Main page background
`--page-accent`	`#EAEDE4`	Subtle page depth
`--surface`	`#FFFFFF`	Cards and dialogs
`--surface-alt`	`#F0F3EB`	Inputs and secondary regions
`--surface-strong`	`#DFE5D8`	Selected and elevated elements
`--text`	`#2C352C`	Main text
`--muted`	`#6D786B`	Secondary text
`--border`	`#CED7C8`	Borders and dividers
`--primary`	`#71866C`	Main action and brand colour
`--primary-hover`	`#586D54`	Primary hover and active state
`--secondary`	`#DDE6E1`	Secondary action
`--secondary-hover`	`#CEDCD5`	Secondary hover state

3. Dark mode

Token	Value	Purpose
`--page`	`#020503`	Main dark background
`--page-accent`	`#08100A`	Background depth
`--surface`	`#101812`	Cards and dialogs
`--surface-alt`	`#19231B`	Inputs and secondary regions
`--surface-strong`	`#2A382D`	Selected and elevated elements
`--text`	`#F1F5EF`	Main text
`--muted`	`#BCC6B9`	Secondary text
`--border`	`#435246`	Borders and dividers
`--primary`	`#9BB094`	Main action and brand colour
`--primary-hover`	`#829A7C`	Primary hover and active state
`--secondary`	`#3F5B57`	Secondary action
`--secondary-hover`	`#53716C`	Secondary hover state

4. Colour roles

Primary

Use the primary colour for calm confirmation, primary actions and selected states.

Good uses:

main button
active navigation
selected controls
important links
compact brand details

Do not use it on every surface. The primary colour should answer:

What should I do next?

Secondary

Use the secondary colour for cool eucalyptus structure and supporting actions.

Good uses:

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	`#8D9F8B`	`#A9B6A7`
Accent 2	`#66888A`	`#7FA4A4`
Accent 3	`#C2A36F`	`#CFB37F`
Success	`#64806A`	`#92B09A`
Danger	`#A9655D`	`#D38E83`

Use only one supporting accent inside a component unless there is a strong reason to use more.

A useful page-level balance is:

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 sizes:

Element	Size
Body text	`18px`
Small text	`14–15px`
Form labels	`16–17px`
Buttons	`16–18px`
H1	`42–64px`
H2	`28–38px`
H3	`21–26px`

Reading rules:

body line-height around 1.6
paragraphs below roughly 70ch
left-aligned body text
no long all-caps passages
bold used selectively
short, concrete headings

6. Layout and spacing

Use an 8-pixel 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

Recommended widths:

forms: 400–480px
reading content: 680–760px
application layouts: 1040–1200px

Keep one clear purpose per card. Avoid deeply nested cards and heavy borders.

7. Components

Primary button

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

Use one obvious primary action 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

Put errors beside the affected field.
Explain how to fix the problem.
Preserve entered information.
Use text or icons as well as colour.
Reserve the danger colour for genuine errors or destructive actions.

8. ADHD-friendly interaction rules

Present one main task at a time.
Reduce optional decisions near the primary button.
Keep related controls physically close.
Use consistent action placement.
Preserve entered data after errors.
Avoid unexpected layout movement.
Respect prefers-reduced-motion.
Keep notifications short and actionable.
Use progressive disclosure for advanced options.
Do not hide critical actions behind unlabeled icons.

9. Accessibility checks

Before release:

Test keyboard navigation.
Verify visible focus states.
Check text and button contrast.
Test at 200% zoom.
Connect labels to form controls.
Use semantic HTML before ARIA.
Test light and dark modes separately.
Check error messages with assistive technology when possible.

10. Quick tokens

:root {
  --page: #F7F8F4;
  --surface: #FFFFFF;
  --surface-alt: #F0F3EB;
  --text: #2C352C;
  --muted: #6D786B;
  --border: #CED7C8;
  --primary: #71866C;
  --secondary: #DDE6E1;
}

html[data-theme="dark"] {
  --page: #020503;
  --surface: #101812;
  --surface-alt: #19231B;
  --text: #F1F5EF;
  --muted: #BCC6B9;
  --border: #435246;
  --primary: #9BB094;
  --secondary: #3F5B57;
}

11. Final rule

When the design starts to feel busy, remove emphasis before adding another colour.

The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable.

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>

7.3 KiB Raw Permalink Blame History Unescape Escape