321 lines
7.3 KiB
Markdown
321 lines
7.3 KiB
Markdown
# Warm Brown UI Style Guide
|
||
|
||
A grounded brown system with clay warmth and muted blue-grey balance.
|
||
|
||
This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents.
|
||
|
||
---
|
||
|
||
## 1. Core principles
|
||
|
||
- Use neutral 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 more colour.
|
||
- Present one main task at a time.
|
||
- Avoid animation unless it communicates useful state.
|
||
- Never use colour as the only status signal.
|
||
|
||
---
|
||
|
||
## 2. Light mode
|
||
|
||
| Token | Value | Purpose |
|
||
|---|---:|---|
|
||
| `--page` | `#FAF7F3` | Main page background |
|
||
| `--page-accent` | `#EFE6DD` | Subtle page depth |
|
||
| `--surface` | `#FFFFFF` | Cards and dialogs |
|
||
| `--surface-alt` | `#F6EFE8` | Inputs and secondary regions |
|
||
| `--surface-strong` | `#E8D9CC` | Selected and elevated elements |
|
||
| `--text` | `#392E28` | Main text |
|
||
| `--muted` | `#756961` | Secondary text |
|
||
| `--border` | `#DCCFC5` | Borders and dividers |
|
||
| `--primary` | `#8B5E3C` | Main action and brand colour |
|
||
| `--primary-hover` | `#6D452A` | Primary hover and active state |
|
||
| `--secondary` | `#DDE5E7` | Secondary action |
|
||
| `--secondary-hover` | `#CCD9DC` | Secondary hover state |
|
||
|
||
---
|
||
|
||
## 3. Dark mode
|
||
|
||
| Token | Value | Purpose |
|
||
|---|---:|---|
|
||
| `--page` | `#030201` | Main dark background |
|
||
| `--page-accent` | `#0A0705` | Background depth |
|
||
| `--surface` | `#17110D` | Cards and dialogs |
|
||
| `--surface-alt` | `#251A14` | Inputs and secondary regions |
|
||
| `--surface-strong` | `#39291F` | Selected and elevated elements |
|
||
| `--text` | `#F7F1EC` | Main text |
|
||
| `--muted` | `#C7BBB2` | Secondary text |
|
||
| `--border` | `#59483D` | Borders and dividers |
|
||
| `--primary` | `#B77A4D` | Main action and brand colour |
|
||
| `--primary-hover` | `#975F38` | Primary hover and active state |
|
||
| `--secondary` | `#3D555B` | Secondary action |
|
||
| `--secondary-hover` | `#4E6971` | Secondary hover state |
|
||
|
||
---
|
||
|
||
## 4. Colour roles
|
||
|
||
### Primary
|
||
|
||
Use the primary colour for grounded primary actions, selected states and brand marks.
|
||
|
||
Good uses:
|
||
|
||
- main button
|
||
- active navigation
|
||
- selected controls
|
||
- important links
|
||
- compact brand details
|
||
|
||
Do not use it on every surface. The primary colour should answer:
|
||
|
||
> What should I do next?
|
||
|
||
### Secondary
|
||
|
||
Use the secondary colour for cool blue-grey balance and supporting controls.
|
||
|
||
Good uses:
|
||
|
||
- 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 | `#A47758` | `#C08E67` |
|
||
| Accent 2 | `#6E8A8F` | `#7E9EA3` |
|
||
| Accent 3 | `#C49E69` | `#D2AF78` |
|
||
| Success | `#6D896F` | `#92AF96` |
|
||
| Danger | `#A65F4F` | `#D58D7C` |
|
||
|
||
Use only one supporting accent inside a component unless there is a strong reason to use more.
|
||
|
||
A useful page-level balance is:
|
||
|
||
- **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 sizes:
|
||
|
||
| Element | Size |
|
||
|---|---:|
|
||
| Body text | `18px` |
|
||
| Small text | `14–15px` |
|
||
| Form labels | `16–17px` |
|
||
| Buttons | `16–18px` |
|
||
| H1 | `42–64px` |
|
||
| H2 | `28–38px` |
|
||
| H3 | `21–26px` |
|
||
|
||
Reading rules:
|
||
|
||
- body line-height around `1.6`
|
||
- paragraphs below roughly `70ch`
|
||
- left-aligned body text
|
||
- no long all-caps passages
|
||
- bold used selectively
|
||
- short, concrete headings
|
||
|
||
---
|
||
|
||
## 6. Layout and spacing
|
||
|
||
Use an 8-pixel 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
|
||
```
|
||
|
||
Recommended widths:
|
||
|
||
- forms: `400–480px`
|
||
- reading content: `680–760px`
|
||
- application layouts: `1040–1200px`
|
||
|
||
Keep one clear purpose per card. Avoid deeply nested cards and heavy borders.
|
||
|
||
---
|
||
|
||
## 7. Components
|
||
|
||
### Primary button
|
||
|
||
```css
|
||
background: var(--primary);
|
||
color: var(--on-primary);
|
||
```
|
||
|
||
Use one obvious primary action 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
|
||
|
||
- Put errors beside the affected field.
|
||
- Explain how to fix the problem.
|
||
- Preserve entered information.
|
||
- Use text or icons as well as colour.
|
||
- Reserve the danger colour for genuine errors or destructive actions.
|
||
|
||
---
|
||
|
||
## 8. ADHD-friendly interaction rules
|
||
|
||
- Present one main task at a time.
|
||
- Reduce optional decisions near the primary button.
|
||
- Keep related controls physically close.
|
||
- Use consistent action placement.
|
||
- Preserve entered data after errors.
|
||
- Avoid unexpected layout movement.
|
||
- Respect `prefers-reduced-motion`.
|
||
- Keep notifications short and actionable.
|
||
- Use progressive disclosure for advanced options.
|
||
- Do not hide critical actions behind unlabeled icons.
|
||
|
||
---
|
||
|
||
## 9. Accessibility checks
|
||
|
||
Before release:
|
||
|
||
- Test keyboard navigation.
|
||
- Verify visible focus states.
|
||
- Check text and button contrast.
|
||
- Test at 200% zoom.
|
||
- Connect labels to form controls.
|
||
- Use semantic HTML before ARIA.
|
||
- Test light and dark modes separately.
|
||
- Check error messages with assistive technology when possible.
|
||
|
||
---
|
||
|
||
## 10. Quick tokens
|
||
|
||
```css
|
||
:root {
|
||
--page: #FAF7F3;
|
||
--surface: #FFFFFF;
|
||
--surface-alt: #F6EFE8;
|
||
--text: #392E28;
|
||
--muted: #756961;
|
||
--border: #DCCFC5;
|
||
--primary: #8B5E3C;
|
||
--secondary: #DDE5E7;
|
||
}
|
||
|
||
html[data-theme="dark"] {
|
||
--page: #030201;
|
||
--surface: #17110D;
|
||
--surface-alt: #251A14;
|
||
--text: #F7F1EC;
|
||
--muted: #C7BBB2;
|
||
--border: #59483D;
|
||
--primary: #B77A4D;
|
||
--secondary: #3D555B;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 11. Final rule
|
||
|
||
When the design starts to feel busy, remove emphasis before adding another colour.
|
||
|
||
The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable.
|
||
|
||
---
|
||
|
||
## 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>
|
||
```
|
||
|