Oliver/NGO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
75fc2ccc3b3f41d180a282dfdc3d266ba92b4473
NGO/style.html
T
oliver afb5a2ac20 migrate
2026-04-26 10:32:18 -03:00

1631 lines
66 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-biz.app — Brand Style Guide</title>
<style>
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Brand Tokens (mirrors index.html exactly) ── */
:root {
--bg: #efebe9;
--surf1: #e8e0da;
--card: #fff3e0;
--lift: #f5ece4;
--bg-deep: #3e2723;
--border: rgba(93, 64, 55, 0.25);
--grey: #a1887f;
--silver: #6d4c41;
--light: #5d4037;
--gold: #e65100;
--gold-hi: #fb8c00;
--gold-lo: #bf360c;
--gold-glow: rgba(230, 81, 0, 0.18);
--white: #3e2723;
}
/* ── Page base ── */
body {
background: var(--bg);
color: var(--light);
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
line-height: 1.65;
}
a { color: var(--gold); }
/* ── Utilities ── */
.mono { font-family: "Courier New", Courier, monospace; }
.serif { font-family: Georgia, "Times New Roman", serif; }
/* ── COVER ── */
.cover {
background: var(--bg-deep);
padding: 56px 8vw 48px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
border-bottom: 4px solid var(--gold);
}
.cover-left { display: flex; flex-direction: column; gap: 20px; }
.cover-logo img { height: 52px; width: auto; display: block; }
.cover-title h1 {
font-family: Georgia, "Times New Roman", serif;
font-size: 2.4rem;
font-weight: 700;
background: linear-gradient(135deg, #bf360c 0%, #e65100 38%, #fb8c00 55%, #e65100 75%, #bf360c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 6px;
line-height: 1.15;
}
.cover-title p {
font-size: 0.82rem;
color: #a1887f;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.cover-right {
display: flex;
flex-direction: column;
gap: 8px;
text-align: right;
padding-top: 6px;
}
.cover-right p {
font-size: 0.78rem;
color: #a1887f;
line-height: 1.7;
}
.cover-right strong { color: #fff3e0; display: block; margin-bottom: 2px; }
.cover-divider {
width: 40px;
height: 2px;
background: linear-gradient(90deg, #e65100, #fb8c00);
margin-left: auto;
margin-bottom: 8px;
}
/* ── TOC bar ── */
.toc {
background: var(--card);
border-bottom: 1px solid var(--border);
padding: 14px 8vw;
display: flex;
gap: 28px;
flex-wrap: wrap;
align-items: center;
}
.toc-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--grey);
flex-shrink: 0;
}
.toc a {
font-size: 0.75rem;
color: var(--silver);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: color 0.2s;
}
.toc a:hover { color: var(--gold); }
/* ── Sections ── */
.sg-section {
padding: 64px 8vw;
border-bottom: 1px solid var(--border);
}
.sg-section.alt { background: var(--surf1); }
.sg-section-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 8px;
}
.sg-section-title {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.9rem;
font-weight: 700;
color: var(--white);
margin-bottom: 8px;
line-height: 1.2;
}
.sg-section-desc {
font-size: 0.88rem;
color: var(--grey);
max-width: 660px;
line-height: 1.7;
margin-bottom: 44px;
}
/* ── Group headings ── */
.group-title {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--silver);
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
margin-bottom: 22px;
margin-top: 36px;
}
.group-title:first-child { margin-top: 0; }
/* ── Colour swatches ── */
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 18px;
}
.swatch {
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(62, 39, 35, 0.12);
}
.swatch-block { height: 96px; width: 100%; }
.swatch-body {
background: var(--card);
padding: 14px 15px 16px;
}
.swatch-name {
font-size: 0.84rem;
font-weight: 700;
color: var(--white);
margin-bottom: 2px;
}
.swatch-token {
font-size: 0.68rem;
color: var(--gold);
font-family: "Courier New", Courier, monospace;
margin-bottom: 11px;
}
.swatch-row {
display: flex;
justify-content: space-between;
font-size: 0.68rem;
padding: 3px 0;
border-bottom: 1px solid var(--border);
}
.swatch-row:last-child { border-bottom: none; padding-bottom: 0; }
.swatch-row .key {
font-weight: 600;
color: var(--grey);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.swatch-row .val {
font-family: "Courier New", Courier, monospace;
color: var(--light);
}
.swatch-row .use {
color: var(--silver);
font-style: italic;
text-align: right;
}
/* ── Typography ── */
.type-table { width: 100%; border-collapse: collapse; }
.type-table tr { border-bottom: 1px solid var(--border); }
.type-table tr:last-child { border-bottom: none; }
.type-table td { padding: 20px 0; vertical-align: top; }
.type-table td:first-child {
width: 220px;
padding-right: 28px;
flex-shrink: 0;
}
.type-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gold);
margin-bottom: 6px;
}
.type-specs {
font-size: 0.68rem;
color: var(--grey);
font-family: "Courier New", Courier, monospace;
line-height: 1.8;
}
.type-use {
font-size: 0.68rem;
color: var(--silver);
margin-top: 6px;
font-style: italic;
}
/* ── Gradient ── */
.grad-swatch {
height: 80px;
border-radius: 6px;
background: linear-gradient(135deg, #bf360c 0%, #e65100 38%, #fb8c00 55%, #e65100 75%, #bf360c 100%);
margin-bottom: 16px;
}
.grad-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 2.6rem;
font-weight: 700;
background: linear-gradient(135deg, #bf360c 0%, #e65100 38%, #fb8c00 55%, #e65100 75%, #bf360c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
line-height: 1.15;
}
.code-block {
background: var(--bg-deep);
color: #fb8c00;
font-family: "Courier New", Courier, monospace;
font-size: 0.78rem;
line-height: 1.8;
padding: 20px 24px;
border-radius: 6px;
border-left: 3px solid var(--gold);
}
.code-block .cm { color: #a1887f; }
/* ── Buttons ── */
.btn-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.btn-card {
background: var(--card);
padding: 24px 24px 20px;
border-radius: 4px;
}
.btn-card.dark { background: var(--bg-deep); }
.btn-card-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--grey);
margin-bottom: 16px;
}
.btn-card.dark .btn-card-label { color: #a1887f; }
.btn-card-spec {
font-size: 0.68rem;
font-family: "Courier New", Courier, monospace;
color: var(--silver);
line-height: 1.8;
margin-top: 14px;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.btn-card.dark .btn-card-spec { color: #a1887f; border-color: rgba(161,136,127,0.2); }
/* Actual button replicas */
.b-primary {
display: inline-block;
background: linear-gradient(135deg, #bf360c 0%, #e65100 40%, #fb8c00 60%, #e65100 80%, #bf360c 100%);
color: #efebe9;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 14px 30px;
border-radius: 2px;
border: none;
cursor: default;
font-family: "Segoe UI", system-ui, sans-serif;
box-shadow: 0 4px 20px rgba(230, 81, 0, 0.18);
}
.b-secondary {
display: inline-block;
background: transparent;
border: 1px solid #a1887f;
color: #3e2723;
font-size: 0.9rem;
font-weight: 500;
padding: 14px 30px;
border-radius: 2px;
cursor: default;
font-family: "Segoe UI", system-ui, sans-serif;
}
.b-cta {
display: inline-block;
background: transparent;
border: 1px solid #e65100;
color: #e65100;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 7px 18px;
border-radius: 2px;
cursor: default;
font-family: "Segoe UI", system-ui, sans-serif;
}
.b-ghost {
display: inline-block;
background: transparent;
border: 1px solid rgba(161, 136, 127, 0.55);
color: #a1887f;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 7px 18px;
border-radius: 2px;
cursor: default;
font-family: "Segoe UI", system-ui, sans-serif;
}
/* Hover states (shown separately as static) */
.b-primary-hover {
display: inline-block;
background: linear-gradient(135deg, #bf360c 0%, #e65100 40%, #fb8c00 60%, #e65100 80%, #bf360c 100%);
color: #efebe9;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 14px 30px;
border-radius: 2px;
border: none;
cursor: default;
font-family: "Segoe UI", system-ui, sans-serif;
opacity: 0.88;
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(230, 81, 0, 0.28);
}
.b-cta-filled {
display: inline-block;
background: #e65100;
color: #efebe9;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 7px 18px;
border-radius: 2px;
border: 1px solid #e65100;
cursor: default;
font-family: "Segoe UI", system-ui, sans-serif;
}
/* ── Pills & Badges ── */
.pill {
display: inline-block;
border: 1px solid #e65100;
color: #e65100;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 6px 16px;
border-radius: 100px;
font-family: "Segoe UI", system-ui, sans-serif;
}
.badge {
display: inline-block;
background: linear-gradient(135deg, #bf360c 0%, #e65100 40%, #fb8c00 60%, #e65100 80%, #bf360c 100%);
color: #efebe9;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
padding: 4px 12px;
border-radius: 2px;
font-family: "Segoe UI", system-ui, sans-serif;
}
/* ── Cards ── */
.card-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.card-demo {
background: var(--card);
padding: 32px 28px;
position: relative;
overflow: hidden;
}
.card-demo::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: linear-gradient(to bottom, #bf360c, #e65100, #fb8c00, #e65100, #bf360c);
}
.card-demo h3 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.1rem;
color: var(--white);
margin-bottom: 8px;
}
.card-demo p { font-size: 0.85rem; color: var(--silver); line-height: 1.65; }
.card-demo .tag {
display: block;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold);
border-top: 1px solid var(--border);
padding-top: 12px;
margin-top: 14px;
}
.card-featured {
background: var(--lift);
box-shadow: 0 0 0 1px var(--gold), 0 0 28px var(--gold-glow);
padding: 32px 28px;
}
.card-featured h3 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.1rem;
color: var(--white);
margin-bottom: 8px;
}
.card-featured p { font-size: 0.85rem; color: var(--silver); line-height: 1.65; }
.card-spec {
font-size: 0.68rem;
color: var(--grey);
font-family: "Courier New", Courier, monospace;
margin-top: 12px;
line-height: 1.7;
}
/* ── Spacing ── */
.spacing-table { width: 100%; border-collapse: collapse; }
.spacing-table th {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--grey);
font-weight: 600;
text-align: left;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.spacing-table td {
font-size: 0.82rem;
color: var(--light);
padding: 11px 0;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.spacing-table tr:last-child td { border-bottom: none; }
.spacing-table .val {
font-family: "Courier New", Courier, monospace;
color: var(--silver);
}
.spacing-bar {
height: 10px;
background: var(--gold);
opacity: 0.25;
border-radius: 2px;
display: inline-block;
vertical-align: middle;
margin-left: 12px;
}
/* ── Shadow demos ── */
.shadow-row {
display: flex;
gap: 24px;
flex-wrap: wrap;
align-items: center;
}
.shadow-box {
background: var(--card);
width: 100px;
height: 64px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
color: var(--grey);
text-align: center;
font-family: "Courier New", Courier, monospace;
line-height: 1.6;
}
/* ── Radius demos ── */
.radius-row {
display: flex;
gap: 20px;
align-items: flex-end;
flex-wrap: wrap;
}
.radius-box {
background: var(--gold);
opacity: 0.7;
width: 52px;
height: 52px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 0;
}
.radius-label {
font-size: 0.62rem;
color: var(--grey);
text-align: center;
margin-top: 6px;
font-family: "Courier New", Courier, monospace;
}
/* ── Do / Don't ── */
.rules-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.rules-col h3 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 18px;
padding-bottom: 8px;
border-bottom: 2px solid;
}
.rules-col.do h3 { color: var(--gold); border-color: var(--gold); }
.rules-col.dont h3 { color: var(--gold-lo); border-color: var(--gold-lo); }
.rules-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.rules-col li {
font-size: 0.84rem;
color: var(--light);
padding-left: 22px;
position: relative;
line-height: 1.55;
}
.rules-col.do li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.rules-col.dont li::before { content: "✗"; position: absolute; left: 0; color: var(--gold-lo); font-weight: 700; }
/* ── Two-col ── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
/* ── Footer ── */
.sg-footer {
background: var(--bg-deep);
border-top: 3px solid var(--gold);
padding: 44px 8vw;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.sg-footer-brand {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.1rem;
font-weight: 700;
background: linear-gradient(135deg, #bf360c 0%, #e65100 38%, #fb8c00 55%, #e65100 75%, #bf360c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 4px;
}
.sg-footer-sub { font-size: 0.75rem; color: #a1887f; }
.sg-footer-meta { font-size: 0.75rem; color: #a1887f; text-align: right; line-height: 1.7; }
/* ── Print ── */
@media print {
.sg-section.alt { background: #f0ede9 !important; }
.code-block { background: #f0ede9; color: #3e2723; border-left: 3px solid #e65100; }
}
/* ── Responsive ── */
@media (max-width: 800px) {
.two-col { grid-template-columns: 1fr; }
.rules-grid { grid-template-columns: 1fr; }
.type-table td:first-child { width: 160px; }
.cover { flex-direction: column; }
.cover-right { text-align: left; }
.cover-divider { margin-left: 0; }
}
</style>
</head>
<body>
<!-- ════════════════════════════════════════════════════════════════════
COVER
════════════════════════════════════════════════════════════════════ -->
<div class="cover">
<div class="cover-left">
<div class="cover-logo">
<img src="logo.png" alt="my-biz.app logo" />
</div>
<div class="cover-title">
<h1>Brand Style Guide</h1>
<p>Design Tokens &nbsp;·&nbsp; Typography &nbsp;·&nbsp; Components</p>
</div>
</div>
<div class="cover-right">
<div class="cover-divider"></div>
<p>
<strong>my-biz.app</strong>
Version 1.0 &nbsp;·&nbsp; 2025<br />
Confidential — for designer use only<br />
<br />
Back-office built on Odoo CE<br />
Web: <a href="https://my-biz.app" style="color:#e65100;">my-biz.app</a>
</p>
</div>
</div>
<!-- ── Table of Contents ── -->
<nav class="toc">
<span class="toc-label">Contents</span>
<a href="#colours">01 · Colours</a>
<a href="#typography">02 · Typography</a>
<a href="#gradient">03 · Gradient</a>
<a href="#buttons">04 · Buttons &amp; CTAs</a>
<a href="#cards">05 · Cards &amp; Surfaces</a>
<a href="#spacing">06 · Spacing &amp; Layout</a>
<a href="#rules">07 · Usage Rules</a>
</nav>
<!-- ════════════════════════════════════════════════════════════════════
01 · COLOUR PALETTE
════════════════════════════════════════════════════════════════════ -->
<section class="sg-section" id="colours">
<p class="sg-section-label">01 · Colour Palette</p>
<h2 class="sg-section-title">Brand Colours</h2>
<p class="sg-section-desc">
All colours are defined as CSS custom properties in <code class="mono" style="font-size:0.82em;color:var(--silver);">:root</code>.
Use the exact HEX values for digital work. CMYK values are converted mathematically
and should be verified against a press proof before final print production.
</p>
<!-- Backgrounds & Surfaces -->
<p class="group-title">Backgrounds &amp; Surfaces</p>
<div class="color-grid">
<div class="swatch">
<div class="swatch-block" style="background:#efebe9;border-bottom:1px solid rgba(93,64,55,.12);"></div>
<div class="swatch-body">
<div class="swatch-name">Latte</div>
<div class="swatch-token">--bg</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#EFEBE9</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">239, 235, 233</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 2, 2, 6</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Page background</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#e8e0da;"></div>
<div class="swatch-body">
<div class="swatch-name">Warm Latte</div>
<div class="swatch-token">--surf1</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#E8E0DA</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">232, 224, 218</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 3, 6, 9</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Alternate sections</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#fff3e0;border-bottom:1px solid rgba(93,64,55,.12);"></div>
<div class="swatch-body">
<div class="swatch-name">Cream</div>
<div class="swatch-token">--card</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#FFF3E0</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">255, 243, 224</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 5, 12, 0</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Cards, modal, chat</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#f5ece4;border-bottom:1px solid rgba(93,64,55,.12);"></div>
<div class="swatch-body">
<div class="swatch-name">Lifted Cream</div>
<div class="swatch-token">--lift</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#F5ECE4</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">245, 236, 228</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 4, 7, 4</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Card hover, featured bg</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#3e2723;"></div>
<div class="swatch-body">
<div class="swatch-name">Dark Roast</div>
<div class="swatch-token">--bg-deep</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#3E2723</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">62, 39, 35</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 37, 44, 76</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Footer, nav, overlays</span></div>
</div>
</div>
</div>
<!-- Text colours -->
<p class="group-title">Text Colours</p>
<div class="color-grid">
<div class="swatch">
<div class="swatch-block" style="background:#3e2723;"></div>
<div class="swatch-body">
<div class="swatch-name">Dark Roast</div>
<div class="swatch-token">--white · Headings</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#3E2723</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">62, 39, 35</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 37, 44, 76</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">h1, h2, card titles</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#5d4037;"></div>
<div class="swatch-body">
<div class="swatch-name">Medium Roast</div>
<div class="swatch-token">--light · Body</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#5D4037</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">93, 64, 55</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 31, 41, 64</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Body text, paragraphs</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#6d4c41;"></div>
<div class="swatch-body">
<div class="swatch-name">Deep Brown</div>
<div class="swatch-token">--silver · Secondary</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#6D4C41</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">109, 76, 65</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 30, 40, 57</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Teasers, sub-copy</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#a1887f;"></div>
<div class="swatch-body">
<div class="swatch-name">Warm Taupe</div>
<div class="swatch-token">--grey · Muted</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#A1887F</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">161, 136, 127</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 16, 21, 37</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Dates, captions, placeholders</span></div>
</div>
</div>
</div>
<!-- Accent colours -->
<p class="group-title">Accent &amp; CTA Colours</p>
<div class="color-grid">
<div class="swatch">
<div class="swatch-block" style="background:#e65100;"></div>
<div class="swatch-body">
<div class="swatch-name">Burnt Orange</div>
<div class="swatch-token">--gold · Primary</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#E65100</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">230, 81, 0</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 65, 100, 10</span></div>
<div class="swatch-row"><span class="key">Pantone</span><span class="val">~PMS 1595 C</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Buttons, links, accents</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#fb8c00;"></div>
<div class="swatch-body">
<div class="swatch-name">Warm Orange</div>
<div class="swatch-token">--gold-hi · Highlight</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#FB8C00</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">251, 140, 0</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 44, 100, 2</span></div>
<div class="swatch-row"><span class="key">Pantone</span><span class="val">~PMS 137 C</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Hover states, gradient peak</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:#bf360c;"></div>
<div class="swatch-body">
<div class="swatch-name">Deep Burnt</div>
<div class="swatch-token">--gold-lo · Shadow</div>
<div class="swatch-row"><span class="key">HEX</span><span class="val">#BF360C</span></div>
<div class="swatch-row"><span class="key">RGB</span><span class="val">191, 54, 12</span></div>
<div class="swatch-row"><span class="key">CMYK</span><span class="val">0, 72, 94, 25</span></div>
<div class="swatch-row"><span class="key">Pantone</span><span class="val">~PMS 1675 C</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Gradient start/end stops</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:rgba(230,81,0,0.18);border:1px dashed rgba(230,81,0,0.4);"></div>
<div class="swatch-body">
<div class="swatch-name">Orange Glow</div>
<div class="swatch-token">--gold-glow</div>
<div class="swatch-row"><span class="key">RGBA</span><span class="val">230, 81, 0 / 18%</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Box shadows, focus rings</span></div>
</div>
</div>
<div class="swatch">
<div class="swatch-block" style="background:rgba(93,64,55,0.25);"></div>
<div class="swatch-body">
<div class="swatch-name">Border</div>
<div class="swatch-token">--border</div>
<div class="swatch-row"><span class="key">RGBA</span><span class="val">93, 64, 55 / 25%</span></div>
<div class="swatch-row"><span class="key">Use</span><span class="use">Grid gaps, rule lines, table rows</span></div>
</div>
</div>
</div>
<!-- Print note -->
<p style="margin-top:32px;font-size:0.78rem;color:var(--grey);line-height:1.7;max-width:700px;background:var(--card);padding:16px 20px;border-left:3px solid var(--gold);border-radius:0 4px 4px 0;">
<strong style="color:var(--light);">Print Note:</strong>
CMYK values are calculated conversions. Colour accuracy depends on paper stock and printing process.
Always request a proof. For single-colour print, use <strong style="color:var(--light);">Burnt Orange #E65100</strong> (CMYK 0, 65, 100, 10)
as the primary brand accent. Pantone approximations are provided as reference only.
</p>
</section>
<!-- ════════════════════════════════════════════════════════════════════
02 · TYPOGRAPHY
════════════════════════════════════════════════════════════════════ -->
<section class="sg-section alt" id="typography">
<p class="sg-section-label">02 · Typography</p>
<h2 class="sg-section-title">Type System</h2>
<p class="sg-section-desc">
Two typefaces form the full type system. Georgia brings authority and warmth to display text;
Segoe UI delivers clean legibility in body copy and UI elements.
</p>
<!-- Font families -->
<p class="group-title">Typefaces</p>
<div class="two-col" style="margin-bottom:44px;">
<div style="background:var(--card);padding:28px 28px 24px;border-radius:4px;">
<p class="type-label">Display / Headings</p>
<p style="font-family:Georgia,'Times New Roman',serif;font-size:2.2rem;color:var(--white);margin-bottom:12px;line-height:1.15;">Aa Bb Cc</p>
<p style="font-family:Georgia,'Times New Roman',serif;font-size:0.9rem;color:var(--silver);margin-bottom:14px;line-height:1.7;">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br />
a b c d e f g h i j k l m n o p q r s t u v w x y z<br />
0 1 2 3 4 5 6 7 8 9 $ % &amp; . , ; : ! ?
</p>
<p class="mono" style="font-size:0.72rem;color:var(--grey);">Georgia, "Times New Roman", serif</p>
<p style="font-size:0.72rem;color:var(--silver);margin-top:8px;">
Used for: h1, h2, card titles, pricing, modal title,<br />logo text, rates
</p>
</div>
<div style="background:var(--card);padding:28px 28px 24px;border-radius:4px;">
<p class="type-label">Body / UI / System</p>
<p style="font-family:'Segoe UI',system-ui,sans-serif;font-size:2.2rem;color:var(--white);margin-bottom:12px;line-height:1.15;">Aa Bb Cc</p>
<p style="font-family:'Segoe UI',system-ui,sans-serif;font-size:0.9rem;color:var(--silver);margin-bottom:14px;line-height:1.7;">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br />
a b c d e f g h i j k l m n o p q r s t u v w x y z<br />
0 1 2 3 4 5 6 7 8 9 $ % &amp; . , ; : ! ?
</p>
<p class="mono" style="font-size:0.72rem;color:var(--grey);">"Segoe UI", system-ui, -apple-system, sans-serif</p>
<p style="font-size:0.72rem;color:var(--silver);margin-top:8px;">
Used for: body copy, buttons, labels, nav, forms,<br />captions, chat messages
</p>
</div>
</div>
<!-- Type scale -->
<p class="group-title">Type Scale</p>
<table class="type-table">
<tbody>
<tr>
<td>
<p class="type-label">Hero Headline · h1</p>
<p class="type-specs">
font: Georgia 700<br />
size: 2.6rem / 41.6 px<br />
color: --white #3E2723<br />
line-height: 1.15<br />
max-width: 980 px
</p>
<p class="type-use">Used: hero section only</p>
</td>
<td>
<span style="font-family:Georgia,'Times New Roman',serif;font-size:2.6rem;font-weight:700;color:#3e2723;line-height:1.15;display:block;">
Running a business is hard.
</span>
<span style="font-family:Georgia,'Times New Roman',serif;font-size:2.6rem;font-weight:700;font-style:italic;color:#e65100;line-height:1.15;">
Your back-office shouldn't be.
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Section Title · h2</p>
<p class="type-specs">
font: Georgia 700<br />
size: 2.4rem / 38.4 px<br />
color: --white #3E2723<br />
line-height: 1.2
</p>
</td>
<td>
<span style="font-family:Georgia,'Times New Roman',serif;font-size:2.4rem;font-weight:700;color:#3e2723;line-height:1.2;display:block;">
We speak your industry's language.
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Card / Sub-heading</p>
<p class="type-specs">
font: Georgia 700<br />
size: 1.1–1.2rem / ~18 px<br />
color: --white #3E2723
</p>
</td>
<td>
<span style="font-family:Georgia,'Times New Roman',serif;font-size:1.15rem;font-weight:700;color:#3e2723;">
NGO &amp; Non-Profit &nbsp;|&nbsp; Hire Any Odoo Developer
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Pricing Display</p>
<p class="type-specs">
font: Georgia 700<br />
size: 3.2rem / 51.2 px<br />
color: gradient text<br />
line-height: 1
</p>
</td>
<td>
<span style="font-family:Georgia,'Times New Roman',serif;font-size:3.2rem;font-weight:700;background:linear-gradient(135deg,#bf360c 0%,#e65100 38%,#fb8c00 55%,#e65100 75%,#bf360c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;">
$395
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Body Copy</p>
<p class="type-specs">
font: Segoe UI 400<br />
size: 0.88–1.0rem / ~15 px<br />
color: --silver #6D4C41<br />
line-height: 1.65–1.7
</p>
</td>
<td>
<span style="font-size:0.92rem;color:#6d4c41;line-height:1.7;display:block;max-width:580px;">
We eliminate the chaos behind the scenes — invoicing, HR,
inventory, CRM, reports — all in one place, set up for your
exact industry, ready from day one.
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Hero Sub / Intro</p>
<p class="type-specs">
font: Segoe UI 400<br />
size: 0.92rem / 14.7 px<br />
color: --silver #6D4C41<br />
line-height: 1.7
</p>
</td>
<td>
<span style="font-size:0.92rem;color:#6d4c41;line-height:1.7;">
Specialists for NGOs, Startups, Manufacturing, and Restaurants.
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Tagline · Italic</p>
<p class="type-specs">
font: Segoe UI 400 italic<br />
size: 0.88rem / 14 px<br />
color: --grey #A1887F
</p>
</td>
<td>
<span style="font-size:0.88rem;font-style:italic;color:#a1887f;">
No duct tape. No spreadsheet nightmares. No expensive surprises.
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Section Label</p>
<p class="type-specs">
font: Segoe UI 400<br />
size: 0.72rem / 11.5 px<br />
UPPERCASE · tracking 0.14em<br />
color: --gold #E65100
</p>
</td>
<td>
<span style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.14em;color:#e65100;">
Our Verticals &nbsp;·&nbsp; Simple Pricing &nbsp;·&nbsp; Customization
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Button / CTA</p>
<p class="type-specs">
font: Segoe UI 700<br />
size: 0.8–0.9rem<br />
UPPERCASE · tracking 0.06–0.1em<br />
color: varies per context
</p>
</td>
<td>
<span style="font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#e65100;">
Free Trial &nbsp;·&nbsp; Book Meeting &nbsp;·&nbsp; Get Started
</span>
</td>
</tr>
<tr>
<td>
<p class="type-label">Caption / Date / Meta</p>
<p class="type-specs">
font: Segoe UI 400<br />
size: 0.65–0.78rem / ~11 px<br />
color: --grey #A1887F
</p>
</td>
<td>
<span style="font-size:0.72rem;color:#a1887f;letter-spacing:0.06em;">
June 2025 &nbsp;·&nbsp; per year, billed annually &nbsp;·&nbsp; Powered by Odoo Community Edition
</span>
</td>
</tr>
</tbody>
</table>
</section>
<!-- ════════════════════════════════════════════════════════════════════
03 · BRAND GRADIENT
════════════════════════════════════════════════════════════════════ -->
<section class="sg-section" id="gradient">
<p class="sg-section-label">03 · Brand Gradient</p>
<h2 class="sg-section-title">Metallic Orange Gradient</h2>
<p class="sg-section-desc">
A 5-stop metallic gradient is the centrepiece of the visual identity.
It appears on primary buttons, the logo, pricing figures, modal titles, and badges —
conveying warmth, craft, and premium quality.
</p>
<div class="grad-swatch"></div>
<div class="grad-text">my-biz.app &nbsp;·&nbsp; $395 &nbsp;·&nbsp; Start Free Trial</div>
<div class="two-col" style="margin-bottom:28px;">
<div>
<div class="code-block">
<span class="cm">/* CSS — applied as background */</span><br />
background: linear-gradient(<br />
&nbsp;&nbsp;135deg,<br />
&nbsp;&nbsp;#BF360C &nbsp;0%,&nbsp;&nbsp;&nbsp;<span class="cm">/* Deep Burnt — --gold-lo */</span><br />
&nbsp;&nbsp;#E65100 &nbsp;38%,&nbsp;<span class="cm">/* Burnt Orange — --gold */</span><br />
&nbsp;&nbsp;#FB8C00 &nbsp;55%,&nbsp;<span class="cm">/* Warm Orange — --gold-hi */</span><br />
&nbsp;&nbsp;#E65100 &nbsp;75%,&nbsp;<span class="cm">/* Burnt Orange — --gold */</span><br />
&nbsp;&nbsp;#BF360C 100%&nbsp;&nbsp;<span class="cm">/* Deep Burnt — --gold-lo */</span><br />
);<br /><br />
<span class="cm">/* CSS — applied as text clip */</span><br />
-webkit-background-clip: text;<br />
-webkit-text-fill-color: transparent;<br />
background-clip: text;
</div>
</div>
<div style="display:flex;flex-direction:column;gap:20px;">
<div>
<p style="font-size:0.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin-bottom:10px;">Gradient as button background</p>
<button class="b-primary">Free Trial</button>
</div>
<div>
<p style="font-size:0.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin-bottom:10px;">Gradient as badge background</p>
<span class="badge">Most Popular</span>
</div>
<div>
<p style="font-size:0.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin-bottom:10px;">Gradient as text fill (logo, price)</p>
<span style="font-family:Georgia,'Times New Roman',serif;font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,#bf360c 0%,#e65100 38%,#fb8c00 55%,#e65100 75%,#bf360c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">$65 USD / hour</span>
</div>
</div>
</div>
<p style="font-size:0.78rem;color:var(--grey);line-height:1.7;background:var(--card);padding:16px 20px;border-left:3px solid var(--gold);border-radius:0 4px 4px 0;max-width:680px;">
<strong style="color:var(--light);">Print equivalent:</strong>
Replicate with a left-to-right blend of Deep Burnt (#BF360C) through Burnt Orange (#E65100) to Warm Orange (#FB8C00) and back.
For single-ink applications, use solid <strong style="color:var(--light);">Burnt Orange #E65100</strong>.
Avoid using the gradient as small text below 14 pt — prefer solid Burnt Orange instead.
</p>
</section>
<!-- ════════════════════════════════════════════════════════════════════
04 · BUTTONS & CTAs
════════════════════════════════════════════════════════════════════ -->
<section class="sg-section alt" id="buttons">
<p class="sg-section-label">04 · Buttons &amp; CTAs</p>
<h2 class="sg-section-title">Interactive Elements</h2>
<p class="sg-section-desc">
Four button variants cover all CTA contexts. Use UPPERCASE for nav-sized buttons;
sentence case is acceptable for large hero buttons. Never modify the border-radius above 2 px for buttons.
</p>
<div class="btn-grid">
<!-- Primary -->
<div class="btn-card">
<p class="btn-card-label">Primary Button</p>
<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
<button class="b-primary">Free Trial</button>
<button class="b-primary-hover">Hover state</button>
</div>
<p class="btn-card-spec">
bg: orange 5-stop gradient<br />
color: --bg #EFEBE9<br />
font: Segoe UI 700 · 0.9rem<br />
UPPERCASE · tracking 0.06em<br />
padding: 14px 30px<br />
radius: 2px<br />
shadow: 0 4px 20px --gold-glow<br />
Hover: opacity 0.88 + shadow deepen
</p>
</div>
<!-- Secondary -->
<div class="btn-card">
<p class="btn-card-label">Secondary Button</p>
<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
<button class="b-secondary">Book Meeting</button>
<button class="b-secondary" style="border-color:#e65100;color:#e65100;">Hover state</button>
</div>
<p class="btn-card-spec">
bg: transparent<br />
border: 1px solid --grey #A1887F<br />
color: --white #3E2723<br />
font: Segoe UI 500 · 0.9rem<br />
padding: 14px 30px · radius: 2px<br />
Hover: border + color → --gold #E65100
</p>
</div>
<!-- Nav CTA — dark background -->
<div class="btn-card dark">
<p class="btn-card-label">Nav CTA — on dark header</p>
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
<button class="b-ghost">Book Meeting</button>
<button class="b-cta">Free Trial</button>
</div>
<p class="btn-card-spec">
Free Trial: border 1px + color --gold #E65100<br />
→ fills solid #E65100 on hover<br />
Book Meeting: border rgba(161,136,127,.55)<br />
color --grey #A1887F<br />
→ border + color --gold-hi #FB8C00 on hover<br />
font: Segoe UI 700 · 0.8rem UPPERCASE<br />
tracking: 0.08em · padding: 7px 18px · radius: 2px
</p>
</div>
<!-- Pills & Badges -->
<div class="btn-card">
<p class="btn-card-label">Pills &amp; Badges</p>
<div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px;">
<span class="pill">&#10022; One Stop Shop &middot; Built for Real Businesses</span>
</div>
<div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap;">
<span class="badge">Most Popular</span>
</div>
<p class="btn-card-spec">
Eyebrow pill: border + color --gold<br />
font-size 0.7rem UPPERCASE<br />
letter-spacing 0.12em · radius: 100px<br />
padding: 6px 16px<br />
<br />
Badge: gradient background · color --bg<br />
font-size 0.65rem UPPERCASE · weight 700<br />
padding: 4px 12px · radius: 2px
</p>
</div>
</div>
<!-- State notes -->
<p style="margin-top:32px;font-size:0.78rem;color:var(--grey);line-height:1.7;max-width:640px;">
<strong style="color:var(--light);">Interaction principle:</strong>
All hover states use CSS <code class="mono" style="font-size:.82em;">transition: 0.2s</code> on colour, border, and opacity only.
Never use animation or keyframes on buttons — transitions only.
</p>
</section>
<!-- ════════════════════════════════════════════════════════════════════
05 · CARDS & SURFACES
════════════════════════════════════════════════════════════════════ -->
<section class="sg-section" id="cards">
<p class="sg-section-label">05 · Cards &amp; Surfaces</p>
<h2 class="sg-section-title">Card Styles</h2>
<p class="sg-section-desc">
Cards have no border-radius — sharp corners communicate structure and precision.
A gold accent line or featured ring differentiates card hierarchy.
</p>
<div class="card-row">
<div>
<p style="font-size:0.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin-bottom:10px;">Standard card · on Latte bg</p>
<div class="card-demo">
<h3>NGO &amp; Non-Profit</h3>
<p>Grant tracking, donor management, project accounting, and compliance reporting — built for organizations that answer to their mission.</p>
<span class="tag">Donor CRM &middot; Grant Accounting &middot; Impact Reports</span>
</div>
<p class="card-spec">bg: --card #FFF3E0<br />left border: 3px solid gradient<br />padding: 40px 32px<br />border-radius: 0</p>
</div>
<div>
<p style="font-size:0.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin-bottom:10px;">Featured card · gold ring</p>
<div class="card-featured">
<span class="badge" style="display:inline-block;margin-bottom:14px;">Most Popular</span>
<h3>On the Rise · $395</h3>
<p>Industry-specific modules, professional report templates, up to 10 users, priority onboarding, email &amp; chat support.</p>
</div>
<p class="card-spec">bg: --lift #F5ECE4<br />box-shadow: 0 0 0 1px --gold + 0 0 28px --gold-glow<br />padding: 48px 40px<br />border-radius: 0</p>
</div>
<div>
<p style="font-size:0.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin-bottom:10px;">News card · border-top rule</p>
<div style="border-top:1px solid var(--border);padding-top:24px;background:transparent;">
<p style="font-size:0.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:8px;">NGO</p>
<p style="font-family:Georgia,'Times New Roman',serif;font-size:1.05rem;font-weight:700;color:var(--white);line-height:1.35;margin-bottom:10px;">How a regional NGO cut grant reporting time by 70%</p>
<p style="font-size:0.85rem;color:var(--silver);line-height:1.6;margin-bottom:14px;">Automating donor reconciliation freed 15 hours per week that went straight back into their mission.</p>
<span style="font-size:0.72rem;color:var(--grey);letter-spacing:.06em;">June 2025</span>
</div>
<p class="card-spec">bg: transparent<br />border-top: 1px solid --border<br />Hover: border-top-color → --gold<br />padding-top: 28px</p>
</div>
</div>
<!-- Section backgrounds -->
<p class="group-title">Section Backgrounds</p>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:12px;">
<div style="background:var(--bg);padding:20px;text-align:center;">
<p style="font-size:0.68rem;color:var(--grey);margin-bottom:4px;">--bg</p>
<p style="font-size:0.75rem;color:var(--light);">Latte #EFEBE9</p>
<p style="font-size:0.62rem;color:var(--grey);margin-top:4px;">hero, news, customization</p>
</div>
<div style="background:var(--surf1);padding:20px;text-align:center;">
<p style="font-size:0.68rem;color:var(--grey);margin-bottom:4px;">--surf1</p>
<p style="font-size:0.75rem;color:var(--light);">Warm Latte #E8E0DA</p>
<p style="font-size:0.62rem;color:var(--grey);margin-top:4px;">verticals, pricing sections</p>
</div>
<div style="background:var(--bg-deep);padding:20px;text-align:center;">
<p style="font-size:0.68rem;color:#a1887f;margin-bottom:4px;">--bg-deep</p>
<p style="font-size:0.75rem;color:#fff3e0;">Dark Roast #3E2723</p>
<p style="font-size:0.62rem;color:#a1887f;margin-top:4px;">footer, nav, modal overlay</p>
</div>
</div>
<p style="font-size:0.72rem;color:var(--grey);">Sections alternate between --bg and --surf1 to create rhythm without hard borders.</p>
</section>
<!-- ════════════════════════════════════════════════════════════════════
06 · SPACING & LAYOUT
════════════════════════════════════════════════════════════════════ -->
<section class="sg-section alt" id="spacing">
<p class="sg-section-label">06 · Spacing &amp; Layout</p>
<h2 class="sg-section-title">Spacing, Borders &amp; Radius</h2>
<p class="sg-section-desc">
Spacing is defined in <code class="mono" style="font-size:.82em;color:var(--silver);">px</code> for fixed elements and <code class="mono" style="font-size:.82em;color:var(--silver);">vw</code> for horizontal gutters,
ensuring layout breathes appropriately across all viewport widths.
</p>
<div class="two-col">
<div>
<p class="group-title" style="margin-top:0;">Key Spacing Values</p>
<table class="spacing-table">
<thead>
<tr>
<th>Context</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Page horizontal gutter</td>
<td class="val">0 8vw</td>
<td><span class="spacing-bar" style="width:64px;"></span></td>
</tr>
<tr>
<td>Section vertical padding</td>
<td class="val">90px 8vw</td>
<td><span class="spacing-bar" style="width:72px;"></span></td>
</tr>
<tr>
<td>Hero padding</td>
<td class="val">44px 6vw</td>
<td><span class="spacing-bar" style="width:48px;"></span></td>
</tr>
<tr>
<td>Card padding (standard)</td>
<td class="val">40px 32px</td>
<td><span class="spacing-bar" style="width:40px;"></span></td>
</tr>
<tr>
<td>Card padding (featured)</td>
<td class="val">48px 40px</td>
<td><span class="spacing-bar" style="width:52px;"></span></td>
</tr>
<tr>
<td>Nav height</td>
<td class="val">62px</td>
<td><span class="spacing-bar" style="width:32px;"></span></td>
</tr>
<tr>
<td>Card grid gap</td>
<td class="val">1px (border bg)</td>
<td><span class="spacing-bar" style="width:4px;opacity:.9;"></span></td>
</tr>
<tr>
<td>News grid gap</td>
<td class="val">24px</td>
<td><span class="spacing-bar" style="width:24px;"></span></td>
</tr>
<tr>
<td>Footer padding</td>
<td class="val">72px 8vw 40px</td>
<td><span class="spacing-bar" style="width:56px;"></span></td>
</tr>
<tr>
<td>Mobile section padding</td>
<td class="val">60px 5vw</td>
<td><span class="spacing-bar" style="width:44px;"></span></td>
</tr>
</tbody>
</table>
</div>
<div>
<p class="group-title" style="margin-top:0;">Border Radius Scale</p>
<div class="radius-row" style="margin-bottom:32px;">
<div>
<div class="radius-box" style="border-radius:0;"></div>
<p class="radius-label">0 px<br/>Cards</p>
</div>
<div>
<div class="radius-box" style="border-radius:2px;"></div>
<p class="radius-label">2 px<br/>Buttons</p>
</div>
<div>
<div class="radius-box" style="border-radius:4px;"></div>
<p class="radius-label">4 px<br/>Chat<br/>inputs</p>
</div>
<div>
<div class="radius-box" style="border-radius:6px;"></div>
<p class="radius-label">6 px<br/>Chat<br/>panel</p>
</div>
<div>
<div class="radius-box" style="border-radius:100px;width:72px;"></div>
<p class="radius-label">100 px<br/>Pill labels</p>
</div>
</div>
<p class="group-title">Border &amp; Shadow Tokens</p>
<div style="display:flex;flex-direction:column;gap:20px;">
<div>
<p style="font-size:0.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);margin-bottom:8px;">--border · Hairline divider</p>
<div style="height:1px;background:rgba(93,64,55,0.25);margin-bottom:6px;"></div>
<p class="mono" style="font-size:0.68rem;color:var(--silver);">rgba(93, 64, 55, 0.25)</p>
<p style="font-size:0.68rem;color:var(--grey);margin-top:3px;">Card grids, nav, table rows, quote rule</p>
</div>
<div>
<p style="font-size:0.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);margin-bottom:8px;">Featured card ring + glow</p>
<div style="height:44px;background:var(--card);box-shadow:0 0 0 1px #e65100, 0 0 28px rgba(230,81,0,0.18);border-radius:4px;margin-bottom:6px;"></div>
<p class="mono" style="font-size:0.68rem;color:var(--silver);">0 0 0 1px #E65100, 0 0 28px rgba(230,81,0,.18)</p>
</div>
<div>
<p style="font-size:0.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);margin-bottom:8px;">Focus ring · inputs &amp; chat</p>
<div style="height:34px;background:rgba(80,56,30,0.2);border:1px solid #e65100;box-shadow:0 0 0 2px rgba(230,81,0,0.18);border-radius:4px;margin-bottom:6px;"></div>
<p class="mono" style="font-size:0.68rem;color:var(--silver);">border: 1px solid --gold + box-shadow 0 0 0 2px --gold-glow</p>
</div>
</div>
</div>
</div>
<!-- Grid layouts -->
<p class="group-title">Grid Layouts</p>
<table class="spacing-table">
<thead>
<tr>
<th>Section</th>
<th>CSS Grid</th>
<th>Min column</th>
<th>Gap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Verticals</td>
<td class="val">auto-fit</td>
<td class="val">220px</td>
<td class="val">1px (gold hairline)</td>
</tr>
<tr>
<td>News</td>
<td class="val">auto-fit</td>
<td class="val">220px</td>
<td class="val">24px</td>
</tr>
<tr>
<td>Pricing</td>
<td class="val">auto-fit</td>
<td class="val">300px · max 820px</td>
<td class="val">1px (gold hairline)</td>
</tr>
<tr>
<td>Customization</td>
<td class="val">auto-fit</td>
<td class="val">300px</td>
<td class="val">1px (gold hairline)</td>
</tr>
</tbody>
</table>
<!-- Breakpoints -->
<p class="group-title">Responsive Breakpoints</p>
<table class="spacing-table">
<thead>
<tr><th>Breakpoint</th><th>Changes</th></tr>
</thead>
<tbody>
<tr>
<td class="val">≤ 768 px</td>
<td>h1 → 1.9rem · nav CTAs hide → show compact Free Trial · chat panel hidden</td>
</tr>
<tr>
<td class="val">≤ 480 px</td>
<td>h1 → 1.5rem · nav/section padding → 5vw · modal padding reduced</td>
</tr>
</tbody>
</table>
</section>
<!-- ════════════════════════════════════════════════════════════════════
07 · USAGE RULES
════════════════════════════════════════════════════════════════════ -->
<section class="sg-section" id="rules">
<p class="sg-section-label">07 · Usage Rules</p>
<h2 class="sg-section-title">Design Guidelines</h2>
<p class="sg-section-desc">
These rules maintain brand consistency across all touchpoints — web, print, social, and presentation decks.
</p>
<div class="rules-grid">
<div class="rules-col do">
<h3>Do ✓</h3>
<ul>
<li>Use Dark Roast (#3E2723) for all headlines on light backgrounds</li>
<li>Use Burnt Orange (#E65100) as the primary CTA and accent colour</li>
<li>Use Georgia serif for any display or decorative headline</li>
<li>Apply the 5-stop orange gradient to primary buttons, logos, and pricing figures</li>
<li>Keep section labels in UPPERCASE with 0.14–0.2em letter-spacing</li>
<li>Use Latte (#EFEBE9) as the page background on all light-theme layouts</li>
<li>Use Dark Roast (#3E2723) for all footer, header, and overlay dark areas</li>
<li>Pair warm tones together — Cream cards on Latte background, Dark Roast footer</li>
<li>Use Warm Taupe (#A1887F) for dates, metadata, and placeholder text</li>
<li>Maintain 2px border-radius on all button elements</li>
</ul>
</div>
<div class="rules-col dont">
<h3>Don't ✗</h3>
<ul>
<li>Don't introduce pure black (#000) or cold grey tones — brand is warm-only</li>
<li>Don't use Burnt Orange for body text on light backgrounds (insufficient contrast for long copy)</li>
<li>Don't add border-radius above 6px to cards or containers</li>
<li>Don't use Segoe UI for display headings or decorative text</li>
<li>Don't mix cold colours — no blues, purples, teals, or cool greens</li>
<li>Don't stretch or distort the logo — scale proportionally only</li>
<li>Don't place gradient text smaller than 14pt / 18px</li>
<li>Don't use more than two font sizes on a single card or label group</li>
<li>Don't use the outline/ghost button style on a light (Latte/Cream) background for primary actions</li>
<li>Don't add drop-shadows to standard cards — use the featured ring only on the highlighted item</li>
</ul>
</div>
</div>
<!-- Minimum sizes -->
<p class="group-title">Minimum Logo Sizes</p>
<div style="display:flex;gap:32px;align-items:flex-end;flex-wrap:wrap;margin-bottom:32px;">
<div style="text-align:center;">
<div style="background:var(--bg-deep);padding:12px 16px;border-radius:4px;display:inline-block;margin-bottom:8px;">
<img src="logo.png" alt="logo" style="height:36px;width:auto;display:block;" />
</div>
<p style="font-size:0.68rem;color:var(--grey);">36 px · Nav bar<br/>(minimum digital)</p>
</div>
<div style="text-align:center;">
<div style="background:var(--bg-deep);padding:16px 20px;border-radius:4px;display:inline-block;margin-bottom:8px;">
<img src="logo.png" alt="logo" style="height:52px;width:auto;display:block;" />
</div>
<p style="font-size:0.68rem;color:var(--grey);">52 px · Cover / hero<br/>style guide standard</p>
</div>
<div>
<p style="font-size:0.78rem;color:var(--grey);max-width:320px;line-height:1.7;">
For print materials, maintain a minimum clear space of half the logo height on all sides.
Never place the logo on a mid-tone background without sufficient contrast.
Preferred backgrounds: Dark Roast #3E2723 or Cream #FFF3E0.
</p>
</div>
</div>
<!-- Tone -->
<p class="group-title">Tone &amp; Voice (for copy)</p>
<div class="two-col">
<div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
<li style="font-size:0.84rem;color:var(--light);padding-left:20px;position:relative;"><span style="position:absolute;left:0;color:var(--gold);">✓</span> Direct and confident — "We eliminate the chaos"</li>
<li style="font-size:0.84rem;color:var(--light);padding-left:20px;position:relative;"><span style="position:absolute;left:0;color:var(--gold);">✓</span> Warm but professional — no jargon, no fluff</li>
<li style="font-size:0.84rem;color:var(--light);padding-left:20px;position:relative;"><span style="position:absolute;left:0;color:var(--gold);">✓</span> Industry-specific empathy — "we've lived your challenges"</li>
<li style="font-size:0.84rem;color:var(--light);padding-left:20px;position:relative;"><span style="position:absolute;left:0;color:var(--gold);">✓</span> Transparent on pricing — "No expensive surprises"</li>
</ul>
</div>
<div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
<li style="font-size:0.84rem;color:var(--light);padding-left:20px;position:relative;"><span style="position:absolute;left:0;color:var(--gold-lo);">✗</span> Don't use buzzwords: "synergise", "leverage", "ecosystem"</li>
<li style="font-size:0.84rem;color:var(--light);padding-left:20px;position:relative;"><span style="position:absolute;left:0;color:var(--gold-lo);">✗</span> Don't make vague promises — be specific and measurable</li>
<li style="font-size:0.84rem;color:var(--light);padding-left:20px;position:relative;"><span style="position:absolute;left:0;color:var(--gold-lo);">✗</span> Don't use exclamation marks in formal print materials</li>
</ul>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════════════════ -->
<footer class="sg-footer">
<div>
<p class="sg-footer-brand">my-biz.app</p>
<p class="sg-footer-sub">Brand Style Guide · Version 1.0 · 2025</p>
</div>
<p class="sg-footer-meta">
Confidential — for design use only.<br />
Questions? <a href="mailto:hello@my-biz.app" style="color:#e65100;">hello@my-biz.app</a><br />
Web: <a href="https://my-biz.app" style="color:#e65100;">my-biz.app</a>
</p>
</footer>
</body>
</html>
```
Now let me commit this to the repository:
Reference in New Issue View Git Blame Copy Permalink