179 lines
4.9 KiB
Markdown
179 lines
4.9 KiB
Markdown
# Ivory & Ink + Lavender UI Style Guide
|
||
|
||
A warm editorial UI system based on the Ivory & Ink palette, extended with a refined lavender accent.
|
||
|
||
The foundation remains calm: ivory surfaces, ink text, taupe-neutral structure and a restrained lavender used for the primary action. The result is elegant, soft and readable without becoming overly decorative.
|
||
|
||
---
|
||
|
||
## 1. Core idea
|
||
|
||
Use **Ivory & Ink** as the foundation and **lavender** as the signal.
|
||
|
||
That means:
|
||
|
||
- the page and cards stay mostly neutral
|
||
- lavender identifies the next important action
|
||
- grey-green and sand provide soft balance
|
||
- the interface should feel editorial, calm and slightly elegant
|
||
|
||
Lavender 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` | `#9682B4` | Lavender primary action |
|
||
| `--primary-hover` | `#7A6697` | 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` | `#B8A7D2` | Lavender primary action |
|
||
| `--primary-hover` | `#A08FC0` | Primary hover state |
|
||
| `--secondary` | `#4F4840` | Neutral secondary actions |
|
||
| `--secondary-hover` | `#655D54` | Secondary hover state |
|
||
|
||
---
|
||
|
||
## 4. Supporting accents
|
||
|
||
| Role | Light | Dark | Use |
|
||
|---|---:|---:|---|
|
||
| Soft lavender | `#C7B8DE` | `#D9CDEA` | Highlights and 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%** lavender and neutral secondary structure
|
||
- **10%** supporting accents
|
||
|
||
---
|
||
|
||
## 5. Usage rules
|
||
|
||
### Use lavender for:
|
||
|
||
- the main button
|
||
- active links
|
||
- selected controls
|
||
- one compact accent line
|
||
- small brand highlights
|
||
|
||
### Do not use lavender 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 lavender
|
||
|
||
---
|
||
|
||
## 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 calm editorial card heading</h3>
|
||
<p class="sample-card__subheading">
|
||
A concise subheading demonstrates Lexend in a refined ivory-and-lavender 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 lavender 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 decorative, remove lavender rather than adding more neutral styling.
|
||
|
||
The warm neutral base should carry the interface. Lavender should simply guide attention.
|