14 KiB
Ivory & Ink UI Style Guide
A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.
Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications.
This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents.
1. Core rules
- Use neutral backgrounds and 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 colour.
- Keep one main task visible at a time.
- Avoid decorative motion and unexpected layout changes.
- Never communicate status using colour alone.
2. Light mode
| Token | Value | Purpose |
|---|---|---|
--page |
#FAF8F2 |
Main page background |
--page-accent |
#F0ECE2 |
Subtle page depth |
--surface |
#FFFEFA |
Cards and dialogs |
--surface-alt |
#F6F2E9 |
Inputs and secondary regions |
--surface-strong |
#E8E1D4 |
Selected and elevated elements |
--text |
#242321 |
Main text |
--muted |
#6E6A63 |
Secondary text |
--border |
#D8D1C5 |
Borders and dividers |
--primary |
#2D2B28 |
Main action and brand colour |
--primary-hover |
#171614 |
Primary hover and active state |
--secondary |
#E8E2D8 |
Secondary action |
--secondary-hover |
#DAD2C5 |
Secondary hover state |
3. Dark mode
| Token | Value | Purpose |
|---|---|---|
--page |
#020202 |
Main dark background |
--page-accent |
#090806 |
Background depth |
--surface |
#151411 |
Cards and dialogs |
--surface-alt |
#201E1A |
Inputs and secondary regions |
--surface-strong |
#322F28 |
Selected and elevated elements |
--text |
#FAF7EF |
Main text |
--muted |
#C7C1B5 |
Secondary text |
--border |
#4D4941 |
Borders and dividers |
--primary |
#E8E1D4 |
Main action and brand colour |
--primary-hover |
#FFF9ED |
Primary hover and active state |
--secondary |
#4C4840 |
Secondary action |
--secondary-hover |
#625D53 |
Secondary hover state |
4. Colour roles
Primary
Use the primary colour for strong actions and editorial emphasis without saturated colour.
Use it on:
- the main button
- active navigation
- selected controls
- important links
- compact brand marks
The primary colour should answer:
What should I do next?
Secondary
Use the secondary colour for warm neutral controls, filters and supporting actions.
Use it on:
- 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 | #817A70 |
#B6ADA0 |
| Accent 2 | #8C9795 |
#8EA09C |
| Accent 3 | #B49B73 |
#C8AD7C |
| Success | #6F806F |
#9BAE99 |
| Danger | #8A5D54 |
#C89084 |
Use one supporting accent per component whenever possible.
Recommended page balance:
- 70% neutral backgrounds and surfaces
- 20% primary and secondary structure
- 10% supporting accents and status colours
5. Typography
--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 settings:
- body text:
18px - body line-height:
1.6 - paragraphs: no wider than
70ch - labels and buttons:
16–18px - left-aligned body text
- concise headings
- no long all-caps passages
6. Layout and spacing
Use an 8-pixel spacing rhythm.
4px tiny adjustment
8px closely related elements
16px normal component spacing
24px groups inside a section
32px separation between sections
48px+ major page regions
Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows.
7. Components
Primary button
background: var(--primary);
color: var(--on-primary);
Use one obvious primary button per task area.
Secondary button
background: var(--secondary);
color: var(--on-secondary);
Use for optional or reversible actions.
Inputs
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text);
On focus:
border-color: var(--primary);
outline: 3px solid var(--focus);
Validation
- Place the error beside the affected field.
- Explain how to fix the problem.
- Preserve the user’s entered data.
- Use text or an icon as well as colour.
8. ADHD-friendly interaction rules
- Present one main task at a time.
- Reduce optional decisions near the primary action.
- Keep related controls close together.
- Use consistent button placement.
- Avoid unexpected layout movement.
- Respect
prefers-reduced-motion. - Keep notifications short and actionable.
- Use progressive disclosure for advanced options.
9. Accessibility checks
Before release:
- test keyboard navigation
- verify visible focus states
- check text and button contrast
- test at 200% zoom
- connect labels to controls
- test light and dark modes separately
- use semantic HTML before ARIA
10. Quick tokens
:root {
--page: #FAF8F2;
--surface: #FFFEFA;
--surface-alt: #F6F2E9;
--text: #242321;
--muted: #6E6A63;
--border: #D8D1C5;
--primary: #2D2B28;
--secondary: #E8E2D8;
}
html[data-theme="dark"] {
--page: #020202;
--surface: #151411;
--surface-alt: #201E1A;
--text: #FAF7EF;
--muted: #C7C1B5;
--border: #4D4941;
--primary: #E8E1D4;
--secondary: #4C4840;
}
11. Final rule
When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention.
Typography sample card
Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface.
The demos load the fonts 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"
);
Recommended use:# Ivory & Ink UI Style Guide
A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.
Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications.
This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents.
1. Core rules
- Use neutral backgrounds and 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 colour.
- Keep one main task visible at a time.
- Avoid decorative motion and unexpected layout changes.
- Never communicate status using colour alone.
2. Light mode
| Token | Value | Purpose |
|---|---|---|
--page |
#FAF8F2 |
Main page background |
--page-accent |
#F0ECE2 |
Subtle page depth |
--surface |
#FFFEFA |
Cards and dialogs |
--surface-alt |
#F6F2E9 |
Inputs and secondary regions |
--surface-strong |
#E8E1D4 |
Selected and elevated elements |
--text |
#242321 |
Main text |
--muted |
#6E6A63 |
Secondary text |
--border |
#D8D1C5 |
Borders and dividers |
--primary |
#2D2B28 |
Main action and brand colour |
--primary-hover |
#171614 |
Primary hover and active state |
--secondary |
#E8E2D8 |
Secondary action |
--secondary-hover |
#DAD2C5 |
Secondary hover state |
3. Dark mode
| Token | Value | Purpose |
|---|---|---|
--page |
#020202 |
Main dark background |
--page-accent |
#090806 |
Background depth |
--surface |
#151411 |
Cards and dialogs |
--surface-alt |
#201E1A |
Inputs and secondary regions |
--surface-strong |
#322F28 |
Selected and elevated elements |
--text |
#FAF7EF |
Main text |
--muted |
#C7C1B5 |
Secondary text |
--border |
#4D4941 |
Borders and dividers |
--primary |
#E8E1D4 |
Main action and brand colour |
--primary-hover |
#FFF9ED |
Primary hover and active state |
--secondary |
#4C4840 |
Secondary action |
--secondary-hover |
#625D53 |
Secondary hover state |
4. Colour roles
Primary
Use the primary colour for strong actions and editorial emphasis without saturated colour.
Use it on:
- the main button
- active navigation
- selected controls
- important links
- compact brand marks
The primary colour should answer:
What should I do next?
Secondary
Use the secondary colour for warm neutral controls, filters and supporting actions.
Use it on:
- 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 | #817A70 |
#B6ADA0 |
| Accent 2 | #8C9795 |
#8EA09C |
| Accent 3 | #B49B73 |
#C8AD7C |
| Success | #6F806F |
#9BAE99 |
| Danger | #8A5D54 |
#C89084 |
Use one supporting accent per component whenever possible.
Recommended page balance:
- 70% neutral backgrounds and surfaces
- 20% primary and secondary structure
- 10% supporting accents and status colours
5. Typography
--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 settings:
- body text:
18px - body line-height:
1.6 - paragraphs: no wider than
70ch - labels and buttons:
16–18px - left-aligned body text
- concise headings
- no long all-caps passages
6. Layout and spacing
Use an 8-pixel spacing rhythm.
4px tiny adjustment
8px closely related elements
16px normal component spacing
24px groups inside a section
32px separation between sections
48px+ major page regions
Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows.
7. Components
Primary button
background: var(--primary);
color: var(--on-primary);
Use one obvious primary button per task area.
Secondary button
background: var(--secondary);
color: var(--on-secondary);
Use for optional or reversible actions.
Inputs
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text);
On focus:
border-color: var(--primary);
outline: 3px solid var(--focus);
Validation
- Place the error beside the affected field.
- Explain how to fix the problem.
- Preserve the user’s entered data.
- Use text or an icon as well as colour.
8. ADHD-friendly interaction rules
- Present one main task at a time.
- Reduce optional decisions near the primary action.
- Keep related controls close together.
- Use consistent button placement.
- Avoid unexpected layout movement.
- Respect
prefers-reduced-motion. - Keep notifications short and actionable.
- Use progressive disclosure for advanced options.
9. Accessibility checks
Before release:
- test keyboard navigation
- verify visible focus states
- check text and button contrast
- test at 200% zoom
- connect labels to controls
- test light and dark modes separately
- use semantic HTML before ARIA
10. Quick tokens
:root {
--page: #FAF8F2;
--surface: #FFFEFA;
--surface-alt: #F6F2E9;
--text: #242321;
--muted: #6E6A63;
--border: #D8D1C5;
--primary: #2D2B28;
--secondary: #E8E2D8;
}
html[data-theme="dark"] {
--page: #020202;
--surface: #151411;
--surface-alt: #201E1A;
--text: #FAF7EF;
--muted: #C7C1B5;
--border: #4D4941;
--primary: #E8E1D4;
--secondary: #4C4840;
}
11. Final rule
When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention.
Typography sample card
Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface.
The demos load the fonts 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"
);
Recommended use:
- Lexend for the card heading, subheading, labels and badges
- Atkinson Hyperlegible for the paragraph and longer reading text
Example structure:
<article class="sample-card">
<p class="sample-card__eyebrow">Typography sample</p>
<h3>A calm and readable card heading</h3>
<p class="sample-card__subheading">
A concise subheading demonstrates Lexend at a smaller interface size.
</p>
<p class="sample-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>
- Lexend for the card heading, subheading, labels and badges
- Atkinson Hyperlegible for the paragraph and longer reading text
Example structure:
<article class="sample-card">
<p class="sample-card__eyebrow">Typography sample</p>
<h3>A calm and readable card heading</h3>
<p class="sample-card__subheading">
A concise subheading demonstrates Lexend at a smaller interface size.
</p>
<p class="sample-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>