Theme Pulse

Rocket CSS Console

Live rendering of the active Rocket theme tokens, components, and AI prompts.

Theme Pulse

Rocket CSS Console

Live rendering of tokens from site/assets/css/input.css. If it looks correct here, it ships correct everywhere.

Route: /rocket/css/ Theme: rocket Density: normal Live

Theme Name

rocket

Last Updated

Nov 21, 2025

Primary Spectrum

100

200

300

400

500

600

700

800

900

Brand-driving hue for CTAs and links.

Secondary Spectrum

100

200

300

400

500

600

700

800

900

Supportive actions and highlights.

Accent Spectrum

100

200

300

400

500

600

700

800

900

Use sparingly for toggles or alerts.

Semantic Tokens

Surface Shell
--surface-shell
App chrome + shells
Card Base
--surface-card
Default cards & panels
Text Primary
--text-primary
Body copy color
Border Default
--border-default
Dividers & strokes

Typography Stack

Display · Space Grotesk

Heading · Inter / sans

Body · var(--font-body)

Typography inherits from Rocket primitives; override in @layer primitives.

Spacing Scale

--space-2
--space-4
--space-6
--space-8
--space-12

Buttons

Direct render of Rocket button classes.

Surface Cards

card

Uses --surface-card + shadow-sm

card-elevated

Uses --surface-card-elevated + shadow-lg

badges

Primary Secondary Ghost

.layout-header

Sticky shell with blur, nav, and actions.

.layout-views

Grid orchestrating sidebar / main / rightbar.

.view-main → .main-content

Nested grid for header, toolbar, scroll region.

AI Prompt Snippet

Use this snippet verbatim when asking an AI copilot to adjust theming.

You are updating the Rocket CSS theme.
Only touch site/assets/css/input.css using @layer primitives, semantics, themes, components, utilities.
Respect layout zones: .layout-header, .layout-views, .view-main, .main-content.
Preview changes on /rocket/css before handoff.