4.9 KiB
4.9 KiB
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:
@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.
<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.