K-D-C/KDCDesignSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(brand): adopt official Kode brand guidelines
Lint / lint (push) Has been cancelled
Details

Browse Source 
- Brand palette: purple #6B35A7 (primary), #000000 (ink), #FFFFFF, #F5F4F0 (canvas)
- Typography: Manrope (UI, 200-800) + Opificio Bold (wordmark/display); drop Inter
- design.md: add wordmarkSecondary token, new display scale (Opificio 72/80)
- foundations: refresh swatches and typography README to match guidelines
- assets/fonts: replace Inter folder with Manrope; add Opificio cuts (Bold/Rounded/Regular)
- fonts.css: register Manrope variable + Opificio cuts; keep Roboto Mono for code only
- examples/web: render the kode wordmark lockup on the off-white canvas
- brand-guidelines: real specs (lockup, palette, typography, logo variant rules)
- README: add brand-at-a-glance, bump version to beta

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Roberts
2026-04-29 19:24:52 +00:00
parent 1082a0ed34
commit af2af23d14
25 changed files with 235 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/web/index.html
+4 -3
View File
@@ -3,15 +3,16 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>KDC Design System — Web Example</title>
<title>Kode Design Consultants — Design System Example</title>
<link rel="icon" href="../../brand/logos/favicon/favicon.svg" />
<link rel="stylesheet" href="../../assets/fonts/fonts.css" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="display">KDC Design System</h1>
<p class="body">A minimal page wired up to KDS tokens and fonts.</p>
<h1 class="wordmark">kode</h1>
<p class="wordmark-sub">design consultants</p>
<p class="body">A minimal page wired up to the KDC design tokens and brand fonts.</p>
<button class="btn-primary">Primary action</button>
</main>
</body>
examples/web/styles.css
+30 -7
View File
@@ -1,6 +1,9 @@
:root {
--color-brand-primary: #0B5FFF;
--color-brand-primary-hover: #0848C2;
--color-brand-primary: #6B35A7;
--color-brand-primary-hover: #582A8D;
--color-brand-primary-pressed: #45216E;
--color-brand-ink: #000000;
--color-brand-canvas: #F5F4F0;
--color-text-default: #111827;
--color-surface-bg: #FFFFFF;
--radius-md: 8px;
@@ -10,14 +13,32 @@
body {
margin: 0;
font-family: "Inter", system-ui, sans-serif;
font-family: "Manrope", system-ui, sans-serif;
color: var(--color-text-default);
background: var(--color-surface-bg);
background: var(--color-brand-canvas);
}
.container { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
.display { font-size: 48px; font-weight: 700; line-height: 56px; letter-spacing: -0.02em; }
.body { font-size: 16px; line-height: 24px; }
.wordmark {
font-family: "Opificio", "Manrope", system-ui, sans-serif;
font-weight: 700;
font-size: 72px;
line-height: 80px;
letter-spacing: -0.01em;
color: var(--color-brand-primary);
margin: 0;
}
.wordmark-sub {
font-family: "Manrope", system-ui, sans-serif;
font-weight: 200;
font-size: 20px;
letter-spacing: 0.04em;
color: var(--color-brand-primary);
margin: 0 0 24px;
}
.body { font-size: 16px; line-height: 24px; }
.btn-primary {
background: var(--color-brand-primary);
@@ -26,6 +47,8 @@ body {
border-radius: var(--radius-md);
padding: 12px 20px;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.btn-primary:hover { background: var(--color-brand-primary-hover); }
.btn-primary:hover { background: var(--color-brand-primary-hover); }
.btn-primary:active { background: var(--color-brand-primary-pressed); }