Display
Bricolage Grotesque
Kina is a language for tensors.
- Token
--family-display- CSS
var(--font-display)- Weights
- 500
- Used for
- Hero display and page titles (.display, .title).
Design · Type
Typography
Three families, a fluid modular scale, and a short list of roles. This page renders the same tokens and classes the rest of the site already uses. Do not invent a fourth family or a raw step on a page — add a role instead.
Families
The three voices
Display for scarce headlines, sans for reading, mono for the language itself.
Sans
DM Sans
The compiler lowers typed programs to textual MLIR.
- Token
--family-sans- CSS
var(--font-sans)- Weights
- 400 / 550 / 600 / 650
- Used for
- Body copy, section titles, tiles, actions, and prose headings.
Mono
IBM Plex Mono
fn main() -> Tensor[f32; 2, 2]
- Token
--family-mono- CSS
var(--font-mono)- Weights
- 400 / 500
- Used for
- Kickers, chips, brand, code, figure labels, and the colophon.
Scale
Modular steps
Viewport-clamped steps from --step--2 to --step-5. Body is step 0 at 1.6 line-height. Measure is 66ch. The ladder shows size only; family is a separate choice.
- Display
- Page title
- Section heading
- Secondary heading
- Supporting line
- Body copy sits here.
- Caption and chrome
- Kicker
Roles
Type roles in use
Prefer these classes over ad-hoc sizes. If a new surface needs a size that is not here, add a role.
.kicker
IBM Plex Mono 500 · step−2 · uppercase · 0.16em tracking · Pelorous
Phase 1
Eyebrow above a title. Names the topic; it is not decorative Latin.
.display
Bricolage Grotesque 500 · step-5 · −0.04em tracking · line-height 1.02 · max 18ch
Typed tensors. Honest status.
Landing hero only. One thought, then stop.
.title
Bricolage Grotesque 500 · step-4 · −0.035em tracking · line-height 1.1
Language overview
Interior page title under the kicker.
.section
DM Sans 650 · step-3 · −0.025em tracking
What the compiler does
In-page section heading. Not Bricolage — display stays scarce.
.lede
DM Sans 400 · step-1 · muted ink · line-height 1.55
Kina is a research language for typed tensor programs. The bootstrap compiler is written in OCaml and lowers typed programs to textual MLIR.
One or two sentences under a title. Explains the page; it does not repeat the title.
.tile-title
DM Sans 650 · step-2 · −0.02em tracking
Reverse-mode AD
Card heading. Keep it short enough to scan in a three-column grid.
.tile-name
IBM Plex Mono 500 · step-0
storylm0_forward.kina
Example filenames and other identifiers inside a tile.
.tile-copy
DM Sans 400 · step−1 · muted ink · line-height 1.45
What the compiler, runtime, and site actually do today.
Supporting line on a card. One claim.
.brand
IBM Plex Mono 500 · step−1 · uppercase · 0.14em tracking
Kina.ai
Masthead wordmark. The .ai suffix is Pelorous.
.chip
IBM Plex Mono 400 · step−2 · pill · muted ink
StoryLM-0 is a forward graph
Fact, not a link. Used under the landing hero.
.figure-label
IBM Plex Mono 400 · step−2 · 0.04em tracking · muted ink
From the StoryLM-0 forward graph — compile and numerical check
Caption above a code figure.
.action
DM Sans 550 · step−1 · pill · line-height 1
Control label. Color and border belong to the action page; the type role lives here.
Prose
Reading column
Doc and language pages wrap Markdown in .prose. Headings step down from the page title; body stays DM Sans. Measure stays 66ch.
Language overview
Kina is an AI-native programming language targeting tensors natively. The bootstrap compiler is written in OCaml, accepts the .kina surface, and lowers typed programs to textual MLIR.
What this page is for
Use the prose column for explanation. Keep sentences short. Put code in a fence, not in the middle of a claim.
A smaller heading
Inline Tensor[f32; B, T, D] stays IBM Plex Mono. Lists and tables inherit the same measure.
fn main() -> Tensor[f32; 2, 2] {
[[1.0, 0.0], [0.0, 1.0]]
}Next
The rest of the catalog
Color, space, and actions have their own pages. Page shells and recipes live on Structure. Space defines the tile grid; masonry stays opt-in.