298 lines
No EOL
14 KiB
HTML
298 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Deep Petrol Light Full Palette</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--color-bg: #f4f6f5;
|
|
--color-surface: #ffffff;
|
|
--color-surface-2: #edf3f2;
|
|
--color-surface-3: #dde7e5;
|
|
--color-surface-4: #cfdcda;
|
|
--color-border: #bfd0cd;
|
|
--color-divider: #d6e0de;
|
|
|
|
--color-text: #19353a;
|
|
--color-text-muted: #4b666a;
|
|
--color-text-faint: #6f8689;
|
|
|
|
--color-primary: #0f5c63;
|
|
--color-primary-soft: #e2eef0;
|
|
--color-primary-strong: #0b4b51;
|
|
--color-on-primary: #f7fbfb;
|
|
|
|
--color-secondary: #327087;
|
|
--color-secondary-soft: #e1edf2;
|
|
--color-on-secondary: #f7fbfb;
|
|
|
|
--color-accent: #c46f34;
|
|
--color-accent-soft: #f7e5d8;
|
|
--color-accent-strong: #9a5328;
|
|
--color-on-accent: #201510;
|
|
|
|
--color-support: #7d4bb3;
|
|
--color-support-soft: #efe6fa;
|
|
--color-on-support: #1e102f;
|
|
|
|
--color-link: #0b6d7c;
|
|
|
|
--color-success: #2f7d57;
|
|
--color-success-soft: #e1f1e7;
|
|
--color-warning: #9a6a12;
|
|
--color-warning-soft: #f6ecd2;
|
|
--color-danger: #9b3f54;
|
|
--color-danger-soft: #f4dde2;
|
|
--color-info: #3c6ca8;
|
|
--color-info-soft: #e0ebf8;
|
|
|
|
--hero-a: rgba(15,92,99,0.08);
|
|
--hero-b: rgba(196,111,52,0.10);
|
|
}
|
|
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
|
|
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
|
|
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
|
|
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
|
|
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.2rem);
|
|
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
|
|
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
|
|
--radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem;
|
|
--font-body: 'Inter', system-ui, sans-serif;
|
|
--font-display: 'Instrument Serif', Georgia, serif;
|
|
--shadow-sm: 0 2px 8px rgba(14, 37, 43, 0.08);
|
|
--shadow-md: 0 16px 38px rgba(14, 37, 43, 0.12);
|
|
--transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: 1.6;
|
|
color: var(--color-text);
|
|
background:
|
|
radial-gradient(circle at top left, var(--hero-a), transparent 30%),
|
|
radial-gradient(circle at top right, var(--hero-b), transparent 28%),
|
|
var(--color-bg);
|
|
transition: background var(--transition), color var(--transition);
|
|
}
|
|
a { color: var(--color-link); }
|
|
img, svg { max-width: 100%; display: block; }
|
|
.wrap { max-width: 1180px; margin: 0 auto; padding: var(--space-8); }
|
|
.topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); }
|
|
.brand { display: flex; align-items: center; gap: var(--space-3); }
|
|
.logo {
|
|
width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: var(--color-on-primary); box-shadow: var(--shadow-sm);
|
|
}
|
|
.brand strong { display:block; font-size: var(--text-sm); }
|
|
.brand span { font-size: var(--text-xs); color: var(--color-text-muted); }
|
|
.hero {
|
|
display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-6); align-items: stretch;
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
.panel {
|
|
background: color-mix(in srgb, var(--color-surface) 88%, transparent);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-8);
|
|
box-shadow: var(--shadow-md);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.eyebrow {
|
|
display: inline-block; margin-bottom: var(--space-4); padding: 0.35rem 0.7rem; border-radius: 999px;
|
|
background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
|
|
}
|
|
h1, h2, h3 { margin: 0 0 var(--space-4); line-height: 1.1; }
|
|
h1 { font-family: var(--font-display); font-size: var(--text-2xl); max-width: 12ch; }
|
|
h2 { font-size: var(--text-xl); }
|
|
h3 { font-size: var(--text-lg); }
|
|
p { margin: 0 0 var(--space-4); color: var(--color-text-muted); max-width: 68ch; }
|
|
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
|
|
.btn {
|
|
font: inherit; border-radius: 999px; padding: 0.9rem 1.1rem; border: 1px solid transparent; cursor: pointer;
|
|
transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
|
|
}
|
|
.btn:hover { transform: translateY(-1px); }
|
|
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
|
|
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
|
|
.btn-accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
|
|
.btn-support { background: var(--color-support-soft); color: var(--color-support); border-color: transparent; }
|
|
.grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-bottom: var(--space-8); }
|
|
.card {
|
|
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
|
|
}
|
|
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
|
.swatch { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
|
|
.tone { height: 96px; }
|
|
.meta { padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
|
|
.meta strong { display: block; color: var(--color-text); }
|
|
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
|
|
label { font-size: var(--text-sm); color: var(--color-text); }
|
|
input, textarea, select {
|
|
width: 100%; padding: 0.95rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);
|
|
background: var(--color-surface-2); color: var(--color-text); font: inherit;
|
|
}
|
|
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
|
|
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible {
|
|
outline: 3px solid color-mix(in srgb, var(--color-accent) 65%, white 35%);
|
|
outline-offset: 2px;
|
|
}
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { text-align: left; padding: 0.9rem 0.75rem; border-bottom: 1px solid var(--color-divider); }
|
|
th { color: var(--color-text); font-size: var(--text-sm); }
|
|
td { color: var(--color-text-muted); }
|
|
.status { display: flex; gap: var(--space-3); flex-wrap: wrap; }
|
|
.pill { padding: 0.45rem 0.8rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; }
|
|
.ok { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }
|
|
.warn { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
|
|
.bad { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger); }
|
|
.info { background: color-mix(in srgb, var(--color-info) 16%, transparent); color: var(--color-info); }
|
|
.mini-list { display: grid; gap: var(--space-3); }
|
|
.mini-item { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-3); align-items: start; }
|
|
.dot { width: 14px; height: 14px; border-radius: 999px; margin-top: 0.3rem; }
|
|
.footer { color: var(--color-text-faint); font-size: var(--text-sm); padding-bottom: var(--space-8); }
|
|
@media (max-width: 860px) {
|
|
.hero { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 700px) {
|
|
.wrap { padding: var(--space-4); }
|
|
.panel, .card { padding: var(--space-5); }
|
|
.topbar { align-items: flex-start; flex-direction: column; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="topbar">
|
|
<div class="brand">
|
|
<div class="logo" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M6 18c4-1 8-6 12-12" />
|
|
<path d="M7 7h10v10" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<strong>Deep Petrol System</strong>
|
|
<span>Light-mode palette preview</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="hero">
|
|
<article class="panel">
|
|
<span class="eyebrow">Minimal vs. full system</span>
|
|
<h1>Light mode with deep petrol and a complementary accent.</h1>
|
|
<p>This layout is the same in both files, so you can focus purely on how the two palette strategies feel: a minimal system with one primary and one accent, and a fuller design-system-style palette with secondary and support colours.</p>
|
|
<div class="actions">
|
|
<button class="btn btn-primary">Primary action</button>
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
<button class="btn btn-accent">Accent</button>
|
|
<button class="btn btn-support">Support</button>
|
|
</div>
|
|
</article>
|
|
<aside class="panel">
|
|
<h3>Colour roles in this view</h3>
|
|
<div class="mini-list">
|
|
<div class="mini-item"><span class="dot" style="background: var(--color-primary);"></span><div><strong>Primary</strong><br><span style="color:var(--color-text-muted)">Main brand and key actions.</span></div></div>
|
|
<div class="mini-item"><span class="dot" style="background: var(--color-secondary);"></span><div><strong>Secondary</strong><br><span style="color:var(--color-text-muted)">Supporting emphasis and sub-actions.</span></div></div>
|
|
<div class="mini-item"><span class="dot" style="background: var(--color-accent);"></span><div><strong>Accent</strong><br><span style="color:var(--color-text-muted)">Warm complementary highlight.</span></div></div>
|
|
<div class="mini-item"><span class="dot" style="background: var(--color-support);"></span><div><strong>Support</strong><br><span style="color:var(--color-text-muted)">Charts, tags, or tertiary emphasis.</span></div></div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section class="card" style="margin-bottom: 2rem;">
|
|
<h2>Palette tokens</h2>
|
|
<div class="palette">
|
|
<div class="swatch"><div class="tone" style="background:var(--color-bg)"></div><div class="meta"><strong>Background</strong><span>Page base</span></div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--color-surface)"></div><div class="meta"><strong>Surface</strong><span>Cards and panels</span></div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--color-surface-2)"></div><div class="meta"><strong>Surface 2</strong><span>Inputs and nested areas</span></div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--color-primary)"></div><div class="meta"><strong>Primary</strong><span>Deep petrol anchor</span></div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--color-secondary)"></div><div class="meta"><strong>Secondary</strong><span>Support petrol tone</span></div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--color-accent)"></div><div class="meta"><strong>Accent</strong><span>Warm complementary tone</span></div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--color-support)"></div><div class="meta"><strong>Support</strong><span>Additional chromatic role</span></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="grid">
|
|
<section class="card">
|
|
<h2>Typography and links</h2>
|
|
<p>This paragraph uses the muted text token so body copy stays soft but readable. <a href="#">Links are separated into their own role</a> instead of blending into the primary action colour.</p>
|
|
<p style="color:var(--color-text)"><strong>Primary text</strong> is reserved for headings, labels, and short high-priority content.</p>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Form controls</h2>
|
|
<div class="field">
|
|
<label for="name">Name</label>
|
|
<input id="name" placeholder="Placeholder text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="topic">Topic</label>
|
|
<select id="topic">
|
|
<option> Accessibility </option>
|
|
<option> Branding </option>
|
|
<option> Theme tokens </option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="notes">Notes</label>
|
|
<textarea id="notes" rows="4" placeholder="Textarea readability test"></textarea>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Status colours</h2>
|
|
<p>Semantic colours are distinct from the petrol brand colour so success, warning, info, and danger states do not depend on hue shifts alone.</p>
|
|
<div class="status">
|
|
<span class="pill ok">Success</span>
|
|
<span class="pill warn">Warning</span>
|
|
<span class="pill info">Info</span>
|
|
<span class="pill bad">Danger</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="card" style="margin-bottom: 2rem;">
|
|
<h2>Table preview</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Element</th>
|
|
<th>Purpose</th>
|
|
<th>Colour logic</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Primary button</td>
|
|
<td>Main action</td>
|
|
<td>Petrol background with high-contrast foreground</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Secondary button</td>
|
|
<td>Supporting action</td>
|
|
<td>Neutral surface with clear border</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Accent button</td>
|
|
<td>High emphasis</td>
|
|
<td>Warm complement to break monotony</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Support button</td>
|
|
<td>Tertiary emphasis</td>
|
|
<td>Additional chromatic role for chips/tags</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<p class="footer">Use these two files side by side to compare a restrained palette versus a fuller design-system-style colour set in light mode.</p>
|
|
</div>
|
|
</body>
|
|
</html> |