162 lines
4.5 KiB
Markdown
162 lines
4.5 KiB
Markdown
# Smoky Teal Signal UI Style Guide
|
||
|
||
This palette is based on the following four colours and their approximate visual weights:
|
||
|
||
- `#7A676F` — **71.28%** — dominant smoky mauve / neutral foundation
|
||
- `#10B3BB` — **23.59%** — teal action and emphasis
|
||
- `#E51A22` — **3.77%** — strong signal / alert accent
|
||
- `#FFFEFE` — **0.76%** — clean light highlight
|
||
|
||
The system is designed to feel calm, structured and modern, while still providing clear focus and alert states.
|
||
|
||
---
|
||
|
||
## 1. Core design logic
|
||
|
||
Use the colours in this order of importance:
|
||
|
||
1. **Smoky mauve** for the emotional base and most of the personality
|
||
2. **Teal** for primary actions and selected states
|
||
3. **Red** only for alerts, destructive actions and very small accents
|
||
4. **White / off-white** for highlight surfaces and clean breathing room
|
||
|
||
This keeps the design ADHD-friendly by avoiding too many competing high-energy colours.
|
||
|
||
---
|
||
|
||
## 2. Light mode tokens
|
||
|
||
| Token | Value | Purpose |
|
||
|---|---:|---|
|
||
| `--page` | `#F6F2F4` | Main page background |
|
||
| `--page-accent` | `#ECE5E8` | Background depth |
|
||
| `--surface` | `#FFFEFE` | Cards and dialogs |
|
||
| `--surface-alt` | `#F2ECEF` | Inputs and secondary sections |
|
||
| `--surface-strong` | `#E1D7DC` | Selected surfaces |
|
||
| `--text` | `#2F2529` | Main text |
|
||
| `--muted` | `#6E5C63` | Secondary text |
|
||
| `--border` | `#D4C8CD` | Borders and dividers |
|
||
| `--primary` | `#10B3BB` | Main primary action |
|
||
| `--primary-hover` | `#0B99A0` | Primary hover |
|
||
| `--secondary` | `#E4DCE0` | Neutral secondary action |
|
||
| `--secondary-hover` | `#D8CDD2` | Secondary hover |
|
||
|
||
---
|
||
|
||
## 3. Dark mode tokens
|
||
|
||
| Token | Value | Purpose |
|
||
|---|---:|---|
|
||
| `--page` | `#0F0C0D` | Main background |
|
||
| `--page-accent` | `#171214` | Dark depth |
|
||
| `--surface` | `#1B1618` | Main card surface |
|
||
| `--surface-alt` | `#272023` | Inputs and support areas |
|
||
| `--surface-strong` | `#383034` | Selected areas |
|
||
| `--text` | `#FFFDFD` | Main text |
|
||
| `--muted` | `#CBBEC4` | Secondary text |
|
||
| `--border` | `#51464B` | Borders |
|
||
| `--primary` | `#22C2CA` | Main teal action |
|
||
| `--primary-hover` | `#10B3BB` | Hover teal |
|
||
| `--secondary` | `#433A3E` | Neutral secondary action |
|
||
| `--secondary-hover` | `#584D52` | Secondary hover |
|
||
|
||
---
|
||
|
||
## 4. Supporting colours
|
||
|
||
| Role | Light | Dark | Use |
|
||
|---|---:|---:|---|
|
||
| Smoky accent | `#7A676F` | `#9B8A91` | visual identity and soft structure |
|
||
| Teal support | `#10B3BB` | `#22C2CA` | action and focused guidance |
|
||
| Signal red | `#E51A22` | `#F06066` | alerts and destructive action |
|
||
| Success | `#5B827F` | `#8CB1AE` | confirmation and positive states |
|
||
|
||
---
|
||
|
||
## 5. Colour usage rules
|
||
|
||
### Use smoky mauve for:
|
||
- large backgrounds
|
||
- structural surfaces
|
||
- chips, panels and neutral framing
|
||
- establishing mood
|
||
|
||
### Use teal for:
|
||
- primary buttons
|
||
- active links
|
||
- selected controls
|
||
- focused components
|
||
- positive forward motion
|
||
|
||
### Use red only for:
|
||
- danger
|
||
- errors
|
||
- critical status
|
||
- highly limited emphasis
|
||
|
||
Do **not** use red as a second primary colour.
|
||
|
||
### Use white / off-white for:
|
||
- cards
|
||
- breathing room
|
||
- clean contrast
|
||
- clarity inside dense layouts
|
||
|
||
---
|
||
|
||
## 6. ADHD-friendly guidance
|
||
|
||
- Let the mauve foundation do most of the visual work.
|
||
- Use teal to show the next important action.
|
||
- Keep red scarce so it remains meaningful.
|
||
- Avoid placing teal and red together unless the component truly needs both.
|
||
- Prefer calm spacing and clear layout over extra decoration.
|
||
- Keep one visual priority per region.
|
||
|
||
---
|
||
|
||
## 7. Typography
|
||
|
||
Fonts are loaded 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"
|
||
);
|
||
```
|
||
|
||
Use:
|
||
|
||
- **Lexend** for headings, labels, buttons and subheadings
|
||
- **Atkinson Hyperlegible** for paragraph text and longer reading
|
||
|
||
Recommended sizes:
|
||
|
||
- body: `18px`
|
||
- labels: `16–17px`
|
||
- buttons: `16–18px`
|
||
- subheadings: `15–17px`
|
||
- card heading: `20–24px`
|
||
|
||
---
|
||
|
||
## 8. Typography sample card
|
||
|
||
```html
|
||
<article class="sample-card">
|
||
<p class="sample-card__eyebrow">Typography sample</p>
|
||
<h3>A calm but high-clarity card heading</h3>
|
||
<p class="sample-card__subheading">
|
||
A concise subheading demonstrates Lexend with the smoky neutral and teal palette.
|
||
</p>
|
||
<p class="sample-card__body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
</p>
|
||
</article>
|
||
```
|
||
|
||
---
|
||
|
||
## 9. Final rule
|
||
|
||
If the interface starts to feel noisy, reduce red first and then simplify teal accents. The smoky neutral base should remain the calm dominant layer.
|