4.5 KiB
4.5 KiB
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:
- Smoky mauve for the emotional base and most of the personality
- Teal for primary actions and selected states
- Red only for alerts, destructive actions and very small accents
- 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:
@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
<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.