// COLOURS
Near-black canvas, white type, a single coral-red accent. The chromatic story is monochrome plus one signature hue — all atmosphere comes from polarity, not from gradient.
// TYPOGRAPHY
waldenburgNormal across every level — display through caption — with IBM Plex Mono reserved exclusively for technical eyebrows and small-caps labels. Inter is the open-source fallback at -0.04em tracking on display sizes.
// BUTTONS
Pill primary buttons (rounded.full) for marketing CTAs paired with sharply-cut application radii (3–6px) for in-product Studio screenshots. Mixing the two corner languages is intentional.
// BRAND MARK
The brand-dot + Saniti wordmark lockup. The dot is the system's primary identification mark — never replace it with a logo glyph.
// CARDS
Three card variants — dark, brand, and light — mapped to the polarity of their parent section.
// DARK
The default dark-section feature card. Canvas-soft infill on canvas with optional hairline-soft border.
// BRAND
The rare brand-coloured highlight card. Used at most once per page to anchor the eye against the dark canvas.
// LIGHT
Light-section feature tile — canvas-light fill, hairline border, ink text. Reads like a print-magazine spread.
// PRICING
4-tier grid where the featured tier is signalled by full-fill ink inversion — no ribbon, no border treatment. The polarity flip is the badge.
Free
For solo developers exploring the platform.
$0 / month
Growth
For teams shipping content at scale.
$99 / month
Enterprise
Inverted polarity is the badge.
Custom
Custom
For unique, large-scale deployments.
Talk to us
// STUDIO WINDOW
Every Studio-product screenshot is framed inside the studio-window chrome — sharp 6px radius, three macOS-style traffic lights, canvas-soft body. The mockup signals "real product, not marketing diagram."
// Saniti Studio — content schema
export default {
name: 'article',
type: 'document',
fields: [
{ name: 'title', type: 'string' },
{ name: 'body', type: 'array', of: [{ type: 'block' }] },
],
}
// FORMS
Light text-input on canvas-light with 3px application-grade radius and hairline border. Dark text-input variant on canvas for in-product Studio mockups.
// POLARITY-FLIP
Saniti's signature depth cue — adjacent dark and light stripes form a hard cut that reads as a strong layout statement. The polarity flip is the section divider, never a horizontal rule.
// DARK STRIPE
The brand voice. Oversized editorial headlines on near-black canvas with white type and a single accent.
// LIGHT STRIPE
The pricing voice. White canvas, dense reading rhythm, ink type, hairline rules. Same type system, opposite polarity.
// SPACING
8px base unit with 4px micro-steps. Section vertical rhythm uses 96px between major modules.
// RADIUS
Application-grade 3–6px radii for in-product UI; 12px for marketing cards; full pills for marketing CTAs.
// ELEVATION
Depth is delivered by tonal surface stepping (canvas → canvas-soft → canvas-light) and by the polarity flip — never by heavy drop shadows.
// RESPONSIVE
Eight breakpoints. Display headlines step from 112px down to 64px on the smallest viewport; pricing collapses 4-up → 2-up → 1-up; section polarity flips are preserved at every breakpoint.
| Breakpoint | Width | Key Changes |
|---|---|---|
| 2xl | 1640px | Full editorial container; pricing 4-tier wide. |
| xl | 1440px | Display-mega may step down to 96px. |
| lg | 1200px | Default desktop reading view. |
| md | 1100px | Pricing 4-up but tighter. |
| sm | 960px | Pricing collapses to 2 columns; nav hamburger. |
| xs | 768px | Section padding drops; display sizes step down. |
| xxs | 480px | Single-column reading; display-mega → 64px. |
| xxxs | 376px | Footer collapses to 2-column; brand-dot 10px. |