Paul Roberts
af2af23d14
Lint / lint (push) Has been cancelled
- 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>
55 lines
1.3 KiB
CSS
55 lines
1.3 KiB
CSS
:root {
|
|
--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;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Manrope", system-ui, sans-serif;
|
|
color: var(--color-text-default);
|
|
background: var(--color-brand-canvas);
|
|
}
|
|
|
|
.container { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
|
|
|
|
.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);
|
|
color: #fff;
|
|
border: 0;
|
|
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:active { background: var(--color-brand-primary-pressed); }
|