Remixes of omnirush.ai
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Omnirush
description: |
OmniRush's design system projects an energetic, forward-looking personality
rooted in bold contrast and playful innovation. The core aesthetic combines a
deep, almost black canvas (#121019) with vibrant accent colors and typography
that commands attention through scale and weight. The system embraces a
"tech-meets-art" sensibility: heavy sans-serifs in uppercase convey confidence
and authority, while accents of electric lime (#D8FC38) inject urgency and
excitement into an otherwise sophisticated dark environment. Layered radial
gradients and directional geometry (arrows, diagonal lines) reinforce a sense
of forward momentum. The design refuses to be subtle—every interactive element
carries visual weight through thick borders, pronounced shadows, and distinct
elevation. This is a brand for builders and creators who value directness over
restraint.
source:
url: "https://omnirush.ai/buildathon"
pagesAnalyzed: 4
extractedAt: 2026-10-23
tokensMeasured: true
colors:
primary: "#A48CFF"
link: "#AAA5C4"
canvas: "#121019"
surface: "#FFFFFF"
on-primary: "#222222"
ink: "#FFFFFF"
body: "#F4F2FB"
muted: "#ECE7DD"
faint: "#E6E3FF"
accent-1: "#322D45"
accent-2: "#0B0630"
accent-3: "#D8FC38"
accent-4: "#9A9488"
accent-5: "#17142B"
accent-6: "#3A2DF5"
neutral-1: "#B6B0A5"
neutral-2: "#D6D8DC"
typography:
display-xxl:
fontFamily: "Archivo FB"
fontSize: 112px
fontWeight: 900
lineHeight: 0.92
letterSpacing: -1.12px
textTransform: uppercase
display-xl:
fontFamily: "Archivo FB"
fontSize: 80.8743px
fontWeight: 900
lineHeight: 0.9
letterSpacing: -1.21px
textTransform: uppercase
display-lg:
fontFamily: "Archivo FB"
fontSize: 70.4px
fontWeight: 900
lineHeight: 0.98
letterSpacing: -0.7px
textTransform: uppercase
display-md:
fontFamily: "Space Grotesk Variable"
fontSize: 60px
fontWeight: 500
lineHeight: 0.98
letterSpacing: -2.1px
display-sm:
fontFamily: "Archivo FB"
fontSize: 54px
fontWeight: 900
lineHeight: 1
letterSpacing: 0px
display-xs:
fontFamily: "Archivo FB"
fontSize: 51.84px
fontWeight: 900
lineHeight: 0.98
letterSpacing: -0.52px
textTransform: uppercase
heading-xxl:
fontFamily: "Archivo FB"
fontSize: 32px
fontWeight: 800
lineHeight: 1.15
letterSpacing: -0.16px
textTransform: uppercase
heading-xl:
fontFamily: "Space Grotesk Variable"
fontSize: 24px
fontWeight: 500
lineHeight: 1.15
letterSpacing: -0.48px
heading-lg:
fontFamily: "Archivo FB"
fontSize: 21px
fontWeight: 800
lineHeight: 1.15
letterSpacing: -0.1px
textTransform: uppercase
heading-md:
fontFamily: "Archivo FB"
fontSize: 19px
fontWeight: 800
lineHeight: 1.15
letterSpacing: -0.09px
textTransform: uppercase
heading-sm:
fontFamily: "Archivo FB"
fontSize: 18px
fontWeight: 800
lineHeight: 1.6
letterSpacing: 0.36px
textTransform: uppercase
heading-xs:
fontFamily: "Space Grotesk Variable"
fontSize: 17px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.17px
body-xl:
fontFamily: "Inter Variable"
fontSize: 19px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-lg:
fontFamily: "Inter Variable"
fontSize: 17px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-md:
fontFamily: "Inter Variable"
fontSize: 16px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0px
body-sm:
fontFamily: "Inter Variable"
fontSize: 15.5px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-xs:
fontFamily: "Inter Variable"
fontSize: 15px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-xs-2:
fontFamily: "Inter Variable"
fontSize: 13px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0px
button-md:
fontFamily: "Inter Variable"
fontSize: 15px
fontWeight: 600
lineHeight: 1
letterSpacing: 0px
button-sm:
fontFamily: "Inter Variable"
fontSize: 14px
fontWeight: 500
lineHeight: 1.6
letterSpacing: 0px
button-xs:
fontFamily: "Inter Variable"
fontSize: 13px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
label-md:
fontFamily: "Space Grotesk Variable"
fontSize: 15px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
label-sm:
fontFamily: "Inter Variable"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
label-xs:
fontFamily: "Inter Variable"
fontSize: 12px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0.12px
caption-sm:
fontFamily: "Inter Variable"
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
caption-xs:
fontFamily: "Inter Variable"
fontSize: 12px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0px
caption-xs-tight:
fontFamily: "Inter Variable"
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0.24px
caption-xs-strong:
fontFamily: "Inter Variable"
fontSize: 12px
fontWeight: 600
lineHeight: 1.4
letterSpacing: 1.68px
textTransform: uppercase
caption-xs-uppercase:
fontFamily: "Inter Variable"
fontSize: 12px
fontWeight: 600
lineHeight: 1.6
letterSpacing: 1.44px
textTransform: uppercase
code-lg:
fontFamily: "JetBrains Mono Variable"
fontSize: 15px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
code-lg-strong:
fontFamily: "JetBrains Mono Variable"
fontSize: 15px
fontWeight: 500
lineHeight: 1.6
letterSpacing: 0px
code-md:
fontFamily: "JetBrains Mono Variable"
fontSize: 14.62px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
code-sm:
fontFamily: "JetBrains Mono Variable"
fontSize: 14.5px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
code-sm-tight:
fontFamily: "JetBrains Mono Variable"
fontSize: 14.5px
fontWeight: 400
lineHeight: 1.55
letterSpacing: -0.14px
code-xs:
fontFamily: "JetBrains Mono Variable"
fontSize: 14px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
rounded:
none: 0px
xs: 4px
sm: 6px
md: 7px
lg: 8px
xl: 9px
xxl: 10px
r-11: 11px
r-12: 12px
r-14: 14px
r-22: 22px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 64px
borderWidths:
thin: 1px
medium: 2px
thick: 3px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#F7F7FF"
surface: "#EDEDF5"
surfaceRaised: "#E6E6ED"
text: "#18171D"
textMuted: "#6C6B72"
border: "#D4D4DB"
accent: "#744FFF"
accentFg: "#FFFFFF"
focusRing: "#9478FF"
elevation: shadow
dark:
bg: "#121019"
surface: "#FFFFFF"
surfaceRaised: "#FFFFFF"
text: "#FFFFFF"
textMuted: "#F4F2FB"
border: "#2E2D35"
accent: "#A48CFF"
accentFg: "#0B0B0C"
focusRing: "#A48CFF"
elevation: "border+surface"
contrastFailures:
- "dark: text on surface = 1:1 (needs 4.5:1)"
gradients:
- context: hero
kind: mixed
value: "radial-gradient(1200px 700px at 85% -10%, rgb(71, 54, 250), rgba(0, 0, 0, 0) 60%), radial-gradient(900px 900px at -10% 40%, rgb(74, 47, 248), rgba(0, 0, 0, 0) 60%), linear-gradient(rgb(58, 45, 245) 0%, rgb(53, 41, 242) 50%, rgb(42, 31, 210) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgb(255, 255, 255) 0%, rgb(240, 239, 255) 62%, rgb(217, 214, 245) 100%)"
- context: section
kind: radial
value: "radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.6px, rgba(0, 0, 0, 0) 2.1px)"
- context: section
kind: linear
value: "linear-gradient(rgb(230, 255, 109) 0%, rgb(216, 252, 56) 60%, rgb(198, 236, 34) 100%)"
- context: section
kind: radial
value: "radial-gradient(circle, rgba(255, 255, 255, 0.07) 1.3px, rgba(0, 0, 0, 0) 1.8px), none"
- context: section
kind: radial
value: "radial-gradient(circle, rgba(255, 255, 255, 0.08) 1.3px, rgba(0, 0, 0, 0) 1.8px), none"
components:
button-filled:
textColor: "{colors.accent-2}"
border: "3px solid {colors.accent-2}"
height: 57.1875px
padding: "12px 24px 12px 24px"
fontSize: 17px
fontFamily: "Archivo FB"
fontWeight: 800
lineHeight: 1.6
rounded: "{rounded.r-14}"
backgroundColor: "{colors.accent-3}"
button-filled-2:
textColor: "{colors.ink}"
border: "3px solid {colors.accent-2}"
height: 57.1875px
padding: "12px 24px 12px 24px"
fontSize: 17px
fontFamily: "Archivo FB"
fontWeight: 800
lineHeight: 1.6
rounded: "{rounded.r-14}"
backgroundColor: "{colors.accent-6}"
button-secondary:
textColor: "{colors.accent-2}"
border: "3px solid {colors.accent-2}"
height: 57.1875px
padding: "12px 24px 12px 24px"
fontSize: 17px
boxShadow: "rgba(0, 0, 0, 0.35) 0px 6px 0px 0px"
fontFamily: "Archivo FB"
fontWeight: 800
lineHeight: 1.6
rounded: "{rounded.r-14}"
backgroundColor: "{colors.surface}"
card-featured:
typography: "{typography.body-lg}"
textColor: "{colors.accent-2}"
border: "3px solid {colors.accent-2}"
padding: "22px 22px 24px 22px"
rounded: "{rounded.r-14}"
backgroundColor: "{colors.surface}"
card-featured-2:
typography: "{typography.body-lg}"
textColor: "{colors.accent-2}"
border: "3px solid {colors.accent-2}"
padding: "22px 22px 24px 22px"
rounded: "{rounded.r-14}"
backgroundColor: "{colors.accent-3}"
card:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
border: "3px solid {colors.accent-2}"
padding: "24px 24px 24px 24px"
boxShadow: "rgba(0, 0, 0, 0.35) 0px 7px 0px 0px"
rounded: "{rounded.r-14}"
backgroundColor: "{colors.accent-2}"
card-sm:
typography: "{typography.body-lg}"
textColor: "rgb(237, 235, 245)"
border: "1px solid rgba(237, 235, 245, 0.12)"
rounded: "{rounded.xxl}"
backgroundColor: "rgb(27, 24, 38)"
badge-filled:
textColor: "{colors.accent-3}"
height: 22.2969px
padding: "0px 10px 0px 10px"
fontSize: 13.94px
fontFamily: "JetBrains Mono Variable"
fontWeight: 600
lineHeight: 1.6
rounded: 999px
backgroundColor: "{colors.accent-2}"
badge-filled-lg:
textColor: "{colors.ink}"
height: 23.1875px
padding: "2px 10px 2px 10px"
fontSize: 12px
fontFamily: "Space Grotesk Variable"
fontWeight: 800
lineHeight: 1.6
rounded: 999px
backgroundColor: "{colors.accent-6}"
navigation:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
height: 36px
navigation-lg:
typography: "{typography.body-lg}"
textColor: "rgb(237, 235, 245)"
height: 44px
footer:
typography: "{typography.body-lg}"
textColor: "{colors.faint}"
padding: "28px 40px 28px 40px"
backgroundColor: "{colors.accent-2}"
footer-lg:
typography: "{typography.body-lg}"
textColor: "{colors.body}"
border: "1px solid rgba(244, 242, 251, 0.12)"
padding: "48px 0px 32px 0px"
backgroundColor: "rgb(12, 11, 18)"
link:
textColor: "{colors.accent-2}"
border: "2px solid {colors.accent-2}"
padding: "4px 12px 4px 12px"
fontSize: 14px
fontFamily: "Inter Variable"
fontWeight: 700
lineHeight: 1.6
rounded: "{rounded.xl}"
backgroundColor: "{colors.accent-3}"
link-sm:
textColor: "{colors.ink}"
fontSize: 16px
fontFamily: "Archivo FB"
fontWeight: 800
lineHeight: 1.6
states:
nav-hover:
target: nav
state: hover
opacity: 1
other-disabled:
target: other
state: disabled
opacity: 0.5
other-hover:
target: other
state: hover
opacity: 1
other-focus-visible:
target: other
state: focus-visible
outline: "rgba(0, 0, 0, 0) solid 2px"
outlineColor: "rgba(0, 0, 0, 0)"
outlineWidth: 2px
input-disabled:
target: input
state: disabled
opacity: 0.5
link-focus:
target: link
state: focus
transform: "translateY(0px)"
button-hover:
target: button
state: hover
transform: "translate(2px)"
link-hover:
target: link
state: hover
textDecoration: "underline 1px"
breakpoints:
- width: 375
containerWidth: 340
gridColumns: 2
navLinksVisible: 5
menuToggleVisible: false
headingPx: 43
bodyPx: 15
sectionPaddingX: 19
- width: 768
containerWidth: 691
gridColumns: 4
navLinksVisible: 5
menuToggleVisible: false
headingPx: 87
bodyPx: 15
sectionPaddingX: 38
- width: 1024
containerWidth: 944
gridColumns: 4
navLinksVisible: 5
menuToggleVisible: false
headingPx: 112
bodyPx: 15
sectionPaddingX: 40
- width: 1280
containerWidth: 1240
gridColumns: 4
navLinksVisible: 5
menuToggleVisible: false
headingPx: 112
bodyPx: 15
sectionPaddingX: 40
- width: 1440
containerWidth: 1240
gridColumns: 4
navLinksVisible: 5
menuToggleVisible: false
headingPx: 112
bodyPx: 15
sectionPaddingX: 40
coverage:
statesFound: 116
gradientsFound: 7
rolesUnassigned: 8
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
OmniRush's design system projects an energetic, forward-looking personality rooted in bold contrast and playful innovation. The core aesthetic combines a deep, almost black canvas ({colors.canvas} — #121019) with vibrant accent colors and typography that commands attention through scale and weight. The system embraces a "tech-meets-art" sensibility: heavy sans-serifs in uppercase convey confidence and authority, while accents of electric lime ({colors.accent-3} — #D8FC38) inject urgency and excitement into an otherwise sophisticated dark environment. Layered radial gradients and directional geometry (arrows, diagonal lines) reinforce a sense of forward momentum. The design refuses to be subtle—every interactive element carries visual weight through thick borders, pronounced shadows, and distinct elevation. This is a brand for builders and creators who value directness over restraint.
Key Characteristics
{colors.primary} — #A48CFF): Primary CTA fill, brand accent, active state indicator; used sparingly for emphasis on dark backgrounds and as a secondary button fill.{colors.accent-3} — #D8FC38): Hero highlight, badge accent, call-to-action highlight band; the most visually dominant accent, signaling urgency and energy.{colors.accent-6} — #3A2DF5): Deep blue radiant in hero gradients; used as a decorative gradient component.{colors.accent-1} — #322D45): Decorative; no measured role.{colors.accent-2} — #0B0630): Decorative; used in shadow color and gradient overlays, no distinct semantic role.{colors.accent-4} — #9A9488): Decorative; no measured role.{colors.accent-5} — #17142B): Decorative; no measured role.{colors.link} — #AAA5C4): Inline link color, muted purple-gray tone for subtle hyperlink distinction.{colors.canvas} — #121019): Default page background, primary surface for dark-mode layouts.{colors.surface} — #FFFFFF): Card and panel background; primary heading and text color on dark contexts.{colors.body} — #F4F2FB): Body copy text on dark backgrounds; light purple-tinted neutral.{colors.muted} — #ECE7DD): Captions, secondary text, reduced-emphasis labels.{colors.faint} — #E6E3FF): Tertiary and placeholder text; very light purple tint.{colors.on-primary} — #222222): Label and text color applied atop brand surfaces (e.g., lime buttons); dark gray for contrast.{colors.neutral-1} — #B6B0A5): Decorative / neutral surface accent; no distinct role.{colors.neutral-2} — #D6D8DC): Decorative / neutral surface accent; no distinct role.Primary Display & Heading: Archivo FB (web font, Variable)
Fallback stack: Archivo FB, serif
Body & UI: Inter Variable (web font, Variable)
Fallback stack: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Code & Monospace: JetBrains Mono Variable (web font, Variable)
Fallback stack: JetBrains Mono, 'Courier New', monospace
Secondary Display: Space Grotesk Variable (web font, Variable)
Fallback stack: Space Grotesk, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Archivo FB | 112px | 900 | 0.92 | −1.12px | Uppercase, hero-scale heading |
| Display XL | Archivo FB | 80.87px | 900 | 0.9 | −1.21px | Uppercase, bold presence |
| Display LG | Archivo FB | 70.4px | 900 | 0.98 | −0.7px | Uppercase, large hero |
| Display MD | Space Grotesk | 60px | 500 | 0.98 | −2.1px | Medium display weight, tight tracking |
| Display SM | Archivo FB | 54px | 900 | 1 | 0px | Uppercase display alternative |
| Display XS | Archivo FB | 51.84px | 900 | 0.98 | −0.52px | Uppercase, smallest display |
| Heading XXL | Archivo FB | 32px | 800 | 1.15 | −0.16px | Uppercase section heading |
| Heading XL | Space Grotesk | 24px | 500 | 1.15 | −0.48px | Medium-weight heading |
| Heading LG | Archivo FB | 21px | 800 | 1.15 | −0.1px | Uppercase heading variant |
| Heading MD | Archivo FB | 19px | 800 | 1.15 | −0.09px | Uppercase subheading |
| Heading SM | Archivo FB | 18px | 800 | 1.6 | 0.36px | Uppercase small heading |
| Heading XS | Space Grotesk | 17px | 600 | 1.2 | −0.17px | Body-sized heading |
| Body XL | Inter | 19px | 400 | 1.6 | 0px | Large body text |
| Body LG | Inter | 17px | 400 | 1.6 | 0px | List item size |
| Body MD | Inter | 16px | 400 | 1.55 | 0px | Default body copy |
| Body SM | Inter | 15.5px | 400 | 1.5 | 0px | Secondary body text |
| Body XS | Inter | 15px | 400 | 1.6 | 0px | Small body variant |
| Body XS-2 | Inter | 13px | 400 | 1.55 | 0px | Extra-small body text |
| Button MD | Archivo FB | 15px | 600 | 1 | 0px | Primary button label |
| Button SM | Inter | 14px | 500 | 1.6 | 0px | Secondary button label |
| Button XS | Archivo FB | 13px | 700 | 1.6 | 0px | Small button label |
| Caption SM | Inter | 14px | 400 | 1.6 | 0px | Caption text |
| Caption XS | Inter | 12px | 400 | 1.55 | 0px | Minimal caption |
| Caption XS Strong | Inter | 12px | 600 | 1.4 | 1.68px | Uppercase, tight label |
| Caption XS Uppercase | Inter | 12px | 600 | 1.6 | 1.44px | Uppercase label variant |
| Caption XS Tight | Inter | 12px | 400 | 1.5 | 0.24px | Compact caption |
| Label XS | Inter | 12px | 600 | 1.5 | 0.12px | Small form label |
| Label SM | Inter | 14px | 400 | 1.43 | 0px | Form label |
| Label MD | Space Grotesk | 15px | 500 | 1.2 | 0px | Medium form label |
| Code LG | JetBrains Mono | 15px | 400 | 1.6 | 0px | Large code block |
| Code LG Strong | JetBrains Mono | 15px | 500 | 1.6 | 0px | Emphasized code |
| Code MD | JetBrains Mono | 14.62px | 400 | 1.6 | 0px | Default code size |
| Code SM | JetBrains Mono | 14.5px | 400 | 1.65 | 0px | Small code snippet |
| Code SM Tight | JetBrains Mono | 14.5px | 400 | 1.55 | −0.14px | Compact code |
| Code XS | JetBrains Mono | 14px | 700 | 1.6 | 0px | Inline code token |
Filled (Primary CTA)
{colors.accent-3} (#D8FC38){colors.on-primary} (#222222){spacing.sm} top/bottom, {spacing.md} left/right (12px 24px){colors.on-primary} (#222222){rounded.r-14} (14px)rgb(11, 6, 48) 0px 6px 0px 0pxFilled Secondary (Brand Primary Fill)
{colors.accent-6} (#3A2DF5)#FFFFFF{spacing.sm} top/bottom, {spacing.md} left/right (12px 24px){colors.on-primary} (#222222){rounded.r-14} (14px)rgb(11, 6, 48) 0px 6px 0px 0pxSecondary / Ghost
{colors.surface} (#FFFFFF){colors.on-primary} (#222222){spacing.sm} top/bottom, {spacing.md} left/right (12px 24px){colors.on-primary} (#222222){rounded.r-14} (14px)rgba(0, 0, 0, 0.35) 0px 6px 0px 0pxHover State (from stylesheet)
Featured Card (White)
{colors.surface} (#FFFFFF){colors.on-primary} (#222222){spacing.xl} (22px) all sides{colors.on-primary} (#222222){rounded.r-14} (14px)rgb(11, 6, 48) 0px 7px 0px 0pxFeatured Card (Lime)
{colors.accent-3} (#D8FC38){colors.on-primary} (#222222){spacing.xl} (22px) all sides{colors.on-primary} (#222222){rounded.r-14} (14px)rgb(11, 6, 48) 0px 7px 0px 0pxDefault Card (Dark)
{colors.accent-2} (#0B0630)#FFFFFF{spacing.md} (24px) all sides{colors.on-primary} (#222222){rounded.r-14} (14px)rgba(0, 0, 0, 0.35) 0px 7px 0px 0pxDefault Card (Small, Very Dark)
rgb(27, 24, 38)rgb(237, 235, 245)0px (no padding; content inset handled separately)rgba(237, 235, 245, 0.12){rounded.xl} (9px)Filled Badge (Dark with Lime Text)
{colors.on-primary} (#222222){colors.accent-3} (#D8FC38)0px top/bottom, {spacing.sm} left/right (0px 10px){rounded.full} (9999px)Filled Badge LG (Electric Blue)
{colors.accent-6} (#3A2DF5)#FFFFFF2px top/bottom, {spacing.sm} left/right (2px 10px){rounded.full} (9999px)Default Nav (Mobile/Compact)
#FFFFFFDefault Nav LG (Desktop)
rgb(237, 235, 245)Default Footer
{colors.on-primary} (#222222)rgb(230, 227, 255){spacing.xxl} top/bottom, {spacing.section} left/right (28px 40px)Default Footer LG (Expanded)
rgb(12, 11, 18){colors.body} (#F4F2FB){spacing.band} (48px) top, 0px horizontal, {spacing.xxxl} (32px) bottomrgba(244, 242, 251, 0.12)Primary Link
{colors.accent-3} (#D8FC38){colors.on-primary} (#222222)4px top/bottom, {spacing.sm} left/right (4px 12px){colors.on-primary} (#222222){rounded.xl} (9px)rgb(11, 6, 48) 0px 3px 0px 0pxSecondary Link (Bare Text)
#FFFFFFThe system employs a 4px base unit. All spacing follows this scale:
{spacing.xxs} = 4px — Minimal gaps, inline element separation{spacing.xs} = 8px — Tight component spacing, icon padding{spacing.sm} = 12px — Default internal button/input padding{spacing.md} = 16px — Card padding, standard vertical rhythm{spacing.lg} = 20px — Section divider, generous spacing{spacing.xl} = 24px — Card internal spacing, group separators{spacing.xxl} = 28px — Footer / large component padding{spacing.xxxl} = 32px — Section bottom padding, large vertical breaks{spacing.section} = 40px — Horizontal container padding, section margins{spacing.band} = 64px — Hero section padding, full-width band spacingUsage Context:
{spacing.sm} (12px) for padding.{spacing.md} (16px) to {spacing.xl} (24px) for internal spacing.{spacing.section} (40px) for horizontal breathing room.{spacing.band} (64px) for dramatic vertical scale.Max Width Strategy:
{spacing.section} (40px) left/right = ~691px content width at 768px.{spacing.section} (40px) remains consistent.Column Count:
Section Patterns:
275px width.z-index: 100; content flows beneath.OmniRush embraces generous whitespace as a structural tool, not a luxury. Large negative space around hero typography and section breaks creates visual rhythm and emphasizes key content. Vertical spacing ({spacing.band} = 64px) between major sections prevents cognitive clutter. The tight letter spacing on display sizes is balanced by expansive margins, creating a paradox: dense letterforms breathe through ample surrounding void. This approach reflects the brand's confidence—it does not apologize for silence.
{rounded.none} = 0px — Badges (sharp rectangles on dark badges){rounded.xs} = 4px — Button default (slight softness){rounded.sm} = 6px — Alternative input / small component rounding{rounded.md} = 7px — Medium component rounding{rounded.lg} = 8px — Button and control rounding variant{rounded.xl} = 9px — Navigation and link components{rounded.xxl} = 10px — Small card and image rounding{rounded.r-11} = 11px — Specialty rounding{rounded.r-12} = 12px — Medium card rounding{rounded.r-14} = 14px — Primary card and button rounding (most common){rounded.r-22} = 22px — Large container rounding{rounded.full} = 9999px — Pill-shaped badges and circular elementsComponent Context:
{rounded.r-14} (14px){rounded.xs} (4px) and {rounded.r-14} (14px){rounded.full} (9999px, pill-shaped){rounded.xxl} (10px){rounded.xl} (9px)Where They Apply:
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Minimal, reserved for input fields and small badges |
| Micro (sm) | rgb(11, 6, 48) 0px 7px 0px 0px | Featured cards, primary surfaces |
| Micro (md) | rgb(11, 6, 48) 0px 6px 0px 0px | Filled buttons, standard CTAs |
| Micro (lg) | rgb(11, 6, 48) 0px 4px 0px 0px | Secondary buttons, reduced depth |
| Micro (xl) | rgb(11, 6, 48) 0px 3px 0px 0px | Tertiary links, minimal lift |
| Overlay / Dark | rgba(0, 0, 0, 0.35) 0px 7px 0px 0px | Dark card variants, muted emphasis |
Shadow Philosophy:
OmniRush employs a single-tier, flat-shadow approach: exactly one uniform drop shadow per element, cast straight downward in a solid dark color ({colors.on-primary} / #222222 or overlay black). No multi-layer blur or complex geometry; shadows are blocky, almost graphic in their simplicity. This mirrors the system's general preference for stark, unmistakable depth over subtlety. The shadow offset (3–7px) is consistent within role; no gradient or feathered edges. This creates a cut-paper, print-like aesthetic—components appear to sit slightly above the canvas, casting a precise geometric shadow.
0.22) — Very faint background overlays, barely perceptible0.70) — Muted interactive states, reduced-emphasis surfaces0.85) — Slightly muted elements, hover state transitions0.95) — Near-full visibility, minor dimming onlyThese opacities are observed in interaction states and overlay patterns; they are not applied uniformly to a semantic scale but rather contextually as needed for clarity or dimming effects.
Stacking Strategy: Content defaults to z-index 1–2. Interactive menus and floating elements occupy the 20–50 range in order of nesting. The navigation bar claims z-index 100 to sit atop all other content, ensuring access during scroll. No element exceeds z-index 100; the system favors a shallow, manageable stacking order.
{colors.accent-3} — #D8FC38) sparingly but boldly — It is the system's energetic accent; reserve it for primary CTAs, hero highlights, and badges. Overuse dilutes impact.{rounded.full} (9999px) badges are a consistent, playful element; resist sharpening them to rectangular forms.#121019) is very dark; always verify text contrast against it, especially with lighter accents.{rounded.r-14} (14px), buttons {rounded.xs} or {rounded.r-14}, badges {rounded.full}. Mixing arbitrary radii breaks system cohesion.{colors.canvas} is the page background; pair it with light text (#FFFFFF or {colors.body}). Never reverse this.{colors.muted} or {colors.faint}). Opacity on text reduces legibility and accessibility.| Name | Width | Content Column | Grid Columns | Largest Heading | Body Size | Horiz. Padding | Key Changes |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 340px | 2 | 43px (display-xs–sm range) | 15px | {spacing.md} (16px) | Single column for most layouts; compact nav |
| Tablet | 768px | 691px | 4 | 87px (display-lg range) | 15px | {spacing.section} (40px) | Four-column grid introduced; card layouts expand |
| Desktop | 1024px | 944px | 4 | 112px (display-xxl) | 15px | {spacing.section} (40px) | Max width maintained; full navigation visible |
| Wide | 1280px | 1240px | 4 | 112px | 15px | {spacing.section} (40px) | Container max-width enforced; no further expansion |
| Ultra-wide | 1440px | 1240px | 4 | 112px | 15px | {spacing.section} (40px) | Identical to 1280px; max-width caps content |
Key Observations:
{spacing.md} (16px) at mobile to {spacing.section} (40px) at tablet/desktop.The extracted data does not provide explicit touch target measurements. However, all interactive components (buttons, links, badges) maintain minimum heights near 36–57px, sufficient for touch interaction on mobile. Maintain these dimensions on smaller screens; do not compress buttons below 44px height or links below 36px to ensure tappability.
375px → 768px (Mobile to Tablet):
{spacing.md} to {spacing.section} to breathe room into content.768px → 1024px+ (Tablet to Desktop):
{spacing.section} (40px).max-width: 1240px.1024px+ (Desktop Stabilization):
#D8FC38) — button fills, hero highlights, hero highlight band#3A2DF5) — secondary button fills, badge accents#A48CFF) — sparse accent, active state indicator#121019) — default page background#FFFFFF) — light cards, primary text on dark backgrounds#F4F2FB) — body copy on canvas#ECE7DD) — captions, secondary labels#AAA5C4) — inline hyperlinks#222222) — text/labels atop lime or brand surfaces#FFFFFF) on dark or On Primary (#222222) on light accentsAll buttons carry a 3px solid border in {colors.on-primary} (#222222), plus a 6–7px drop shadow in the same color. Do not flatten or soften; these are non-negotiable affordance signals.
Uppercase display is a signature. Arquivo FB and Space Grotesk headings default to text-transform: uppercase. Preserve this; it is a core voice marker.
Negative letter spacing on display sizes (−0.52px to −2.1px) is intentional and defines the brand. Preserve it verbatim; do not round to 0.
Card rounding is {rounded.r-14} (14px) for primary and featured cards; small dark variants use {rounded.xl} (9px). Buttons vary between {rounded.xs} (4px) and {rounded.r-14} (14px). Do not generalize; follow component specificity.
Lime (#D8FC38) is reserved for high-priority CTAs and accents. Do not scatter it across secondary elements. Mint or pastel yellow alternatives diminish visual hierarchy.
Badges are always pill-shaped ({rounded.full} = 9999px). This is a recognizable system trait.
Horizontal padding at mobile is {spacing.md} (16px); at tablet+ it is {spacing.section} (40px). Enforce this step-up explicitly in media queries.
Hero sections employ a layered radial + linear gradient (provided in token data). Reproduce the exact CSS to maintain atmospheric depth; do not simplify to a single linear gradient.
Text colors step through the neutral scale: Surface (#FFFFFF) → Body (#F4F2FB) → Muted (#ECE7DD) → Faint (#E6E3FF). Do not invent intermediate grays; use this ramp.
Footer background is {colors.on-primary} (#222222) at compact size, escalating to rgb(12, 11, 18) (near-black) in expanded layout. Text is light (off-white or rgb(230, 227, 255)).
No semantic status colors. The extraction detected no error, success, warning, or info color declarations. If the product requires status states (validation feedback, alerts), these roles are not defined in the current design system and must be added via new color tokens.
Eight extracted colors lack a measured role. Accents 1, 2, 4, 5 are decorative or used inconsistently; no specific UI function was observed for them. They may appear in gradients, backgrounds, or borders but are not assigned semantic meaning. Treat them as reserved for future use or gradient construction.
Interaction states are partially declared. The stylesheet contains numerous hover, focus, and active rules, but not all components were measured in all states. Disabled and focus-visible states exist; hover states for most interactive roles are documented. Missing: comprehensive disabled states for all buttons/inputs, and active states for all navigation links.
Dark mode or theme switching not observed. The system appears to present only a dark theme (canvas #121019). If a light mode exists, it was not captured in the extraction. Any light-mode implementation would need to be designed de novo, inverting the current canvas/surface logic.
Authentication-protected surfaces not visited. The extraction analyzed public pages only. Behind-login dashboards, user settings, or account flows were not examined and may employ different component styles or color roles.
Specific animation/transition timings not measured. The extraction captured static styles and interaction selectors, but CSS transition durations (e.g., transition: background-color 200ms ease) and keyframe animation definitions are not present in the token data. Animations may exist; their timing parameters are unmeasured.
Breakpoint naming not confirmed. Breakpoints are inferred from measured content and heading sizes. The design system may internally use different names (e.g., sm, md, lg) than those derived here (Mobile, Tablet, Desktop).
Form input styling partially captured. Button and card styles are complete; input fields and form controls are less thoroughly documented. Label and placeholder styling exist but input background, focus states, and placeholder text color are not fully measured for all variants.
Accessibility tokens absent. No focus-outline color, reduced-motion preferences, or high-contrast overrides are declared in the extracted data. Assume WCAG compliance is needed but was not explicitly tested during extraction.