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 1.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.

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif

Heading

var(--sg-font-heading)

Shared data, without the friction.

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif

Monospace

var(--sg-font-mono)

style=guide version=1.0.0

SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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 3rem weight 300 line-height 1.2 -0.02em heading
Make the complex feel simple.
Heading 1 2.5rem weight 500 line-height 1.2 -0.015em heading
Shared data, without the friction
Heading 2 2rem weight 500 line-height 1.25 -0.01em heading
One source of truth
Heading 3 1.75rem weight 500 line-height 1.3 normal heading
Built for integration
Heading 4 1.5rem weight 500 line-height 1.35 normal heading
Move data with confidence
Heading 5 1.25rem weight 500 line-height 1.4 normal heading
Publish once, use everywhere
Heading 6 1rem weight 500 line-height 1.5 normal heading
Section label
Body 1rem weight 400 line-height 1.55 normal body
Datatakzi gives independent software vendors a common language for sharing data. Publish a model, extend it on your terms, and keep every integration moving.
Small 0.875rem weight 400 line-height 1.5 normal body
Supporting detail and helper text.
Code 0.875rem 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>