richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
82a7b843f899778e348dd4a60e7a3625912e0ba7
Parsons/tokens/semantic/typography.json
Richie 732c872576 Initial commit: FA 2.0 Design System foundation 
Token pipeline (Style Dictionary v4, DTCG format):
- Primitive tokens: colour palettes (brand, sage, neutral, feedback),
  typography (3 font families, 21-variant type scale), spacing (4px grid),
  border radius, shadows, opacity
- Semantic tokens: text, surface, border, interactive, feedback colours;
  typography roles; layout spacing
- Component tokens: Button (4 sizes), Input (2 sizes)
- Generated outputs: CSS custom properties, JS ES6 module, flat JSON

Atoms (3 components):
- Button: contained/soft/outlined/text × primary/secondary, 4 sizes,
  loading state, underline for text variant
- Typography: 21 variants across display/heading/body/label/caption/overline,
  maxLines truncation
- Input: external label, helper text, error/success validation,
  start/end icons, required indicator, 2 sizes, multiline support

Infrastructure:
- MUI v5 theme with full token mapping
- Storybook 8 with autodocs
- Claude Code agents and skills for token/component workflows
- Design system documentation and cross-session memory

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 15:08:15 +11:00

199 lines
13 KiB
JSON
Raw Blame History

{
"typography": {
"$description": "Typography role definitions — 21 variants across 6 categories. Display uses Noto Serif SC (serif, Regular). All other text uses Montserrat. Line-height and letter-spacing use specific values per variant for precise control.",
"displayHero": {
"$description": "Hero display — largest marketing/hero text. Noto Serif SC Regular.",
"fontFamily": { "$value": "{fontFamily.display}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.display.hero}", "$type": "dimension", "$description": "80px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.displayHero}", "$type": "dimension", "$description": "32px mobile" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight", "$description": "400 — serif carries inherent weight at large sizes" },
"lineHeight": { "$value": 1.05, "$type": "number" },
"letterSpacing": { "$value": "-1.5px", "$type": "dimension" }
},
"display1": {
"$description": "Display level 1 — major marketing headings. Noto Serif SC Regular.",
"fontFamily": { "$value": "{fontFamily.display}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.display.1}", "$type": "dimension", "$description": "64px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.display1}", "$type": "dimension", "$description": "28px mobile" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.078, "$type": "number" },
"letterSpacing": { "$value": "-1px", "$type": "dimension" }
},
"display2": {
"$description": "Display level 2 — section hero text. Noto Serif SC Regular.",
"fontFamily": { "$value": "{fontFamily.display}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.display.2}", "$type": "dimension", "$description": "52px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.display2}", "$type": "dimension", "$description": "24px mobile" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.096, "$type": "number" },
"letterSpacing": { "$value": "-0.5px", "$type": "dimension" }
},
"display3": {
"$description": "Display level 3 — prominent section titles. Noto Serif SC Regular.",
"fontFamily": { "$value": "{fontFamily.display}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.display.3}", "$type": "dimension", "$description": "40px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.display3}", "$type": "dimension", "$description": "22px mobile" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.15, "$type": "number" },
"letterSpacing": { "$value": "-0.25px", "$type": "dimension" }
},
"displaySm": {
"$description": "Display small — smallest display text, pull quotes. Noto Serif SC Regular.",
"fontFamily": { "$value": "{fontFamily.display}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.display.sm}", "$type": "dimension", "$description": "32px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.displaySm}", "$type": "dimension", "$description": "20px mobile" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.1875, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"h1": {
"$description": "Heading 1 — page titles. Montserrat Bold.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.3xl}", "$type": "dimension", "$description": "36px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.h1}", "$type": "dimension", "$description": "26px mobile" },
"fontWeight": { "$value": "{fontWeight.bold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.194, "$type": "number" },
"letterSpacing": { "$value": "-0.5px", "$type": "dimension" }
},
"h2": {
"$description": "Heading 2 — section titles. Montserrat Bold.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.2xl}", "$type": "dimension", "$description": "30px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.h2}", "$type": "dimension", "$description": "22px mobile" },
"fontWeight": { "$value": "{fontWeight.bold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.267, "$type": "number" },
"letterSpacing": { "$value": "-0.25px", "$type": "dimension" }
},
"h3": {
"$description": "Heading 3 — sub-section titles. Montserrat Bold.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.xl}", "$type": "dimension", "$description": "24px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.h3}", "$type": "dimension", "$description": "20px mobile" },
"fontWeight": { "$value": "{fontWeight.bold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.292, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"h4": {
"$description": "Heading 4 — minor headings. Montserrat Bold.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.lg}", "$type": "dimension", "$description": "20px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.h4}", "$type": "dimension", "$description": "18px mobile" },
"fontWeight": { "$value": "{fontWeight.bold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.35, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"h5": {
"$description": "Heading 5 — small headings. Montserrat Bold.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.md}", "$type": "dimension", "$description": "18px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.h5}", "$type": "dimension", "$description": "16px mobile" },
"fontWeight": { "$value": "{fontWeight.bold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.389, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"h6": {
"$description": "Heading 6 — smallest heading. Montserrat Bold.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.base}", "$type": "dimension", "$description": "16px desktop" },
"fontSizeMobile": { "$value": "{fontSize.mobile.h6}", "$type": "dimension", "$description": "14px mobile" },
"fontWeight": { "$value": "{fontWeight.bold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.375, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"bodyLg": {
"$description": "Body large — lead paragraphs, introductions. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.md}", "$type": "dimension", "$description": "18px" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.611, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"body": {
"$description": "Body default — main content text. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.base}", "$type": "dimension", "$description": "16px" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.625, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"bodySm": {
"$description": "Body small — helper text, secondary content. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.sm}", "$type": "dimension", "$description": "14px" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.571, "$type": "number" },
"letterSpacing": { "$value": "0px", "$type": "dimension" }
},
"bodyXs": {
"$description": "Body extra-small — fine print, compact content. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.xs}", "$type": "dimension", "$description": "12px" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.5, "$type": "number" },
"letterSpacing": { "$value": "0.1px", "$type": "dimension" }
},
"labelLg": {
"$description": "Label large — prominent form labels, section labels. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.base}", "$type": "dimension", "$description": "16px" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.3125, "$type": "number" },
"letterSpacing": { "$value": "0.1px", "$type": "dimension" }
},
"label": {
"$description": "Label default — form labels, UI text. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.sm}", "$type": "dimension", "$description": "14px" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.286, "$type": "number" },
"letterSpacing": { "$value": "0.15px", "$type": "dimension" }
},
"labelSm": {
"$description": "Label small — compact labels, tag text. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.xs}", "$type": "dimension", "$description": "12px" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.333, "$type": "number" },
"letterSpacing": { "$value": "0.2px", "$type": "dimension" }
},
"caption": {
"$description": "Caption default — fine print, timestamps, metadata. Montserrat Regular.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.xs}", "$type": "dimension", "$description": "12px" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.417, "$type": "number" },
"letterSpacing": { "$value": "0.2px", "$type": "dimension" }
},
"captionSm": {
"$description": "Caption small — compact metadata, footnotes. Montserrat Regular. Min 11px for accessibility.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.2xs}", "$type": "dimension", "$description": "11px — accessibility floor" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.364, "$type": "number" },
"letterSpacing": { "$value": "0.2px", "$type": "dimension" }
},
"overline": {
"$description": "Overline default — section overlines, category labels. Montserrat SemiBold, uppercase.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.xs}", "$type": "dimension", "$description": "12px" },
"fontWeight": { "$value": "{fontWeight.semibold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.333, "$type": "number" },
"letterSpacing": { "$value": "1.5px", "$type": "dimension" }
},
"overlineSm": {
"$description": "Overline small — compact section labels, tab overlines. Montserrat SemiBold, uppercase. Min 11px for accessibility.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.2xs}", "$type": "dimension", "$description": "11px — accessibility floor" },
"fontWeight": { "$value": "{fontWeight.semibold}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.273, "$type": "number" },
"letterSpacing": { "$value": "1.5px", "$type": "dimension" }
}
}
}
Reference in New Issue View Git Blame Copy Permalink