# Ivory & Ink + Pink UI Style Guide

A warm editorial UI system based on the Ivory & Ink palette, extended with a refined pink accent.

The foundation remains calm: ivory surfaces, ink text, taupe-neutral structure and a very restrained pink used for the primary action. The result is warmer and more personal than pure monochrome, but still clean, grown-up and readable.

---

## 1. Core idea

Use **Ivory & Ink** as the foundation and **pink** as the signal.

That means:

- the page and cards stay mostly neutral
- pink identifies the next important action
- grey-green and sand provide soft balance
- the interface should feel editorial, calm and slightly warm

Pink should not take over the whole page. It should guide attention.

---

## 2. Light mode tokens

| Token | Value | Purpose |
|---|---:|---|
| `--page` | `#FAF8F3` | Main page background |
| `--page-accent` | `#F2ECE4` | Subtle background depth |
| `--surface` | `#FFFEFB` | Cards and dialogs |
| `--surface-alt` | `#F8F1EA` | Inputs and secondary sections |
| `--surface-strong` | `#EDE2D7` | Selected and raised surfaces |
| `--text` | `#262320` | Main text |
| `--muted` | `#6F6963` | Secondary text |
| `--border` | `#DCCFC4` | Borders and dividers |
| `--primary` | `#D8739A` | Pink primary action |
| `--primary-hover` | `#BC5A80` | Primary hover state |
| `--secondary` | `#E7DED3` | Neutral secondary actions |
| `--secondary-hover` | `#D9CEC1` | Secondary hover state |

---

## 3. Dark mode tokens

| Token | Value | Purpose |
|---|---:|---|
| `--page` | `#020202` | Main dark background |
| `--page-accent` | `#090705` | Background depth |
| `--surface` | `#171411` | Main cards and dialogs |
| `--surface-alt` | `#231D1A` | Inputs and secondary sections |
| `--surface-strong` | `#35302B` | Selected and raised surfaces |
| `--text` | `#FAF6F0` | Main text |
| `--muted` | `#C9C1B7` | Secondary text |
| `--border` | `#554D46` | Borders and dividers |
| `--primary` | `#EB97B7` | Pink primary action |
| `--primary-hover` | `#D97DA1` | Primary hover state |
| `--secondary` | `#4F4840` | Neutral secondary actions |
| `--secondary-hover` | `#655D54` | Secondary hover state |

---

## 4. Supporting accents

| Role | Light | Dark | Use |
|---|---:|---:|---|
| Soft pink | `#E8A9C2` | `#F0BFD2` | Highlights and brand personality |
| Grey-green | `#8A9795` | `#92A19D` | Cool balance and support |
| Sand | `#C8A97A` | `#CFB27F` | Warm guidance and emphasis |
| Danger | `#B96B74` | `#DA98A0` | Errors and destructive action |
| Success | `#6E816E` | `#9CAE99` | Positive confirmation |

Recommended balance:

- **70%** ivory / ink / neutral surfaces
- **20%** pink and neutral secondary structure
- **10%** supporting accents

---

## 5. Usage rules

### Use pink for:

- the main button
- active links
- selected controls
- one compact accent line
- small brand highlights

### Do not use pink for:

- large page backgrounds
- long paragraphs
- every badge
- multiple competing cards
- error messaging if a danger colour already exists

### Use the neutral secondary for:

- secondary buttons
- optional actions
- toolbars
- filters
- supporting cards

### Use grey-green and sand for:

- quiet icon accents
- status support
- visual balance
- warmth without more pink

---

## 6. Typography

Fonts are loaded 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"
);
```

Use:

- **Lexend** for headings, labels, buttons and subheadings
- **Atkinson Hyperlegible** for paragraph text and longer reading content

Recommended sizes:

- body: `18px`
- labels: `16–17px`
- buttons: `16–18px`
- subheadings: `15–17px`
- card heading: `20–24px`

---

## 7. Typography sample card

The demo includes a sample content card so you can test the fonts in a more editorial surface.

```html
<article class="sample-card">
  <p class="sample-card__eyebrow">Typography sample</p>
  <h3>A warm editorial card heading</h3>
  <p class="sample-card__subheading">
    A concise subheading demonstrates Lexend in a refined ivory-and-pink interface.
  </p>
  <p class="sample-card__body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</article>
```

Recommended use:

- eyebrow + heading + subheading in **Lexend**
- paragraph in **Atkinson Hyperlegible**

---

## 8. ADHD-friendly notes

- Keep the pink limited to primary focus points.
- Let the ivory background do most of the visual calming.
- Use strong spacing rather than extra decoration.
- Preserve clear contrast between background, surface and action.
- Avoid placing too many coloured chips near the main button.
- Keep one obvious next step visible.

---

## 9. Final rule

If the design starts to feel too sweet or decorative, remove pink rather than adding more neutral styling.

The warm neutral base should carry the interface. Pink should simply guide attention.
