Overview

RocketX's marketing surface is a deep-space dark canvas ({colors.bg} — #04060F) carrying condensed all-caps Bebas Neue headlines at massive sizes (up to 128px) with tight line-heights around 0.90–0.95. The brand is dark-only — there is no light-mode surface anywhere. Structure stays minimal: layered near-black navies build depth without explicit dividers, and hairline borders ({colors.border} — #1A1F35) do the separating work that shadows would in other systems.

Brand energy comes from exactly one accent colour — hot-magenta {colors.magenta} (#C8316A). It appears on every CTA, every eyebrow label, every stat figure, every icon stroke, and every signature glow. Nothing else is chromatic. The WhatsApp green {colors.whatsapp} (#25D366) is a utility-only exception confined to a single floating button.

Type voice uses three families with hard role-separation: Bebas Neue for every display headline, DM Sans for body and buttons, JetBrains Mono for eyebrow labels, tags, and micro-copy. The display effect is achieved through size and tight line-height at regular weight — Bebas Neue is never scaled down to body sizes, and DM Sans is never used for headlines.

Key Characteristics:

Deep-space dark canvas ({colors.bg} — #04060F) alternating with {colors.bg-alt} (#080C18) between sections, with near-white {colors.text} (#F0F2FF) type. No light surfaces exist.
Condensed all-caps Bebas Neue at huge sizes (36–128px), tight line-heights (0.90–1.0). The size creates the display impact, not weight.
Every content section follows a fixed three-beat pattern: mono eyebrow in magenta → Bebas headline in all-caps → muted slate intro paragraph that ends with a bold white payoff sentence.
One accent, absolute discipline. {colors.magenta} (#C8316A) is the only chromatic colour across the entire system. It lives on CTAs, eyebrow labels, stat figures, icon strokes, and glows. A second hue is never introduced.
Borders are always {colors.border} (#1A1F35) hairlines — never rgba stacks or solid greys on backgrounds. Surfaces are separated by borders, not by shadows.
Glassmorphism is confined to a single component: the hero badge pill ({colors.overlay} fill, {colors.border-faint} border, blur(8px)). Blur does not appear elsewhere.
Generous vertical rhythm: ~100px between sections; {spacing.space-6} / {spacing.space-8} inside cards.

Colors

Brand Accent

Magenta ({colors.magenta} — #C8316A): THE brand accent. Used on CTAs, eyebrow labels, stat figures, icon strokes, border accents, and glow effects. The only chromatic colour in the system — every other colour is a navy, near-black, or near-white.
Magenta Glow ({colors.magenta-glow} — rgba(200,49,106,0.60)): The signature glow effect applied to hero emphasis words and the primary CTA shadow.
Magenta Soft ({colors.magenta-soft} — rgba(200,49,106,0.55)): Dimmed labels; magenta at reduced intensity for secondary uses.
Magenta Wash ({colors.magenta-wash} — rgba(200,49,106,0.08)): Faint tinted background behind the Roda das Vendas section. Barely perceptible.
WhatsApp ({colors.whatsapp} — #25D366): Utility-only. Appears exclusively on the floating WhatsApp button and its glow. Never reused for brand decoration.

Backgrounds

Hero ({colors.bg-hero} — #04040D): The deepest layer — hero section only.
Page ({colors.bg} — #04060F): Default page floor for primary sections.
Alt Section ({colors.bg-alt} — #080C18): Alternating section background. Sections strictly alternate between {colors.bg} and {colors.bg-alt}.
Surface ({colors.surface} — #0C1020): Stat cards, form inputs — one step above the page floor.
Surface Card ({colors.surface-2} — #0F0C1E): Solution cards — the default card surface.
Surface Raised ({colors.surface-3} — #16122A): The highest elevation surface for raised cards.

Text

Primary ({colors.text} — #F0F2FF): The default near-white text colour. Not pure white — it carries a faint violet temperature that harmonises with the canvas.
Strong / Emphasis ({colors.text-strong} — #FFFFFF): Pure white. Used only for bold emphasis within {colors.text-muted} body paragraphs — the payoff-sentence flip.
Muted ({colors.text-muted} — #7A86A8): Default body copy and descriptions. Slate with a cool blue cast.
Dim ({colors.text-dim} — rgba(245,245,255,0.75)): Hero sub-copy, set at 75% white.

Borders & Overlays

Hairline ({colors.border} — #1A1F35): The structural separator used on all cards, rows, and the stat bar. Always 1px.
Hairline 2 ({colors.border-2} — #1E1E30): A slightly lighter variant for secondary structural lines.
Border Faint ({colors.border-faint} — rgba(255,255,255,0.18)): The glass pill border only.
Overlay ({colors.overlay} — rgba(255,255,255,0.08)): The glass pill fill only. Not a surface colour.
On Magenta ({colors.on-magenta} — #04060F): Text and icon colour placed directly on a magenta-filled surface.

Typography

Font Families

Bebas Neue is the exclusive display typeface — condensed, all-caps, used only for headlines. DM Sans covers body copy, buttons, stat captions, and all running text. JetBrains Mono handles eyebrow labels, pill tags, and micro-labels — always wide-tracked, always small. All three families are loaded via @import from Google Fonts; no local font files are needed.

Hierarchy

Token	Family	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-h1}`	Bebas Neue	128px	400	0.90	3px	Hero headline only
`{typography.display-h2}`	Bebas Neue	80px	400	0.95	0	Section H2
`{typography.display-h3}`	Bebas Neue	48px	400	1.0	0	Sub-section H3
`{typography.display-stat}`	Bebas Neue	36px	400	1.0	0	Stat figures (magenta)
`{typography.display-card}`	Bebas Neue	26px	400	1.1	0	Solution card titles
`{typography.body-lg}`	DM Sans	18px	400	1.7	0	Hero sub-copy
`{typography.body}`	DM Sans	17px	400	1.7	0	Section intro body
`{typography.body-sm}`	DM Sans	14px	400	1.7	0	Card descriptions
`{typography.caption}`	DM Sans	12px	400	1.6	0.72px	Stat labels under figures
`{typography.eyebrow}`	JetBrains Mono	11px	400	1.6	1.65px	Section eyebrow labels
`{typography.tag}`	JetBrains Mono	10px	700	—	1.5px	Pill text, card category labels
`{typography.button}`	DM Sans	13px	700	—	1.3px	Solid button labels
`{typography.button-link}`	JetBrains Mono	13px	700	—	1px	Link CTA labels

Principles

The display impact is size and proportions, not weight — Bebas Neue is used at regular weight and achieves dominance through massive size and tight line-height. Never scale Bebas Neue below 26px. Never apply it to body copy.

The section header pattern is the brand's defining content rhythm, used without exception on every content section:

mono eyebrow  (JetBrains Mono, 11px, magenta, 1.65px tracking)
↓
Bebas display headline  (all-caps, 48–80px, near-white)
↓
DM Sans paragraph  (muted slate → bold white payoff sentence)

The emphasis pattern in body paragraphs always follows the same two-beat structure: the intro sentence opens in {colors.text-muted}, and the final payoff sentence flips to font-weight: 700; color: {colors.text-strong}. Never start a paragraph in bold white.

Casing is all-caps for Bebas Neue headlines and sentence case for everything else — eyebrow labels, buttons, and body copy. The brand name is always written RocketX (capital R, capital X).

CTA Copy (verbatim)

Primary button: Quero meu diagnóstico / Quero meu diagnóstico gratuito →
Nav button: Diagnóstico Gratuito
Link CTA: Saiba mais → / Ver Roda das Vendas →

Primary CTAs use first-person "Quero…" — never an imperative. Link CTAs always trail a → character.

Layout

Spacing System

Base unit: 4px.
Tokens: {spacing.space-1} 4 · {spacing.space-2} 8 · {spacing.space-3} 12 · {spacing.space-4} 16 · {spacing.space-5} 20 · {spacing.space-6} 24 · {spacing.space-8} 32 · {spacing.space-10} 40 · {spacing.space-12} 48 · {spacing.space-16} 64 · {spacing.space-20} 80 · {spacing.space-24} 96 · {spacing.space-28} 112.
Between major sections: ~100px vertical padding per section.
Card internal padding: {spacing.space-6} (24px) / {spacing.space-7} (28px).
Stat bar cell padding: {spacing.space-8} (32px) vertical, {spacing.space-5} (22px) horizontal.

Grid & Container

Desktop frame: 1920px viewport, content column ~1200px centered with ~360px gutters.
Mobile frame: 390px.
Always use flex/grid with gap for sibling rows — never inline-block with margin hacks.

Whitespace Philosophy

The dark canvas and generous section padding do the brand work. Sections are never jammed together — breathing room between bands is a design decision, not an oversight. Where the brand adds atmosphere it's a single restrained radial glow ({colors.magenta-wash-7}) behind a section — never a full-bleed gradient wallpaper.

Elevation & Depth

Level	Treatment	Use
Flat	No shadow; `{colors.border}` 1px hairline only	All cards, surfaces, stat bar, nav rows
Text shadow (`{elevation.text}`)	`0 2px 20px rgba(0,0,0,0.80)`	Body copy legibility over hero imagery
Head shadow (`{elevation.head}`)	`0 4px 40px rgba(0,0,0,0.60)`	Headline legibility over hero imagery
Magenta glow (`{elevation.glow-magenta}`)	`0 0 60px rgba(200,49,106,0.60)`	Hero emphasis word; primary CTA key moment
Button glow (`{elevation.glow-btn}`)	`0 8px 30px rgba(200,49,106,0.35)`	Primary button hover state
WhatsApp glow (`{elevation.glow-whatsapp}`)	`0 4px 20px rgba(37,211,102,0.45)`	Floating WhatsApp button only

Elevation is sparse by design. Borders separate; shadows are reserved for text-on-imagery legibility and the signature magenta glow. There are no elevation layers for hover states on cards — interaction feedback comes from colour shift, not lift.

Decorative Depth

Hero image (assets/hero-space-bg.jpg): A full-bleed cinematic render of a black rocket with magenta neon launching through pink clouds in a starfield. A vertical gradient rgba(4,6,15,0.3)→0.97 protects headline legibility.
Animated starfield: ~60 small white dots scattered over the hero section for depth.
Radial magenta wash ({colors.magenta-wash-7}): Faint radial glow behind the Roda das Vendas section. Used at most once per page.
Glassmorphism: Confined to the hero badge pill only — {colors.overlay} fill, {colors.border-faint} border, backdrop-filter: blur(8px). Blur does not appear anywhere else in the system.

Shapes

Border Radius Scale

Token	Value	Use
`{rounded.sm}`	4px	Nav button
`{rounded.md}`	6px	Primary buttons — the default action radius
`{rounded.lg}`	8px	Small cards, solution cards
`{rounded.xl}`	12px	Stat bar container
`{rounded.pill}`	100px	Glass pills, solid tags, WhatsApp button

The radius language is restrained. Unlike generously-rounded SaaS brands, RocketX uses small radii (4–12px) for structure and reserves the full pill only for floating badge elements. Never invent a radius outside this scale.

Components

Top Navigation

top-nav — A sticky {component.top-nav.height} (85px) bar with rgba(4,6,15,0.9) background and backdrop-filter: blur(20px). Logo (Bebas Neue wordmark) at left; sentence-case links in {colors.text-muted} in the centre; magenta {component.button-nav} CTA at right. This is the only place backdrop-filter appears outside the glass pill — blur is reserved for things that float.

Buttons

button-primary — The primary CTA. Background {colors.magenta}, white text, {rounded.md}, {typography.button}, padding 16px 32px. Shadow {elevation.glow-btn} on hover. First-person label: Quero meu diagnóstico. One per view. Press scales to 0.98.

button-nav — The compact nav-bar CTA. Same {colors.magenta} background but text is {colors.on-magenta} (dark, not white), {rounded.sm}, tighter padding 8px 24px. Label: Diagnóstico Gratuito.

button-link — Transparent link action. {colors.magenta} text, {typography.button-link} (JetBrains Mono), no padding, no background. Always trails a → character. When two CTAs sit side by side it is button-primary + button-link — never two solid buttons.

Pills & Tags

glass-pill — The hero badge element. {colors.overlay} fill, {colors.border-faint} border, backdrop-filter: blur(8px), {rounded.pill}. Carries a 6px dot bullet + {typography.eyebrow} text at 2.2px tracking. Used sparingly — one instance in the hero.

solid-tag — Category/status label. {colors.magenta} fill, {colors.on-magenta} text, {rounded.pill}, {typography.tag} at 1.35px tracking. Appears absolute-positioned at the top-right corner of solution cards.

Solution Card

solution-card — {colors.surface-2} background, 1px solid {colors.border} border, {rounded.lg}, 28px 24px padding. Contains, top to bottom:

{component.solid-tag} (absolute top-right corner)
Mono category label in {colors.magenta} — {typography.tag} at 1.5px tracking
Magenta line icon, 32px, 2px stroke, ~80% opacity
{typography.display-card} title in {colors.text}
{typography.body-sm} description in {colors.text-muted}
{component.button-link} CTA

Stat Bar

stat-bar — A horizontal row of 4 equal cells in a {rounded.xl} container. Background {colors.surface}, 1px solid {colors.border} outer border, cells separated by 1px vertical {colors.border} dividers. Each cell carries a {typography.display-stat} figure in {colors.magenta} and a {typography.caption} label in {colors.text-muted}. Verbatim stats: B2B · 6 mo · 100% · 16+.

Floating WhatsApp Button

whatsapp-btn — Fixed bottom-right, 58px circle, {colors.whatsapp} background, {rounded.pill}, {elevation.glow-whatsapp}. The only element in the system that uses {colors.whatsapp}. No label — icon only.

Iconography

Thin 2px-stroke line icons in {colors.magenta} at ~70–80% opacity, 24–32px. Inline SVG only — no sprite sheet, no icon font. Lucide (same 2px stroke, rounded caps) stands in for the RocketX proprietary icon set. The → arrow character is the dominant directional cue on all link CTAs. Emoji (🎯 📞 📊 📣 🔄) appear only as deliverable-list glyphs — never in headlines or body prose.

Do's and Don'ts

Do

Anchor every screen on the dark navy field ({colors.bg}). Let section padding and the dark canvas be the separator between bands — not heavy dividers.
Follow the section header pattern without exception: mono eyebrow → Bebas headline → muted intro with bold white payoff sentence.
Keep display type at regular weight in Bebas Neue. The size and tight line-height create the impact; weight is not involved.
Apply {colors.magenta} to exactly one chromatic layer per view — CTAs, eyebrow labels, stat figures. Never introduce a second accent colour.
Separate elements with {colors.border} (1px hairlines), not shadows. Shadows are for text-on-imagery legibility and the signature magenta glow only.
Reserve backdrop-filter: blur() for the hero glass pill and the sticky nav. It does not appear on cards, modals, or any static element.
Use first-person "Quero…" on solid CTA buttons. Trailing → on all link-style CTAs.

Don't

Don't introduce a light surface or light mode. There is none.
Don't bold a headline. Bebas Neue at regular weight is the rule — bolding reads as wrong.
Don't add a second accent colour alongside magenta. {colors.whatsapp} is the only tolerated exception, confined to a single floating button.
Don't use rgba stacks or soft grey borders. All borders are solid {colors.border} (#1A1F35) hairlines.
Don't scale Bebas Neue below 26px or use it for body copy. Switch to DM Sans for anything below display size.
Don't add emoji to headlines or body prose — emoji are deliverable-list glyphs only.
Don't apply the magenta glow ({elevation.glow-magenta}) to more than one element per section. It's a signature moment, not a default hover treatment.
Don't use glassmorphism outside the hero badge pill. One blurred element per page is the ceiling.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	< 768px	Single-column layout; hero headline scales from 128px to ~56px; nav collapses to hamburger; stat bar stacks 2×2
Tablet	768–1024px	Solution card grid narrows; hero headline ~72–80px; section padding eases toward `{spacing.space-20}`
Desktop	1024–1440px	Full layout; content column 1200px; 4-cell stat bar in a single row
Wide	> 1440px	Identical to desktop, centered within 1200px; more dark canvas around content

Touch Targets

{component.button-primary} renders at ~48px tall — above the 44px minimum.
{component.whatsapp-btn} is 58px — comfortably tappable.
{component.solution-card} link CTAs need at least 44px tap area on mobile; extend padding if needed.

Collapsing Strategy

The sticky nav collapses to a hamburger at < 768px; the menu opens as a full-screen dark overlay on {colors.bg}.
The hero image crops responsively and stays full-bleed via the protection gradient.
Solution card grids reduce to 1-up rather than scaling cards down.
The section header pattern (eyebrow → headline → body) keeps its structure at every breakpoint; only the headline size scales.
The 4-cell stat bar wraps to a 2×2 grid on mobile, maintaining cell content and dividers.

Iteration Guide

Focus on one component at a time. Reference its YAML key ({component.solution-card}, {component.stat-bar}).
New buttons default to {rounded.md} (6px); cards to {rounded.lg} (8px). Never invent a radius outside the scale.
Every new content section must follow the eyebrow → headline → body rhythm — no exceptions.
Use {token.refs} everywhere — never inline hex values. Reach for {colors.magenta} before hard-coding #C8316A.
Magenta is the one accent. If a new element feels like it needs colour emphasis, use magenta at a reduced opacity ({colors.magenta-soft}, {colors.magenta-wash}) before reaching for any other hue.
Glow effects ({elevation.glow-magenta}) are signature moments — one per section maximum.
When in doubt about emphasis: more negative space and a sharper Bebas headline before more colour or shadow.
Always verify the eyebrow label is in JetBrains Mono, sentence case, magenta, and wide-tracked. This is the highest-frequency brand tell.

Known Gaps

Hero image watermark. assets/hero-space-bg.jpg is AI-generated and carries a small "Veo" watermark bottom-right — crop or replace before production use.
Icon set substitution. Lucide (CDN, 2px stroke, rounded caps) stands in for the proprietary RocketX icon set. Visual match is ~90%. Swap to the real set when it surfaces.
Fonts. Bebas Neue, DM Sans, and JetBrains Mono are loaded via Google Fonts @import — exact matches to the Figma source. No local .woff2 files are included.
Roda das Vendas radar. The interactive 8-pillar spider diagnostic is documented by description only. The ui_kits/website/ JSX component is a canvas-rendered approximation; exact animation curves for pillar highlight on score change are not extracted.
Animated starfield. The hero starfield is approximated with a static CSS dot overlay; the live site may use a JS particle system for subtle drift.
Mobile nav. The hamburger sheet and its open/close animation are not fully specified — timing and overlay behaviour are best-effort reconstructions.