INBOX/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md

# Dusty Lilac UI Style Guide

A quiet lilac system with slate support, separated from the brighter purple and pink families.

Dusty Lilac is deliberately muted. Avoid bright violet additions, which would undermine its calm character.

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` | `#F9F7FB` | Main page background |
| `--page-accent` | `#EEEAF3` | Subtle page depth |
| `--surface` | `#FFFFFF` | Cards and dialogs |
| `--surface-alt` | `#F3EFF7` | Inputs and secondary regions |
| `--surface-strong` | `#E4DDEB` | Selected and elevated elements |
| `--text` | `#302B38` | Main text |
| `--muted` | `#706A79` | Secondary text |
| `--border` | `#D6CFDE` | Borders and dividers |
| `--primary` | `#88769A` | Main action and brand colour |
| `--primary-hover` | `#6D5B80` | Primary hover and active state |
| `--secondary` | `#DEE6E9` | Secondary action |
| `--secondary-hover` | `#CDDADF` | Secondary hover state |

---

## 3. Dark mode

| Token | Value | Purpose |
|---|---:|---|
| `--page` | `#030205` | Main dark background |
| `--page-accent` | `#0A0710` | Background depth |
| `--surface` | `#141019` | Cards and dialogs |
| `--surface-alt` | `#201827` | Inputs and secondary regions |
| `--surface-strong` | `#32263B` | Selected and elevated elements |
| `--text` | `#F6F1F8` | Main text |
| `--muted` | `#C5BBCB` | Secondary text |
| `--border` | `#4C4056` | Borders and dividers |
| `--primary` | `#B09BC3` | Main action and brand colour |
| `--primary-hover` | `#947DAA` | Primary hover and active state |
| `--secondary` | `#40575E` | Secondary action |
| `--secondary-hover` | `#526D75` | Secondary hover state |

---

## 4. Colour roles

### Primary

Use the primary colour for gentle primary actions, selected states and quiet brand emphasis.

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 slate structure, secondary actions and informational controls.

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 | `#A594B6` | `#C1AED1` |
| Accent 2 | `#718F96` | `#82A1A8` |
| Accent 3 | `#C2A475` | `#D0B27F` |
| Success | `#6C8973` | `#94B09A` |
| Danger | `#A76470` | `#D4939D` |

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

```css
--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.

```text
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

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

Use one obvious primary button per task area.

### Secondary button

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

Use for optional or reversible actions.

### Inputs

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

On focus:

```css
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

```css
:root {
  --page: #F9F7FB;
  --surface: #FFFFFF;
  --surface-alt: #F3EFF7;
  --text: #302B38;
  --muted: #706A79;
  --border: #D6CFDE;
  --primary: #88769A;
  --secondary: #DEE6E9;
}

html[data-theme="dark"] {
  --page: #030205;
  --surface: #141019;
  --surface-alt: #201827;
  --text: #F6F1F8;
  --muted: #C5BBCB;
  --border: #4C4056;
  --primary: #B09BC3;
  --secondary: #40575E;
}
```

---

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

```css
@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:

```html
<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>
```