Typography

1
2
3
4
5
--df-text-sm
--df-font-sans
--df-font-weight-semibold
--df-tracking-tight
--df-leading-5

1
2
3
4
5
6
7
<p className="text-sm">
  Uses --df-text-sm and the paired default leading.
</p>
 
<p className="text-sm leading-7">
  Same size, explicit leading override.
</p>

1
2
3
<p className="font-sans">Interface copy</p>
<code className="font-mono text-xs">--df-neutral-500</code>
<h1 className="font-heading text-3xl font-semibold">Title</h1>

1
2
3
4
5
6
<p className="text-sm font-semibold tracking-tight">
  Panel title
</p>
<p className="text-11 font-semibold uppercase tracking-label text-muted-foreground">
  Controls
</p>

1
2
3
<span className="text-11 font-medium tracking-wide text-muted-foreground">
  Density
</span>

1
2
3
4
5
6
<div
  style={{
    fontSize: "var(--df-text-sm)",
    lineHeight: "var(--df-leading-5)",
  }}
/>

1
2
3
<code className="rounded bg-muted px-1 py-0.5 font-mono text-[length:var(--df-text-relative-sm)]">
  data-df-color-scale
</code>

1
2
3
<p className="text-11 font-semibold uppercase tracking-wider text-muted-foreground">
  Layers
</p>

1
2
3
<h1 className="font-bricolage text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
  Typography
</h1>

1
2
3
<p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
  Browse the scale, then read the usage guide below.
</p>