fundamentals

Typography

Maintain consistent typography styles and sizes

Using a pre-defined set of styles reduces guesswork, typography is automatically scaled via various device sizes an H1, H2 on desktop will automatically adjust its size on tablets and mobile devices both in design and development using variable modes & predefined css.

Text Playground

Heading 2Levy Chronicles

In a seafaring empire, the treasury ran thin after a winter of failed harvests and costly patrols. The regent's council needed revenue fast, and the merchant guild refused new tariffs on grain or sailcloth.

Heading 4The Regent's Edict

Within a week, heralds posted notices along the docks. No ship could depart without a stamped chart, and every chart would carry a fee. The regent called it a fair contribution from those who profit from the sea.

"If every voyage begins with a chart," the regent declared, "then every chart should begin with a coin."
Heading 6Cartographers' Revolt

The port constable tore the notices down. The next night, a flotilla of fishing skiffs set lanterns in a long line over the dangerous bar and rang bells until dawn. Dockworkers joined, then pilots, then the insurers who had grown tired of paying for ignorance.

Heading 6The Admiralty Levy: A New Era of Navigation Fees
  • Harbor plans: 2 silver per copy for detailed maps of local docks and facilities.
  • Coastal routes: 5 silver for guides covering popular trade paths and hazards.
  • Open-ocean atlases: 20 silver for extensive charts that include currents.
Heading 6Frequently asked questions

Heading Font Specs

Heading 1
Font Size: 64pxWeight: BoldLine Height: 72pxLetter Spacing: 0%
Heading 2
Font Size: 48pxWeight: BoldLine Height: 56pxLetter Spacing: 0%
Heading 3
Font Size: 40pxWeight: BoldLine Height: 48pxLetter Spacing: 0%
Heading 4
Font Size: 32pxWeight: BoldLine Height: 40pxLetter Spacing: 0%
Heading 5
Font Size: 24pxWeight: BoldLine Height: 32pxLetter Spacing: 0%
Heading 6
Font Size: 20pxWeight: BoldLine Height: 28pxLetter Spacing: 0%

Body Font Specs

Body 18
Font Size: 18pxWeight: RegularLine Height: 28pxLetter Spacing: -1%
Body 16
Font Size: 16pxWeight: RegularLine Height: 24pxLetter Spacing: -1%
Body 14
Font Size: 14pxWeight: RegularLine Height: 20pxLetter Spacing: -1%
Body 13
Font Size: 13pxWeight: RegularLine Height: 16pxLetter Spacing: -1%
Body 12
Font Size: 12pxWeight: RegularLine Height: 16pxLetter Spacing: -1%

Changing Font Family

By default, the design system uses the Inter font for body and Geist for headings. To change the font family globally, you can override the CSS variable --body-font and --heading-font in your global styles or theme configuration.


If you are using Next Js, you can also use the next/font package to load custom fonts. In Vite or other setups, you can import fonts directly in your CSS from Google Fonts.


globals.css