INBOX/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md

# Orchid Pop UI Style Guide

A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable.

The exact anchor colour is `#B744C4`. Because it is already visually assertive, the supporting palette is intentionally softer and more neutral.

This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and 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` | `#FCF7FD` | Main page background |
| `--page-accent` | `#F2E6F5` | Subtle page depth |
| `--surface` | `#FFFFFF` | Cards and dialogs |
| `--surface-alt` | `#F8EEFA` | Inputs and secondary regions |
| `--surface-strong` | `#EDD8F0` | Selected and elevated elements |
| `--text` | `#33273A` | Main text |
| `--muted` | `#766A7D` | Secondary text |
| `--border` | `#E0CEE4` | Borders and dividers |
| `--primary` | `#B744C4` | Main action and brand colour |
| `--primary-hover` | `#972FA3` | Primary hover and active state |
| `--secondary` | `#E0E5EB` | Secondary action |
| `--secondary-hover` | `#D1D9E1` | Secondary hover state |

---

## 3. Dark mode

| Token | Value | Purpose |
|---|---:|---|
| `--page` | `#040105` | Main dark background |
| `--page-accent` | `#0B0610` | Background depth |
| `--surface` | `#180F1A` | Cards and dialogs |
| `--surface-alt` | `#25172A` | Inputs and secondary regions |
| `--surface-strong` | `#39253F` | Selected and elevated elements |
| `--text` | `#F8EFFA` | Main text |
| `--muted` | `#CCBFCE` | Secondary text |
| `--border` | `#5A4060` | Borders and dividers |
| `--primary` | `#C865D3` | Main action and brand colour |
| `--primary-hover` | `#B744C4` | Primary hover and active state |
| `--secondary` | `#455B68` | Secondary action |
| `--secondary-hover` | `#587180` | Secondary hover state |

---

## 4. Colour roles

### Primary

Use the primary colour for distinct primary actions, selected states and confident 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 cool grey-blue controls and supporting actions that keep the palette calm.

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 | `#D38ADC` | `#DEA7E4` |
| Accent 2 | `#758FA0` | `#8CA3B2` |
| Accent 3 | `#C3A06D` | `#D0B07B` |
| Success | `#6C8974` | `#94AF9B` |
| Danger | `#AF5F7B` | `#DA93AB` |

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: #FCF7FD;
  --surface: #FFFFFF;
  --surface-alt: #F8EEFA;
  --text: #33273A;
  --muted: #766A7D;
  --border: #E0CEE4;
  --primary: #B744C4;
  --secondary: #E0E5EB;
}

html[data-theme="dark"] {
  --page: #040105;
  --surface: #180F1A;
  --surface-alt: #25172A;
  --text: #F8EFFA;
  --muted: #CCBFCE;
  --border: #5A4060;
  --primary: #C865D3;
  --secondary: #455B68;
}
```

---

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