Primary
#ff5e1fMain CTA and edge signal.
This preview translates the extracted system into technical surfaces, tight display type, pricing chips, routing modules, and edge diagrams that still read as Cloudflare-like infrastructure without the name.
Thin borders, tiny corners, and an orange signal line communicate control and speed.
Managed rules, rate limits, and mitigation plates.
Global edge latency and operational visibility.
Orange anchors the brand; blue and green mark product lanes.
Docs shift denser and more utilitarian without losing the accent rhythm.
It marks key actions and route states instead of flooding surfaces.
Controlled neutrals do most of the work; one hot orange carries action.
#ff5e1fMain CTA and edge signal.
#ff7038Hover and energized highlight.
#d63c01Active orange feedback.
#ff9910Warm caution state.
#ffffffPrimary field.
#fdfdfcNear-white module plate.
#f9f7f6Warmer paper step.
#151414Dense dark footer field.
#171717Strongest interface ink.
#262626Default copy tone.
#737373Secondary metadata.
#f0e3deWarm chip boundary.
#0a95ffEdge compute lane.
#00bd7dAI status lane.
Moderate headline weights, compressed tracking, and compact body settings keep the system technical instead of plush.
Display — 64px / 500 / 0.99 / -0.025emHero — 56px / 500 / 0.99 / -0.025emTitle LG — 48px / 500 / 1 / -0.025emTitle MD — 32px / 500 / 1 / -0.025emTitle SM — 24px / 500 / 1.2 / -0.025emBody — 16px / 400 / 1.2 / -0.0025emBody Relaxed — 15px / 400 / 1.75 / -0.0025emLabel — 14px / 500 / 1.15 / -0.01emCaption — 13px / 400 / 1.5 / 0Code — 10px / 700 / 1.3 / 0 / IBM Plex MonoButtons stay clean and stable; priority comes from fill and contrast, not bulk.
Cards stay mostly flat, using borders, light tonal steps, and a single soft shadow when needed.
White plate with hairline border and crisp posture.
Explore platformNear-white module using the system’s only soft shadow.
Read case studyOrange-tinted plate for highlighted routes and notices.
Review trafficMinimal comparison plate for chips, rates, and actions.
Utility surface for search, tables, and implementation guidance.
Warm dark panel for dense, infrastructural zones.
The product language is route lanes, policy tables, edge nodes, and pricing chips rather than generic dashboard widgets.
Inputs stay restrained with white fills and simple border-led focus treatment.
Repeatable padding and concise gaps keep sections measurable.
4px8px16px24px40px96pxMost surfaces stay small or medium radius; pills are reserved for chips and selectors.
3pxhero cards, diagram modules8pxinputs, feature cards12pxbuttons, larger controls16pxlarger contained surfaces9999pxpills, taxonomies, small togglesThis brand does not build hierarchy with stacked shadows.
Exact shadow value: none. This is the default state for hero, pricing, and network modules.
Exact shadow value: 0 1px 3px rgba(0,0,0,0.08). Reserved for contained explainer surfaces.
This brand uses flat surfaces. Depth usually comes from color contrast, border cadence, and grouped modules, not from dramatic drop shadows.
Orange signal color, warm-white surfaces, tiny radii, and disciplined spacing drive the system.
:root {
--brand-primary: #ff5e1f;
--brand-accent: #ff7038;
--brand-accent-pressed: #d63c01;
--brand-ink: #171717;
--brand-body: #262626;
--brand-muted: #737373;
--brand-canvas: #ffffff;
--brand-surface: #fdfdfc;
--brand-surface-alt: #f9f7f6;
--brand-border: #f0f0f0;
--brand-border-strong: #f0e3de;
--brand-footer-bg: #151414;
--brand-footer-ink: #f0e3de;
--brand-compute: #0a95ff;
--brand-ai: #00bd7d;
--radius-sm: 3px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
--space-md: 16px;
--space-lg: 24px;
--space-section: 96px;
--shadow-none: none;
--shadow-soft: 0 1px 3px rgba(0,0,0,0.08);
}