oliver
1631 lines
66 KiB
HTML
1631 lines
66 KiB
HTML
<!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 · Typography · Components</p>
|
||
</div>
|
||
</div>
|
||
<div class="cover-right">
|
||
<div class="cover-divider"></div>
|
||
<p>
|
||
<strong>my-biz.app</strong>
|
||
Version 1.0 · 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 & CTAs</a>
|
||
<a href="#cards">05 · Cards & Surfaces</a>
|
||
<a href="#spacing">06 · Spacing & 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 & 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 & 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 $ % & . , ; : ! ?
|
||
</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 $ % & . , ; : ! ?
|
||
</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 & Non-Profit | 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 · Simple Pricing · 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 · Book Meeting · 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 · per year, billed annually · 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 · $395 · 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 />
|
||
135deg,<br />
|
||
#BF360C 0%, <span class="cm">/* Deep Burnt — --gold-lo */</span><br />
|
||
#E65100 38%, <span class="cm">/* Burnt Orange — --gold */</span><br />
|
||
#FB8C00 55%, <span class="cm">/* Warm Orange — --gold-hi */</span><br />
|
||
#E65100 75%, <span class="cm">/* Burnt Orange — --gold */</span><br />
|
||
#BF360C 100% <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 & 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 & Badges</p>
|
||
<div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px;">
|
||
<span class="pill">✦ One Stop Shop · 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 & 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 & 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 · Grant Accounting · 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 & 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 & Layout</p>
|
||
<h2 class="sg-section-title">Spacing, Borders & 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 & 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 & 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 & 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:
|