// COLOURS

## Color Palette

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.

Brand & Accent

Brand

#f36458

Coral-red signature accent. One CTA per viewport.

Brand Deep

#dd0000

Error/destructive variant only.

Primary

#0b0b0b

Default canvas + ink colour.

Surface

Canvas

#0b0b0b

Default dark-section background.

Canvas Soft

#212121

Card surface inside dark sections.

Canvas Light

#ffffff

Pricing & light-mode background.

Canvas Paper

#ededed

Warm-grey alternate light surface.

Hairline Soft

#353535

Border on dark cards.

Hairline

#ededed

Border on light cards, dividers.

Surface Blue

#afe3ff

Soft-blue alert surface.

Text

Ink

#0b0b0b

Headlines & body on light.

Ink Soft

#212121

Secondary text on light.

Graphite

#353535

Tertiary text on dark.

Slate

#3c4758

Cool blue-grey link text.

Slate Soft

#505b6c

De-emphasized rule lines.

Mute

#797979

Mid-grey caption colour.

Ash

#b9b9b9

Default body on dark.

On Primary

#ffffff

Headline colour on dark.

Semantic

Link Blue

#0052ef

Inline link on light.

Link Blue Soft

#55beff

Link colour on dark.

Success

#37cd84

Validation success.

Error

#dd0000

Required-field markers.

// TYPOGRAPHY

## Typography Scale

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.

display-mega112 · 400 · 1.0 · -4.48px
Structure
display-xl72 · 400 · 1.05 · -2.88px
Loved by 1M+ users
display-lg60 · 400 · 0.8 · 0
Tightly leaded
display-md48 · 400 · 1.08 · -1.68px
Standard section headline
display-sm38 · 400 · 1.10 · -1.14px
Sub-section heads
heading-md32 · 425 · 1.13 · -0.32px
Card title
heading-sm24 · 400 · 1.10 · -0.24px
Feature card title
subtitle18 · 400 · 1.5 · -0.18px
Hero sub-copy and lead paragraphs.
body16 · 400 · 1.5 · 0
Default running body across both themes.
body-sm15 · 400 · 1.5 · -0.15px
Comparison-table cells, mid-density reading copy.
caption13 · 400 · 1.5 · 0
Card captions and list-item meta.
caption-tight13 · 500 · 1.3 · -0.13px
Tight metadata and button-sm.
meta12 · 400 · 1.5 · -0.12px
Footnotes and fine print.
mono-eyebrow13 · 400 · IBM Plex Mono
// SECTION EYEBROW
mono-caps11 · 400 · IBM Plex Mono
FOOTER COLUMN HEAD
mono-micro10 · 400 · IBM Plex Mono
tag-chip-label
button-lg16 · 500 · 1.5
Get Started Free
button-sm13 · 500 · 1.3 · -0.13px
Book a Demo
button-uppercase11 · 600 · uppercase
CONTENT

// BUTTONS

## Button Variants

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

## Brand Mark

The brand-dot + Saniti wordmark lockup. The dot is the system's primary identification mark — never replace it with a logo glyph.

Saniti
Saniti

// CARDS

## Feature Cards

Three card variants — dark, brand, and light — mapped to the polarity of their parent section.

// DARK

### Structured content

The default dark-section feature card. Canvas-soft infill on canvas with optional hairline-soft border.

// BRAND

### Coral accent

The rare brand-coloured highlight card. Used at most once per page to anchor the eye against the dark canvas.

// LIGHT

### Editorial light tile

Light-section feature tile — canvas-light fill, hairline border, ink text. Reads like a print-magazine spread.

// PRICING

## Pricing Tiers

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

- 3 users
- 1 project
- Community support

Growth

For teams shipping content at scale.

$99 / month

- 20 users
- Unlimited projects
- Standard support

Enterprise

Inverted polarity is the badge.

Custom

- Unlimited users
- SSO + SOC 2
- Dedicated CSM

Custom

For unique, large-scale deployments.

Talk to us

- Custom limits
- Bespoke contracts
- Account manager

// STUDIO WINDOW

## 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

## Form Elements

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.

Email
Project name
Notes
Email (dark)
API key
Heads up — the soft-blue alert is the only chromatic surface fill in the system.
badge-neutral badge-filled

// POLARITY-FLIP

## Polarity-Flip Section Rhythm

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

### Structure powers intelligence.

The brand voice. Oversized editorial headlines on near-black canvas with white type and a single accent.

// LIGHT STRIPE

### Built for commercial clarity.

The pricing voice. White canvas, dense reading rhythm, ink type, hairline rules. Same type system, opposite polarity.

// SPACING

## Spacing Scale

8px base unit with 4px micro-steps. Section vertical rhythm uses 96px between major modules.

xxs · 4
xs · 8
sm · 12
md · 16
lg · 24
xl · 32
xxl · 48
section · 64
section-lg · 96

// RADIUS

## Border Radius

Application-grade 3–6px radii for in-product UI; 12px for marketing cards; full pills for marketing CTAs.

none · 0
app-xs · 3
app-sm · 4
app-md · 5
app-lg · 6
marketing · 12
full · pill

// ELEVATION

## Elevation & Depth

Depth is delivered by tonal surface stepping (canvas → canvas-soft → canvas-light) and by the polarity flip — never by heavy drop shadows.

Flat (Dark)
Card (Dark)
Card (Light)
Inverted Featured

// RESPONSIVE

## Responsive Behavior

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.