348 lines
13 KiB
HTML
348 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ADHD-Friendly Colour Variants</title>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@500;600;700&display=swap");
|
|
:root {
|
|
--bg:#F4F6F5;
|
|
--surface:#FFFFFF;
|
|
--text:#273033;
|
|
--muted:#697377;
|
|
--border:#D2D8DA;
|
|
}
|
|
* { box-sizing:border-box; }
|
|
body {
|
|
margin:0;
|
|
padding:clamp(1rem,4vw,3rem);
|
|
font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
|
|
font-size:18px;
|
|
line-height:1.6;
|
|
color:var(--text);
|
|
background:var(--bg);
|
|
}
|
|
main { width:min(1180px,100%); margin:auto; }
|
|
h1,h2 { font-family:"Lexend",system-ui,sans-serif; line-height:1.18; }
|
|
h1 { max-width:18ch; font-size:clamp(2.2rem,5vw,4rem); }
|
|
.intro { max-width:72ch; color:var(--muted); }
|
|
.grid {
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
|
|
gap:1rem;
|
|
margin-top:2rem;
|
|
}
|
|
.variant-card {
|
|
padding:1.2rem;
|
|
background:var(--surface);
|
|
border:1px solid var(--border);
|
|
border-radius:1rem;
|
|
box-shadow:0 12px 30px rgb(20 35 38 / 7%);
|
|
}
|
|
.swatches {
|
|
display:grid;
|
|
grid-template-columns:repeat(4,1fr);
|
|
overflow:hidden;
|
|
height:3.4rem;
|
|
border-radius:.7rem;
|
|
border:1px solid var(--border);
|
|
}
|
|
.swatches span { display:block; }
|
|
.variant-card h2 { margin:1rem 0 .45rem; font-size:1.3rem; }
|
|
.variant-card p { color:var(--muted); }
|
|
.links { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
|
|
a {
|
|
display:inline-block;
|
|
padding:.55rem .75rem;
|
|
color:var(--text);
|
|
background:#EEF1F2;
|
|
border:1px solid var(--border);
|
|
border-radius:.55rem;
|
|
font-family:"Lexend",system-ui,sans-serif;
|
|
font-size:.88rem;
|
|
font-weight:600;
|
|
text-decoration:none;
|
|
}
|
|
a:hover { background:#E2E7E9; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<p>Colour system library</p>
|
|
<h1>ADHD-Friendly UI Colour Variants</h1>
|
|
<p class="intro">
|
|
The expanded library now includes monochrome, warm-neutral and soft pastel systems. Every variant uses the same realistic login layout, Atkinson Hyperlegible for reading,
|
|
Lexend for interface text, complete light and dark modes, restrained accents,
|
|
visible focus states, reduced-motion support, and a typography sample card with
|
|
a heading, subheading and paragraph text.
|
|
</p>
|
|
<section class="grid">
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#D35F87"></span>
|
|
<span style="background:#E9DFE4"></span>
|
|
<span style="background:#A88FA0"></span>
|
|
<span style="background:#050204"></span>
|
|
</div>
|
|
<h2>Simple Pink</h2>
|
|
<p>A grown-up pink system with warm neutrals and a muted mauve secondary.</p>
|
|
<div class="links">
|
|
<a href="simple-pink/simple-pink-login.html">Open login demo</a>
|
|
<a href="simple-pink/simple-pink-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#4D6F98"></span>
|
|
<span style="background:#E2E8EF"></span>
|
|
<span style="background:#7F8FB5"></span>
|
|
<span style="background:#020509"></span>
|
|
</div>
|
|
<h2>Calm Denim Blue</h2>
|
|
<p>A trustworthy denim-blue system for dashboards, administration and focused work.</p>
|
|
<div class="links">
|
|
<a href="calm-blue/calm-blue-login.html">Open login demo</a>
|
|
<a href="calm-blue/calm-blue-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#71866C"></span>
|
|
<span style="background:#DDE6E1"></span>
|
|
<span style="background:#8D9F8B"></span>
|
|
<span style="background:#020503"></span>
|
|
</div>
|
|
<h2>Sage Green</h2>
|
|
<p>A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode.</p>
|
|
<div class="links">
|
|
<a href="sage-green/sage-green-login.html">Open login demo</a>
|
|
<a href="sage-green/sage-green-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#C86457"></span>
|
|
<span style="background:#DDE6EA"></span>
|
|
<span style="background:#B17C72"></span>
|
|
<span style="background:#050202"></span>
|
|
</div>
|
|
<h2>Coral Red</h2>
|
|
<p>A social, warm coral system balanced by slate blue so it stays calm and readable.</p>
|
|
<div class="links">
|
|
<a href="coral-red/coral-red-login.html">Open login demo</a>
|
|
<a href="coral-red/coral-red-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#B58A2F"></span>
|
|
<span style="background:#DCE5E9"></span>
|
|
<span style="background:#C19D4E"></span>
|
|
<span style="background:#020405"></span>
|
|
</div>
|
|
<h2>Mustard Yellow</h2>
|
|
<p>An editorial mustard system balanced by deep blue-grey for usable contrast.</p>
|
|
<div class="links">
|
|
<a href="mustard-yellow/mustard-yellow-login.html">Open login demo</a>
|
|
<a href="mustard-yellow/mustard-yellow-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#238C91"></span>
|
|
<span style="background:#DDE5EE"></span>
|
|
<span style="background:#5CA5A6"></span>
|
|
<span style="background:#010405"></span>
|
|
</div>
|
|
<h2>Turquoise Blue</h2>
|
|
<p>A fresh turquoise system anchored by deep navy and restrained warm accents.</p>
|
|
<div class="links">
|
|
<a href="turquoise-blue/turquoise-blue-login.html">Open login demo</a>
|
|
<a href="turquoise-blue/turquoise-blue-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#7E374D"></span>
|
|
<span style="background:#E7D8DE"></span>
|
|
<span style="background:#B07D8D"></span>
|
|
<span style="background:#050203"></span>
|
|
</div>
|
|
<h2>Burgundy & Dusty Rose</h2>
|
|
<p>A mature burgundy system softened by dusty rose and warm neutral surfaces.</p>
|
|
<div class="links">
|
|
<a href="burgundy-rose/burgundy-rose-login.html">Open login demo</a>
|
|
<a href="burgundy-rose/burgundy-rose-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#D35F87"></span>
|
|
<span style="background:#E3E6E8"></span>
|
|
<span style="background:#7D858A"></span>
|
|
<span style="background:#020303"></span>
|
|
</div>
|
|
<h2>Graphite + Pink Accent</h2>
|
|
<p>An ultra-calm graphite system with one simple pink accent for primary actions.</p>
|
|
<div class="links">
|
|
<a href="graphite-pink/graphite-pink-login.html">Open login demo</a>
|
|
<a href="graphite-pink/graphite-pink-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#8B5E3C"></span>
|
|
<span style="background:#DDE5E7"></span>
|
|
<span style="background:#A47758"></span>
|
|
<span style="background:#030201"></span>
|
|
</div>
|
|
<h2>Warm Brown</h2>
|
|
<p>A grounded brown system with clay warmth and muted blue-grey balance.</p>
|
|
<div class="links">
|
|
<a href="warm-brown/warm-brown-login.html">Open login demo</a>
|
|
<a href="warm-brown/warm-brown-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#111111"></span>
|
|
<span style="background:#E1E1E1"></span>
|
|
<span style="background:#777777"></span>
|
|
<span style="background:#000000"></span>
|
|
</div>
|
|
<h2>Black & White</h2>
|
|
<p>A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable.</p>
|
|
<div class="links">
|
|
<a href="black-white/black-white-login.html">Open login demo</a>
|
|
<a href="black-white/black-white-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#2D2B28"></span>
|
|
<span style="background:#E8E2D8"></span>
|
|
<span style="background:#817A70"></span>
|
|
<span style="background:#020202"></span>
|
|
</div>
|
|
<h2>Ivory & Ink</h2>
|
|
<p>A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.</p>
|
|
<div class="links">
|
|
<a href="ivory-ink/ivory-ink-login.html">Open login demo</a>
|
|
<a href="ivory-ink/ivory-ink-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#4F8F82"></span>
|
|
<span style="background:#DDE9EE"></span>
|
|
<span style="background:#82ADA2"></span>
|
|
<span style="background:#010504"></span>
|
|
</div>
|
|
<h2>Seafoam</h2>
|
|
<p>A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise.</p>
|
|
<div class="links">
|
|
<a href="seafoam/seafoam-login.html">Open login demo</a>
|
|
<a href="seafoam/seafoam-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#88769A"></span>
|
|
<span style="background:#DEE6E9"></span>
|
|
<span style="background:#A594B6"></span>
|
|
<span style="background:#030205"></span>
|
|
</div>
|
|
<h2>Dusty Lilac</h2>
|
|
<p>A quiet lilac system with slate support, separated from the brighter purple and pink families.</p>
|
|
<div class="links">
|
|
<a href="dusty-lilac/dusty-lilac-login.html">Open login demo</a>
|
|
<a href="dusty-lilac/dusty-lilac-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#63889A"></span>
|
|
<span style="background:#E3E4ED"></span>
|
|
<span style="background:#85A3B0"></span>
|
|
<span style="background:#010405"></span>
|
|
</div>
|
|
<h2>Mist Blue</h2>
|
|
<p>A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity.</p>
|
|
<div class="links">
|
|
<a href="mist-blue/mist-blue-login.html">Open login demo</a>
|
|
<a href="mist-blue/mist-blue-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#777B4F"></span>
|
|
<span style="background:#DDE6E2"></span>
|
|
<span style="background:#96966D"></span>
|
|
<span style="background:#030401"></span>
|
|
</div>
|
|
<h2>Olive & Oat</h2>
|
|
<p>A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown.</p>
|
|
<div class="links">
|
|
<a href="olive-oat/olive-oat-login.html">Open login demo</a>
|
|
<a href="olive-oat/olive-oat-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#FF8C4F"></span>
|
|
<span style="background:#DDE7EA"></span>
|
|
<span style="background:#FFB285"></span>
|
|
<span style="background:#030201"></span>
|
|
</div>
|
|
<h2>Sunset Apricot</h2>
|
|
<p>A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces.</p>
|
|
<div class="links">
|
|
<a href="sunset-apricot/sunset-apricot-login.html">Open login demo</a>
|
|
<a href="sunset-apricot/sunset-apricot-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#B744C4"></span>
|
|
<span style="background:#E0E5EB"></span>
|
|
<span style="background:#D38ADC"></span>
|
|
<span style="background:#040105"></span>
|
|
</div>
|
|
<h2>Orchid Pop</h2>
|
|
<p>A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable.</p>
|
|
<div class="links">
|
|
<a href="orchid-pop/orchid-pop-login.html">Open login demo</a>
|
|
<a href="orchid-pop/orchid-pop-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|