Design Type System
Dark Scheme

Design System — Typography

Created by Diego De Nicola.

H1: abcde ABCDE 12345

H2: abcde ABCDE 12345

H3: abcde ABCDE 12345

H4: abcde ABCDE 12345

H5: abcde ABCDE 12345
H6: abcde ABCDE 12345

Paragraph Text Small

Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Paragraph Text Medium/Default

Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Paragraph Text Large

Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Paragraph Text XLarge

Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Paragraph Text XXLarge

Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Font Weights

100 Thin

200 Extra Light

300 Light

400 Book

500 Medium

600 Bold

Baseline Grid

We follow a 8px baseline grid for achieving a vertical rhythm on all block-level elements in the app.

Paragraphs

The default body text is 16px. For optimum reading length, the paragraph width is capped at 624px.

H1: heading size Large Weight 100

The fat polite cyclops tirelessly hacks the solid rock to 89 fine pieces.

H1: heading size Xlarge Weight 400

New York artist market.

H1: heading size XXlarge Weight 500

OK!

Im bold

H1: heading size 132.468em Weight 600

Th

Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Font Weights

100 Thin

200 Extra Light

300 Light

400 Book

500 Medium

600 Bold