Cloaked Design SystemFoundations

Typography

Give the message a clear hierarchy. Compare the real type styles, try your own words, and see each role in context.

Implementation preview

Give the words the right hierarchy

Try the type roles with your own content. Compare the whole style: family, size, weight, line height, and spacing.

Live exampleReact · shared implementation

Try the controls. Your changes stay in this example.Open example

COMPLETE STORYBOOK REFERENCE

Every example. In one place.

Explore every named example, including states, compositions, and theme variants.

2 stories

Typography selectedOpen canvas

Example source

packages/design-system/src/foundations/Foundations.stories.tsxExport Typography

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Full story catalog JSON ↗

Choose with the experience in mind

Use the whole style

Keep family, weight, size, line height, and letter spacing together. Changing only the size creates a different style from the one shown here.

Give each family a job

The current web sans stack follows the platform system font. Simula supplies the editorial serif, and mono gives identifiers a consistent rhythm. Documentation chrome has its own brand sans treatment.

Let real content set the test

Try long headings, short labels, and identifiers. Allow wrapping, preserve text scaling, and check narrow layouts rather than truncating meaningful content to fit a specimen.

Keep the exact definition close

These values come directly from the design-owned source. Aliases, expressions, theme selectors, and source files are retained.

Full typography reference 75 definitions

Source value	Selector	Source file
`-apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif`	`:root`	`packages/design-system/src/tokens/typography.css`
`ui-monospace, 'SF Mono', Menlo, monospace`	`:root`	`packages/design-system/src/tokens/typography.css`
`'Simula', Georgia, serif`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`4.5rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`3rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-serif)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`2rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`-0.02em`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-serif)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.75rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-serif)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.5rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`2rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.75rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.5rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.25rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.2`	`:root`	`packages/design-system/src/tokens/typography.css`
`0.005em`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`510`	`:root`	`packages/design-system/src/tokens/typography.css`
`1rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.2`	`:root`	`packages/design-system/src/tokens/typography.css`
`-0.02em`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`1rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.3`	`:root`	`packages/design-system/src/tokens/typography.css`
`-0.02em`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`0.875rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.2`	`:root`	`packages/design-system/src/tokens/typography.css`
`-0.02em`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`400`	`:root`	`packages/design-system/src/tokens/typography.css`
`0.75rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.3`	`:root`	`packages/design-system/src/tokens/typography.css`
`0`	`:root`	`packages/design-system/src/tokens/typography.css`
`var(--cds-font-sans)`	`:root`	`packages/design-system/src/tokens/typography.css`
`600`	`:root`	`packages/design-system/src/tokens/typography.css`
`0.6875rem`	`:root`	`packages/design-system/src/tokens/typography.css`
`1.1`	`:root`	`packages/design-system/src/tokens/typography.css`
`0.06em`	`:root`	`packages/design-system/src/tokens/typography.css`
`1`	`html`	`packages/design-system/src/tokens/typography.css`
`var(--pui-font-scale)`	`html`	`packages/design-system/src/tokens/typography.css`

Design-owned preview Version 0.2.0-preview.1 75 definitions

Build from the same decisions

Give an agent the guidance, source values, and working example together.

Agent handoff

Use the Cloaked typography foundations.
Read https://design.cloaked.team/data/foundations/typography.json first.
Use the exact token names, values, and theme selectors in this contract.
Check the shared foundation-typography example and preserve its visual intent.
Verify keyboard access, both themes, responsive layout, and reduced-motion behavior where applicable.
Treat this design-owned version as an implementation preview, pending sign-off.

Typography contract JSON Complete token source JSON Build with an agent Guide

Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1