Foundations

Fonts

A compact type system built around two families: one for reading, one for structure, and a monospaced face for technical content.

Published Version 2.0.0 3 families

Families

The stacks favour platform-native faces, so text feels at home on every operating system without downloading a font.

Body

var(--sg-font-body)

Datatakzi makes shared data feel ordinary.

-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif

Heading

var(--sg-font-heading)

Shared data, without the friction.

-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif

Monospace

var(--sg-font-mono)

style=guide version=2.0.0

"SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace

Type scale

Each step is tuned for its role. Display and headings tighten their tracking as they grow, while body copy keeps a comfortable measure and rhythm.

Display 4rem weight 600 line-height 1.05 -0.045em heading
Designed to disappear.
Heading 1 3rem weight 600 line-height 1.07 -0.03em heading
A calmer way to share.
Heading 2 2.25rem weight 600 line-height 1.1 -0.02em heading
Clarity at every step
Heading 3 1.75rem weight 600 line-height 1.15 -0.015em heading
Quietly capable
Heading 4 1.375rem weight 600 line-height 1.2 -0.01em heading
Considered details
Heading 5 1.125rem weight 600 line-height 1.25 -0.005em heading
Content first
Heading 6 1rem weight 600 line-height 1.3 normal heading
Section label
Body 1.0625rem weight 400 line-height 1.6 -0.005em body
The best interfaces feel inevitable. Generous spacing, a narrow measure and a restrained palette let the content do the talking while the controls stay close at hand.
Small 0.875rem weight 400 line-height 1.45 normal body
Fine print and supporting detail.
Code 0.9375rem weight 400 line-height 1.5 normal mono
npm install @datatakzi/styleguide --save

Using the scale

Headings are available through both semantic elements and utility classes. Body copy uses the default paragraph styling from the published stylesheet.

<h1 class="sg-h1">A calmer way to share</h1>
<p class="sg-body">The best interfaces feel inevitable.</p>
<span class="sg-eyebrow">Foundations</span>
<code class="sg-code">npm install @datatakzi/styleguide</code>