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
tokens/typography.json
+11 -10
View File
@@ -1,14 +1,15 @@
{
"typography": {
"display": { "fontFamily": "Inter", "fontSize": "48px", "fontWeight": 700, "lineHeight": "56px", "letterSpacing": "-0.02em" },
"headingXL": { "fontFamily": "Inter", "fontSize": "32px", "fontWeight": 700, "lineHeight": "40px" },
"headingL": { "fontFamily": "Inter", "fontSize": "24px", "fontWeight": 600, "lineHeight": "32px" },
"headingM": { "fontFamily": "Inter", "fontSize": "20px", "fontWeight": 600, "lineHeight": "28px" },
"headingS": { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 600, "lineHeight": "24px" },
"bodyL": { "fontFamily": "Inter", "fontSize": "18px", "fontWeight": 400, "lineHeight": "28px" },
"bodyM": { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 400, "lineHeight": "24px" },
"bodyS": { "fontFamily": "Inter", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" },
"caption": { "fontFamily": "Inter", "fontSize": "12px", "fontWeight": 500, "lineHeight": "16px", "letterSpacing": "0.02em" },
"mono": { "fontFamily": "Roboto Mono", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" }
"display": { "fontFamily": "Opificio", "fontSize": "72px", "fontWeight": 700, "lineHeight": "80px", "letterSpacing": "-0.01em", "$description": "Wordmark / hero only." },
"wordmarkSecondary": { "fontFamily": "Manrope", "fontSize": "20px", "fontWeight": 200, "lineHeight": "28px", "letterSpacing": "0.04em", "$description": "Secondary lockup line: 'design consultants'." },
"headingXL": { "fontFamily": "Manrope", "fontSize": "32px", "fontWeight": 700, "lineHeight": "40px" },
"headingL": { "fontFamily": "Manrope", "fontSize": "24px", "fontWeight": 600, "lineHeight": "32px" },
"headingM": { "fontFamily": "Manrope", "fontSize": "20px", "fontWeight": 600, "lineHeight": "28px" },
"headingS": { "fontFamily": "Manrope", "fontSize": "16px", "fontWeight": 600, "lineHeight": "24px" },
"bodyL": { "fontFamily": "Manrope", "fontSize": "18px", "fontWeight": 400, "lineHeight": "28px" },
"bodyM": { "fontFamily": "Manrope", "fontSize": "16px", "fontWeight": 400, "lineHeight": "24px" },
"bodyS": { "fontFamily": "Manrope", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" },
"caption": { "fontFamily": "Manrope", "fontSize": "12px", "fontWeight": 500, "lineHeight": "16px", "letterSpacing": "0.02em" },
"mono": { "fontFamily": "Roboto Mono", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" }
}
}