598 lines
14 KiB
Markdown
598 lines
14 KiB
Markdown
# 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
|
||
|
||
```css
|
||
--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.
|
||
|
||
```text
|
||
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
|
||
|
||
```css
|
||
background: var(--primary);
|
||
color: var(--on-primary);
|
||
```
|
||
|
||
Use one obvious primary button per task area.
|
||
|
||
### Secondary button
|
||
|
||
```css
|
||
background: var(--secondary);
|
||
color: var(--on-secondary);
|
||
```
|
||
|
||
Use for optional or reversible actions.
|
||
|
||
### Inputs
|
||
|
||
```css
|
||
background: var(--surface-alt);
|
||
border: 1px solid var(--border);
|
||
color: var(--text);
|
||
```
|
||
|
||
On focus:
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
: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:
|
||
|
||
```css
|
||
@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
|
||
|
||
```css
|
||
--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.
|
||
|
||
```text
|
||
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
|
||
|
||
```css
|
||
background: var(--primary);
|
||
color: var(--on-primary);
|
||
```
|
||
|
||
Use one obvious primary button per task area.
|
||
|
||
### Secondary button
|
||
|
||
```css
|
||
background: var(--secondary);
|
||
color: var(--on-secondary);
|
||
```
|
||
|
||
Use for optional or reversible actions.
|
||
|
||
### Inputs
|
||
|
||
```css
|
||
background: var(--surface-alt);
|
||
border: 1px solid var(--border);
|
||
color: var(--text);
|
||
```
|
||
|
||
On focus:
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
: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:
|
||
|
||
```css
|
||
@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:
|
||
|
||
```html
|
||
<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:
|
||
|
||
```html
|
||
<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>
|
||
```
|