53 lines
2.9 KiB
HTML
53 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<!-- @dsCard group="Brand" name="Accent Colors" subtitle="Gold, red, green, blue, orange, aqua, purple" viewport="700x140" -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body { margin: 0; padding: 16px; background: var(--bg-page); font-family: var(--font-mono); }
|
|
.row { display: flex; gap: 6px; margin-bottom: 10px; }
|
|
.swatch { width: 80px; flex-shrink: 0; }
|
|
.swatch-block { height: 44px; border-radius:6px; margin-bottom: 3px; }
|
|
.swatch span { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); display: block; }
|
|
.group-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
<div class="swatch">
|
|
<div class="swatch-block" style="background:#fabd2f"></div>
|
|
<span>gold-bright</span><span style="color:var(--fg-muted)">#fabd2f</span>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-block" style="background:#d79921"></div>
|
|
<span>gold-dim</span><span style="color:var(--fg-muted)">#d79921</span>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-block" style="background:#b57614"></div>
|
|
<span>gold-muted</span><span style="color:var(--fg-muted)">#b57614</span>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-block" style="background:#ffb000; border: 1px solid #d79921"></div>
|
|
<span>amber</span><span style="color:var(--fg-muted)">#ffb000</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="swatch"><div class="swatch-block" style="background:#fb4934"></div><span>red-bright</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#cc241d"></div><span>red-dim</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#b8bb26"></div><span>green-bright</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#98971a"></div><span>green-dim</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#83a598"></div><span>blue-bright</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#458588"></div><span>blue-dim</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="swatch"><div class="swatch-block" style="background:#fe8019"></div><span>orange-bright</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#d65d0e"></div><span>orange-dim</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#8ec07c"></div><span>aqua-bright</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#689d6a"></div><span>aqua-dim</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#d3869b"></div><span>purple-bright</span></div>
|
|
<div class="swatch"><div class="swatch-block" style="background:#b16286"></div><span>purple-dim</span></div>
|
|
</div>
|
|
</body>
|
|
</html>
|