A precise edge-control language for making global network scale, protection layers, developer paths, and plan choices operationally clear.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A precise edge-control language for making global network scale, protection layers, developer paths, and plan choices operationally clear.
Reference style: High-contrast infrastructure storytelling, orange action, dark technical surfaceTypography
STK Bureau Sans
Primary product, navigation, and technical body typography observed in the live site declarations.
STK Bureau Sans, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
FT Kunst Grotesk
Large display and global-network storytelling.
FT Kunst Grotesk, STK Bureau Sans, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, sans-serif
Apercu Mono Pro
Region, traffic, threat, and infrastructure metadata cues.
Apercu Mono Pro, ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Canvas light
#f7f8faPrimary light page or work field
Canvas dark
#10161fPrimary dark page or work field
Surface light
#ffffffRaised content surface in light mode
Surface dark
#17202bRaised content surface in dark mode
Border
#d9dee6Low-contrast separation and control edges
Ink
#18212dPrimary text and interface content
Muted ink
#637083Supporting copy and metadata
Accent
#f48120Primary action, selection, or brand signal
Accent strong
#c45e08Pressed and high-contrast action state
Accent soft
#ffead6Tinted selection or supporting surface
Secondary signal
#27a39aCollaboration, health, or growth cue
Tertiary signal
#7d8be7Human, warm, or threat cue
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 100px / 48px mobile | 400–700 | 0.9 / 1 | -0.06em |
| Section | 64px / 40px mobile | 400 | 0.95 / 1 | -0.045em |
| Control heading | 28px / 23px mobile | 600 | 1.05 | -0.025em |
| Body large | 24px / 18px mobile | 400 | 1.2 / 1.4 | -0.02em |
| Body | 16px / 15px mobile | 400 | 1.5 | 0 |
| Technical label | 12px | 400 | 1.2 | 0.05em |
Spacing & shape
Iconography
Use currentColor, reserve filled treatments for active protection or status, and pair every security state with a plain-language label. Use original CSS-built network geometry in the pack.
System metrics
Radius
Spacing
Motion
Elevation
Control card
0 10px 28px rgba(17,27,39,.12)Lift a decision card from the network field
Status layer
inset 0 0 0 1px rgba(255,255,255,.08)Use borders and inset contrast on dark operational surfaces
Surfaces & shape
Cloud canvas
#f7f8faOpen marketing field
Dark edge
#10161fTechnical network and control surface
Orange
#f48120Primary build/protect action
Signal teal
#27a39aOperational health and network cue
Guidelines
Imagery
Use CSS-built network nodes, traffic paths, globe arcs, latency bars, threat counters, and protection layers. Avoid Cloudflare logos, copied diagrams, screenshots, customer marks, or downloaded illustrations. Every visual must explain reach, protection, developer deployment, or a plan tradeoff.
Layout
Open with the Region: Earth/global-network promise and a high-contrast start-building action, then sequence network proof, product-family tabs for Network & CDN / SASE and Zero Trust / Compute & Storage, protection layers, traffic signals, and Free / Pro / Business / Contract plans. Keep operational controls compact and labelled. On mobile, stack the product family panels and keep the orange action and status language visible without horizontal overflow.
Assigned collection
13 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
