387 lines
15 KiB
HTML
387 lines
15 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 Dashboard 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:16ch; 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>Dashboard library</p>
|
|
<h1>ADHD-Friendly Dashboard Variants</h1>
|
|
<p class="intro">
|
|
This overview contains dashboard demos for all colour schemes created so far, including the pure Ivory & Ink version.
|
|
Every dashboard includes sidebar navigation, a top bar, stats cards, progress and activity sections, and a typography sample card.
|
|
</p>
|
|
<section class="grid">
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#111111"></span>
|
|
<span style="background:#E1E1E1"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#000000"></span>
|
|
</div>
|
|
<h2>Black White</h2>
|
|
<p>Modern dashboard demo in the Black White colour system.</p>
|
|
<div class="links">
|
|
<a href="black-white/black-white-dashboard.html">Open dashboard</a>
|
|
<a href="black-white/black-white-login.html">Open login</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:#7E374D"></span>
|
|
<span style="background:#E7D8DE"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#050203"></span>
|
|
</div>
|
|
<h2>Burgundy Rose</h2>
|
|
<p>Modern dashboard demo in the Burgundy Rose colour system.</p>
|
|
<div class="links">
|
|
<a href="burgundy-rose/burgundy-rose-dashboard.html">Open dashboard</a>
|
|
<a href="burgundy-rose/burgundy-rose-login.html">Open login</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:#4D6F98"></span>
|
|
<span style="background:#E2E8EF"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#020509"></span>
|
|
</div>
|
|
<h2>Calm Blue</h2>
|
|
<p>Modern dashboard demo in the Calm Blue colour system.</p>
|
|
<div class="links">
|
|
<a href="calm-blue/calm-blue-dashboard.html">Open dashboard</a>
|
|
<a href="calm-blue/calm-blue-login.html">Open login</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:#C86457"></span>
|
|
<span style="background:#DDE6EA"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#050202"></span>
|
|
</div>
|
|
<h2>Coral Red</h2>
|
|
<p>Modern dashboard demo in the Coral Red colour system.</p>
|
|
<div class="links">
|
|
<a href="coral-red/coral-red-dashboard.html">Open dashboard</a>
|
|
<a href="coral-red/coral-red-login.html">Open login</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:#88769A"></span>
|
|
<span style="background:#DEE6E9"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#030205"></span>
|
|
</div>
|
|
<h2>Dusty Lilac</h2>
|
|
<p>Modern dashboard demo in the Dusty Lilac colour system.</p>
|
|
<div class="links">
|
|
<a href="dusty-lilac/dusty-lilac-dashboard.html">Open dashboard</a>
|
|
<a href="dusty-lilac/dusty-lilac-login.html">Open login</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:#D35F87"></span>
|
|
<span style="background:#E3E6E8"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#020303"></span>
|
|
</div>
|
|
<h2>Graphite Pink</h2>
|
|
<p>Modern dashboard demo in the Graphite Pink colour system.</p>
|
|
<div class="links">
|
|
<a href="graphite-pink/graphite-pink-dashboard.html">Open dashboard</a>
|
|
<a href="graphite-pink/graphite-pink-login.html">Open login</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:#2D2B28"></span>
|
|
<span style="background:#E8E2D8"></span>
|
|
<span style="background:#FFFEFA"></span>
|
|
<span style="background:#020202"></span>
|
|
</div>
|
|
<h2>Ivory & Ink</h2>
|
|
<p>Modern dashboard demo in the Ivory & Ink colour system.</p>
|
|
<div class="links">
|
|
<a href="ivory-ink/ivory-ink-dashboard.html">Open dashboard</a>
|
|
<a href="ivory-ink/ivory-ink-login.html">Open login</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:#9682B4"></span>
|
|
<span style="background:#E7DED3"></span>
|
|
<span style="background:#FFFEFB"></span>
|
|
<span style="background:#020202"></span>
|
|
</div>
|
|
<h2>Ivory Ink Lavender</h2>
|
|
<p>Modern dashboard demo in the Ivory Ink Lavender colour system.</p>
|
|
<div class="links">
|
|
<a href="ivory-ink-lavender/ivory-ink-lavender-dashboard.html">Open dashboard</a>
|
|
<a href="ivory-ink-lavender/ivory-ink-lavender-login.html">Open login</a>
|
|
<a href="ivory-ink-lavender/ivory-ink-lavender-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#D8739A"></span>
|
|
<span style="background:#E7DED3"></span>
|
|
<span style="background:#FFFEFB"></span>
|
|
<span style="background:#020202"></span>
|
|
</div>
|
|
<h2>Ivory Ink Pink</h2>
|
|
<p>Modern dashboard demo in the Ivory Ink Pink colour system.</p>
|
|
<div class="links">
|
|
<a href="ivory-ink-pink/ivory-ink-pink-dashboard.html">Open dashboard</a>
|
|
<a href="ivory-ink-pink/ivory-ink-pink-login.html">Open login</a>
|
|
<a href="ivory-ink-pink/ivory-ink-pink-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:#FFFFFF"></span>
|
|
<span style="background:#010405"></span>
|
|
</div>
|
|
<h2>Mist Blue</h2>
|
|
<p>Modern dashboard demo in the Mist Blue colour system.</p>
|
|
<div class="links">
|
|
<a href="mist-blue/mist-blue-dashboard.html">Open dashboard</a>
|
|
<a href="mist-blue/mist-blue-login.html">Open login</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:#B58A2F"></span>
|
|
<span style="background:#DCE5E9"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#020405"></span>
|
|
</div>
|
|
<h2>Mustard Yellow</h2>
|
|
<p>Modern dashboard demo in the Mustard Yellow colour system.</p>
|
|
<div class="links">
|
|
<a href="mustard-yellow/mustard-yellow-dashboard.html">Open dashboard</a>
|
|
<a href="mustard-yellow/mustard-yellow-login.html">Open login</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:#777B4F"></span>
|
|
<span style="background:#DDE6E2"></span>
|
|
<span style="background:#FFFDF8"></span>
|
|
<span style="background:#030401"></span>
|
|
</div>
|
|
<h2>Olive Oat</h2>
|
|
<p>Modern dashboard demo in the Olive Oat colour system.</p>
|
|
<div class="links">
|
|
<a href="olive-oat/olive-oat-dashboard.html">Open dashboard</a>
|
|
<a href="olive-oat/olive-oat-login.html">Open login</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:#B744C4"></span>
|
|
<span style="background:#E0E5EB"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#040105"></span>
|
|
</div>
|
|
<h2>Orchid Pop</h2>
|
|
<p>Modern dashboard demo in the Orchid Pop colour system.</p>
|
|
<div class="links">
|
|
<a href="orchid-pop/orchid-pop-dashboard.html">Open dashboard</a>
|
|
<a href="orchid-pop/orchid-pop-login.html">Open login</a>
|
|
<a href="orchid-pop/orchid-pop-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:#FFFFFF"></span>
|
|
<span style="background:#020503"></span>
|
|
</div>
|
|
<h2>Sage Green</h2>
|
|
<p>Modern dashboard demo in the Sage Green colour system.</p>
|
|
<div class="links">
|
|
<a href="sage-green/sage-green-dashboard.html">Open dashboard</a>
|
|
<a href="sage-green/sage-green-login.html">Open login</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:#4F8F82"></span>
|
|
<span style="background:#DDE9EE"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#010504"></span>
|
|
</div>
|
|
<h2>Seafoam</h2>
|
|
<p>Modern dashboard demo in the Seafoam colour system.</p>
|
|
<div class="links">
|
|
<a href="seafoam/seafoam-dashboard.html">Open dashboard</a>
|
|
<a href="seafoam/seafoam-login.html">Open login</a>
|
|
<a href="seafoam/seafoam-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="variant-card">
|
|
<div class="swatches">
|
|
<span style="background:#D35F87"></span>
|
|
<span style="background:#E9DFE4"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#050204"></span>
|
|
</div>
|
|
<h2>Simple Pink</h2>
|
|
<p>Modern dashboard demo in the Simple Pink colour system.</p>
|
|
<div class="links">
|
|
<a href="simple-pink/simple-pink-dashboard.html">Open dashboard</a>
|
|
<a href="simple-pink/simple-pink-login.html">Open login</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:#FF8C4F"></span>
|
|
<span style="background:#DDE7EA"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#030201"></span>
|
|
</div>
|
|
<h2>Sunset Apricot</h2>
|
|
<p>Modern dashboard demo in the Sunset Apricot colour system.</p>
|
|
<div class="links">
|
|
<a href="sunset-apricot/sunset-apricot-dashboard.html">Open dashboard</a>
|
|
<a href="sunset-apricot/sunset-apricot-login.html">Open login</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:#238C91"></span>
|
|
<span style="background:#DDE5EE"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#010405"></span>
|
|
</div>
|
|
<h2>Turquoise Blue</h2>
|
|
<p>Modern dashboard demo in the Turquoise Blue colour system.</p>
|
|
<div class="links">
|
|
<a href="turquoise-blue/turquoise-blue-dashboard.html">Open dashboard</a>
|
|
<a href="turquoise-blue/turquoise-blue-login.html">Open login</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:#8B5E3C"></span>
|
|
<span style="background:#DDE5E7"></span>
|
|
<span style="background:#FFFFFF"></span>
|
|
<span style="background:#030201"></span>
|
|
</div>
|
|
<h2>Warm Brown</h2>
|
|
<p>Modern dashboard demo in the Warm Brown colour system.</p>
|
|
<div class="links">
|
|
<a href="warm-brown/warm-brown-dashboard.html">Open dashboard</a>
|
|
<a href="warm-brown/warm-brown-login.html">Open login</a>
|
|
<a href="warm-brown/warm-brown-style-guide.md">Open style guide</a>
|
|
</div>
|
|
</article>
|
|
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|