219 lines
8 KiB
HTML
219 lines
8 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">
|
|
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 and reduced-motion support.
|
|
</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>
|
|
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|