Style guide

Référence vivante du design system ZML : couleurs, typographie, liens, blocs d'interface et de contenu. Tout est issu des tokens (assets/css/tokens.css) — cette page reflète toujours l'état réel du site.

Couleurs

--paper
#ffffff · Cadre de page
--night
#0b0b0b · Panneau sombre (home)
--panel-light
#fdfdfc · Panneau clair
--cream
#efe5cd · Texte sur fond sombre
--cream-card
#f7eed6 · Carte vignette
--gold
#d9c996 · Accent sur fond sombre
--green
#014c21 · Accent sur fond clair
--green-soft
#306d4a · Dégradés de carte
--bronze
#3e2e07 · Texte chaud sur clair
--ink-strong
#0e0e0e · Titres sur clair
--ink-body
#1c1c1c · Corps sur clair

Typographie

--fs-h1 · 68px
Inria Serif 700 · lh 1.08
Titre d'article

Introducing ZML/LLMD

--fs-statement · 42px
Inria Serif 700 · lh 1.24
Manifeste centré

Explicit over implicit.

--fs-standfirst · 28px
Inria Sans 400 · lh 1.25
Chapeau d'article

Frontier performance across devices

--fs-h2 · 26px
Inria Serif 700 · lh 1.2
Intertitre d'article

Why a rewrite

--fs-item-title · 24px
Inria Serif 700 · lh 1.1
Titre d'item publication

10x faster tokenization

--fs-body · 17px
Inria Sans 400 · lh 1.65
Corps d'article

ZML is an inference stack built close to the hardware. It lowers models directly onto NVIDIA, AMD, TPU and Trainium targets from a single codebase.

--fs-prose-compact · 15px
Inria Sans 400 · lh 1.6
Prose des pages à blocs

Compiled directly to NVIDIA, AMD, TPU, Trainium for peak hardware performance on any accelerator. No rewriting.

--fs-meta · 15px
Inria Sans 400/700
Dates, nav, actions

Mar 30, 2026

--fs-caption · 14px
Inria Sans 300
Légendes

Marie Curie - Pionnière de la radioactivité.

Liens, chips & actions

Lien nav Chip actif Mar 30, 2026 – Chip date Read Lien dans la prose
Read Texte crème Accent or

Vignette publication (hover : blend luminosity → normal)

Bloc de code (Zig, coloration au build)

zig example.zig
const std = @import("std");
const zml = @import("zml");

pub fn main() !void {
    var ctx = try zml.Context.init(.{ .platform = .auto });
    defer ctx.deinit();
}

Espacements

--s-1
8px
--s-2
12px
--s-3
16px
--s-4
24px
--s-5
40px
--s-6
64px
--s-7
96px