Webflow Style Guide

KINETIC Design System

Canonical reference for colors, typography, spacing, and components. Configure in Webflow Variables before building any section.

01 — Color Tokens

Background

#060e20

Surface

#0f1930

Raised

#141f38

Overlay

#1f2b49

Accent Cyan

#81ecff

Accent Blue

#70aaff

Ink Primary

#dee5ff

Ink Secondary

#a3aac4

Ink Tertiary

#6d758c

Success

#3cffa0

Warning

#ffd27a

Error

#ff716c

02 — Typography Scale

Display — Syne 800 — clamp(3.5rem, 7vw, 6rem)

The Infrastructure of Now.

H2 — Syne 800 — clamp(2rem, 4vw, 3.25rem)

Built for elastic scale.

Body Large — Outfit 400 — 1.125rem

Engineered for hyper-velocity data ingestion and edge-optimized distribution at planetary scale.

Eyebrow — JetBrains Mono — 0.7rem

Platform Architecture

Mono Text — JetBrains Mono — 0.875rem

INGEST_NODE_04: PACKET_RECEIVED (4.2kb) — CHECKSUM OK

03 — Buttons

04 — Spacing Scale (4px base)

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px