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