Typography

logic2b sets a deliberate single-family system: Inter carries everything — display type, headings, body copy, navigation and UI chrome — differentiated by weight and tracking instead of by family. Headings tighten their tracking and compress line-height; body stays comfortable. Code and technical metadata use the system monospace stack. The webfont is self-hosted via @fontsource-variable, so there’s no third-party font request.

The tokens are --font-heading, --font-sans (both Inter by default) and --font-mono. Headings (h1–h4) inherit --font-heading from the base layer; everything else defaults to --font-sans. Projects can point --font-heading at a display family of their own (the theme studio offers several) without touching any component.

Heading

Headings use Inter 600–700 with negative tracking. Keep line-height compressed at display sizes.

Subheading

The third level steps down in size but holds the same voice.

Paragraph

Body text is Inter at 16px with a 1.5 line-height and a hair of negative tracking. It should stay comfortable to read in long form, never dipping below 12px, and it never mixes fonts inside a block.

Blockquote

Depth never comes from shadows; it comes from the luminance ladder and hairline borders. Restraint everywhere.

List

• Route every color through semantic tokens (text-foreground, text-muted-foreground).
• One family, many voices: differentiate with weight and tracking, not fonts.
• Reserve color for chart series and the destructive state.

Inline code

Wrap technical tokens in inline code — it renders in the monospace stack on a muted surface, e.g. npx logic2b@latest add button.

Table

Utilities

Apply the families directly with Tailwind when you step outside the defaults:

<h2 className="font-heading tracking-tighter">Foundation</h2>
<p className="font-sans text-muted-foreground">Monochrome discipline.</p>
<code className="font-mono">--radius: 0.625rem</code>