134 lines
No EOL
7 KiB
HTML
134 lines
No EOL
7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Petrol Design System Document</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<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>
|
|
@page { size: A4; margin: 18mm; }
|
|
:root {
|
|
--bg: #ffffff;
|
|
--surface: #f7f9f8;
|
|
--border: #cfd9d6;
|
|
--text: #17343a;
|
|
--muted: #496267;
|
|
--primary: #0f5c63;
|
|
--accent: #c46f34;
|
|
--support: #7d4bb3;
|
|
--divider: #d9e2df;
|
|
--font-body: 'Inter', system-ui, sans-serif;
|
|
--font-display: 'Instrument Serif', Georgia, serif;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); }
|
|
.page { max-width: 210mm; margin: 0 auto; padding: 0; }
|
|
.cover {
|
|
border: 1px solid var(--border); border-radius: 18px; overflow: hidden; page-break-after: always;
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
|
|
}
|
|
.hero {
|
|
padding: 26mm 18mm 20mm; background:
|
|
radial-gradient(circle at top left, rgba(15,92,99,0.10), transparent 26%),
|
|
radial-gradient(circle at top right, rgba(196,111,52,0.12), transparent 24%),
|
|
linear-gradient(180deg, #fbfcfc 0%, #f4f6f5 100%);
|
|
}
|
|
.brand { display:flex; align-items:center; gap: 14px; margin-bottom: 18mm; }
|
|
.mark { width: 18mm; height: 18mm; border-radius: 5mm; background: linear-gradient(135deg, var(--primary), var(--accent)); }
|
|
.brand h1 { margin: 0; font-family: var(--font-display); font-size: 24pt; line-height: 1.05; }
|
|
.brand .sub { color: var(--muted); font-size: 10.5pt; margin-top: 2mm; }
|
|
.title { font-family: var(--font-display); font-size: 34pt; line-height: 1.02; margin: 0 0 8mm; max-width: 10ch; }
|
|
.lead { font-size: 11.5pt; line-height: 1.7; max-width: 135mm; color: var(--muted); margin: 0 0 10mm; }
|
|
.pillrow { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 8mm; }
|
|
.pill { font-size: 9pt; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--muted); }
|
|
.accentline { width: 34mm; height: 2.5mm; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin: 0 0 10mm; }
|
|
|
|
.content { padding: 18mm; background: #fff; }
|
|
.section { margin-bottom: 12mm; }
|
|
h2 { font-family: var(--font-display); font-size: 20pt; margin: 0 0 4mm; }
|
|
h3 { font-size: 11pt; margin: 0 0 3mm; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
|
|
p, li { font-size: 10.5pt; line-height: 1.65; color: var(--text); }
|
|
ul { margin: 0 0 0 5mm; padding: 0; }
|
|
li { margin-bottom: 2mm; }
|
|
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10mm; }
|
|
.box { border: 1px solid var(--border); border-radius: 5mm; padding: 6mm; background: var(--surface); }
|
|
.swatches { display:grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }
|
|
.swatch { border:1px solid var(--border); border-radius: 4mm; overflow:hidden; }
|
|
.tone { height: 18mm; }
|
|
.label { padding: 3mm; font-size: 9pt; color: var(--muted); }
|
|
.rule { height: 1px; background: var(--divider); margin: 8mm 0; }
|
|
.footer { font-size: 9pt; color: var(--muted); display:flex; justify-content:space-between; gap: 10mm; margin-top: 14mm; padding-top: 6mm; border-top: 1px solid var(--divider); }
|
|
.mono { font-family: ui-monospace, SFMono-Regular, monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="cover">
|
|
<div class="hero">
|
|
<div class="brand">
|
|
<div class="mark"></div>
|
|
<div>
|
|
<h1>Petrol Commons</h1>
|
|
<div class="sub">UI / UX Design Document</div>
|
|
</div>
|
|
</div>
|
|
<div class="accentline"></div>
|
|
<h1 class="title">Deep petrol design system</h1>
|
|
<p class="lead">This document defines a calm, readable, community-oriented colour system. It uses deep petrol as the primary brand anchor, a warm accent for emphasis, a secondary support role for supporting actions, and a muted tertiary tone for tags and light expressive UI.</p>
|
|
<div class="pillrow">
|
|
<div class="pill">Primary: deep petrol</div>
|
|
<div class="pill">Accent: warm clay</div>
|
|
<div class="pill">Secondary: petrol-blue</div>
|
|
<div class="pill">Support: muted violet</div>
|
|
<div class="pill">Light + dark themes</div>
|
|
<div class="pill">Accessible focus states</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="section">
|
|
<h2>Colour system</h2>
|
|
<div class="swatches">
|
|
<div class="swatch"><div class="tone" style="background:#f4f6f5"></div><div class="label">Background</div></div>
|
|
<div class="swatch"><div class="tone" style="background:#ffffff"></div><div class="label">Surface</div></div>
|
|
<div class="swatch"><div class="tone" style="background:#0f5c63"></div><div class="label">Primary</div></div>
|
|
<div class="swatch"><div class="tone" style="background:#c46f34"></div><div class="label">Accent</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="section grid">
|
|
<div class="box">
|
|
<h3>Principles</h3>
|
|
<ul>
|
|
<li>Use the neutral scale for most layout and content space.</li>
|
|
<li>Reserve the primary colour for major brand anchors and key actions.</li>
|
|
<li>Use the accent colour sparingly so it stays meaningful.</li>
|
|
<li>Keep links, buttons, and statuses visually distinct.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="box">
|
|
<h3>Accessibility</h3>
|
|
<ul>
|
|
<li>Maintain strong text contrast in both light and dark modes.</li>
|
|
<li>Keep borders visible on cards and inputs.</li>
|
|
<li>Use visible focus rings for all interactive elements.</li>
|
|
<li>Do not rely on colour alone to communicate state.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Components</h2>
|
|
<div class="rule"></div>
|
|
<p><strong>Buttons:</strong> Primary buttons use deep petrol, secondary buttons use neutral surfaces, accent buttons are reserved for high-emphasis moments, and support chips are used for tags or tertiary actions.</p>
|
|
<p><strong>Forms:</strong> Inputs use a slightly tinted surface with visible borders. Placeholder text is deliberately subdued.</p>
|
|
<p><strong>Letterhead:</strong> The printable layout uses a clean header, a small colour line, and balanced typography for formal communication.</p>
|
|
</div>
|
|
<div class="footer">
|
|
<div>Petrol Commons · Cologne, Germany</div>
|
|
<div class="mono">Version 1.0 · July 2026</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |