# Simple Pink UI Style Guide

A grown-up pink system with warm neutrals and a muted mauve secondary.

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` | `#FFF8FA` | Main page background |
| `--page-accent` | `#F7E8EE` | Subtle page depth |
| `--surface` | `#FFFFFF` | Cards and dialogs |
| `--surface-alt` | `#FCEEF3` | Inputs and secondary regions |
| `--surface-strong` | `#F2DCE5` | Selected and elevated elements |
| `--text` | `#38272F` | Main text |
| `--muted` | `#74656C` | Secondary text |
| `--border` | `#E1CBD4` | Borders and dividers |
| `--primary` | `#D35F87` | Main action and brand colour |
| `--primary-hover` | `#B4476E` | Primary hover and active state |
| `--secondary` | `#E9DFE4` | Secondary action |
| `--secondary-hover` | `#DCCFD6` | Secondary hover state |

---

## 3. Dark mode

| Token | Value | Purpose |
|---|---:|---|
| `--page` | `#050204` | Main dark background |
| `--page-accent` | `#0C0709` | Background depth |
| `--surface` | `#160D12` | Cards and dialogs |
| `--surface-alt` | `#24151C` | Inputs and secondary regions |
| `--surface-strong` | `#35212B` | Selected and elevated elements |
| `--text` | `#F8EFF3` | Main text |
| `--muted` | `#CBBCC3` | Secondary text |
| `--border` | `#513B45` | Borders and dividers |
| `--primary` | `#EE7DA4` | Main action and brand colour |
| `--primary-hover` | `#D45F8B` | Primary hover and active state |
| `--secondary` | `#5A3F4C` | Secondary action |
| `--secondary-hover` | `#715061` | Secondary hover state |

---

## 4. Colour roles

### Primary

Use the primary colour for friendly primary actions and brand emphasis.

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 quiet optional actions and mauve structure.

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 | `#A88FA0` | `#B29BAA` |
| Accent 2 | `#77949A` | `#7E9DA1` |
| Accent 3 | `#C8A575` | `#D0B27F` |
| Success | `#6A8C73` | `#92B09A` |
| Danger | `#A75C68` | `#DD97A1` |

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

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

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

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

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

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

- 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

```css
:root {
  --page: #FFF8FA;
  --surface: #FFFFFF;
  --surface-alt: #FCEEF3;
  --text: #38272F;
  --muted: #74656C;
  --border: #E1CBD4;
  --primary: #D35F87;
  --secondary: #E9DFE4;
}

html[data-theme="dark"] {
  --page: #050204;
  --surface: #160D12;
  --surface-alt: #24151C;
  --text: #F8EFF3;
  --muted: #CBBCC3;
  --border: #513B45;
  --primary: #EE7DA4;
  --secondary: #5A3F4C;
}
```

---

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