feat(tokens): define global design tokens and typography scale
- Created `src/styles/tokens.css` establishing the canonical 10-color palette, 5 designated breakpoints, and the 6-step typography scale. - Created `src/styles/base.css` to import the root variables for Astro components. - Wrote down decisions regarding the `--blue` palette canonicalization and the font stack simplification in the task brief. - These tokens will power the Astro component refactors in parallel tasks.
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
/* Palette */
|
||||
--accent: #7c78a8;
|
||||
--blue: #527f9f;
|
||||
--deep: #102536;
|
||||
--gold: #efc76b;
|
||||
--ink: #172f42;
|
||||
--line: #d8dee2;
|
||||
--muted: #697b89;
|
||||
--paper: #f5f4f1;
|
||||
--red: #a7483f;
|
||||
--violet: #6b668f;
|
||||
|
||||
/* Typography Scale */
|
||||
--step-display: clamp(56px, 9vw, 126px);
|
||||
--step-6: clamp(36px, 5vw, 65px);
|
||||
--step-5: clamp(24px, 3vw, 38px);
|
||||
--step-4: clamp(22px, 3vw, 36px);
|
||||
--step-1: 15px;
|
||||
--step-0: 11px;
|
||||
|
||||
/* Breakpoints */
|
||||
--bp-sm: 560px;
|
||||
--bp-md: 800px;
|
||||
--bp-lg: 1100px;
|
||||
--bp-xl: 1600px;
|
||||
--bp-2xl: 2200px;
|
||||
}
|
||||
Reference in New Issue
Block a user