Typography \- Base font: Inter (Google Fonts), sans-serif fallback stack \- Heading weight: 700–800 (bold/extrabold) \- Body weight: 400–500 (regular/medium) \- Scale (approx): xs 12px · sm 14px · base 16px · lg 18px · xl 20px · 2xl 24px · 3xl 30px · 4xl 36px · 5xl 48px · 6xl 60px \- Line height: 1.5 body · 1.15 headings \- Letter spacing: tight on headings (−0.02em), normal on body

Color Philosophy Dark-first design. Deep near-black background with a purple/violet primary accent. Muted neutral surfaces layered on top. High-contrast white text. Subtle gray borders. A warm orange/amber highlight used sparingly for badges and "Most Popular" callouts.

Background: #0a0a0f (deep off-black)
Surface: #12121a (card/panel layer)
Border: #1e1e2e (subtle separator)
Primary accent: #7c3aed → #8b5cf6 (violet-600/500)
Primary hover: #6d28d9 (violet-700)
Foreground: #f8f8ff (near-white)
Muted text: #94a3b8 (slate-400)
Success/green: #22c55e
Warning/amber: #f59e0b
Destructive/red: #ef4444

Spacing System Tailwind 4px base grid: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80 · 96px

Layout \- Max content width: 1280px (container) \- Section padding: 80–96px vertical, 24px horizontal \- Card padding: 24–32px \- Navbar height: ~64px \- Grid: 12-column, responsive (stacks to 1-col mobile)

Border Radius \- Small (badges, chips): 6px \- Medium (inputs, cards): 12px \- Large (feature cards, pricing panels): 16px \- Full (pills, avatars): 9999px

Shadows \- Card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3) \- Elevated: 0 8px 32px rgba(124,58,237,0.15) (purple glow)

Component Defaults \- Buttons: rounded-lg (12px), font-semibold, py-2.5 px-5 \- Primary CTA: violet bg, white text, subtle shadow \- Secondary CTA: ghost/outline with violet border \- Cards: dark surface bg, 1px border, rounded-xl \- Badges: pill shape, uppercase tracking-wide, xs font \- Nav: sticky top, backdrop-blur, semi-transparent dark bg

Dark/Light Mode Dark-only — no light mode detected. Color scheme is fixed dark.

:root { / TYPOGRAPHY / --font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 1.875rem; / 30px / --font-size-4xl: 2.25rem; / 36px / --font-size-5xl: 3rem; / 48px / --font-size-6xl: 3.75rem; / 60px / --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-body: 1.5; --line-height-heading: 1.15; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.05em;

/ SPACING — 4px base grid / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px / --space-20: 5rem; / 80px / --space-24: 6rem; / 96px / / Semantic aliases / --space-xs: var(--space-2); / 8px / --space-sm: var(--space-3); / 12px / --space-md: var(--space-6); / 24px / --space-lg: var(--space-12); / 48px / --space-xl: var(--space-20); / 80px /

/ COLORS — Background & Surface / --color-background: #0a0a0f; --color-surface: #12121a; --color-surface-raised: #1a1a2e; --color-border: #1e1e2e; --color-border-subtle: #16161f;

/ COLORS — Foreground & Text / --color-foreground: #f8f8ff; --color-foreground-muted: #94a3b8; --color-foreground-faint: #475569;

/ COLORS — Primary (Violet) / --color-primary: #7c3aed; --color-primary-light: #8b5cf6; --color-primary-hover: #6d28d9; --color-primary-foreground: #ffffff; --color-primary-subtle: rgba(124, 58, 237, 0.12); --color-primary-glow: rgba(124, 58, 237, 0.25);

/ COLORS — Semantic / --color-success: #22c55e; --color-success-subtle: rgba(34, 197, 94, 0.12); --color-warning: #f59e0b; --color-warning-subtle: rgba(245, 158, 11, 0.12); --color-error: #ef4444; --color-error-subtle: rgba(239, 68, 68, 0.12); --color-info: #3b82f6;

/ BORDER RADIUS / --radius-sm: 0.375rem; / 6px — badges, chips / --radius-md: 0.75rem; / 12px — inputs, buttons / --radius-lg: 1rem; / 16px — cards, panels / --radius-xl: 1.5rem; / 24px — large feature cards / --radius-full: 9999px; / pills, avatars /

/ SHADOWS / --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 0 1px rgba(124, 58, 237, 0.3), 0 8px 32px rgba(124, 58, 237, 0.15); --shadow-glow-sm: 0 4px 16px rgba(124, 58, 237, 0.2);

/ TRANSITIONS / --transition-default: all 0.2s ease; --transition-fast: all 0.15s ease; --transition-slow: all 0.3s ease; --transition-color: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

/ LAYOUT / --container-max: 1280px; --container-padding: 1.5rem; / 24px / --navbar-height: 64px; --section-padding-y: 5rem; / 80px / }

Rankfender Design Tokens

Color Tokens

Token	Value	Usage
--color-background	#0a0a0f	Page background
--color-surface	#12121a	Cards, panels
--color-surface-raised	#1a1a2e	Elevated cards
--color-border	#1e1e2e	Borders, dividers
--color-foreground	#f8f8ff	Primary text
--color-foreground-muted	#94a3b8	Secondary text
--color-foreground-faint	#475569	Placeholder, disabled
--color-primary	#7c3aed	Buttons, links, accents
--color-primary-light	#8b5cf6	Hover states, gradients
--color-primary-hover	#6d28d9	Button hover
--color-primary-subtle	rgba(124,58,237,0.12)	Chip/badge bg
--color-primary-glow	rgba(124,58,237,0.25)	Card glow effects
--color-success	#22c55e	Positive metrics
--color-warning	#f59e0b	Badges, "Most Popular"
--color-error	#ef4444	Error states
--color-info	#3b82f6	Info indicators

Spacing Tokens

Token	Value	px
--space-xs	0.5rem	8px
--space-sm	0.75rem	12px
--space-md	1.5rem	24px
--space-lg	3rem	48px
--space-xl	5rem	80px
--space-1	0.25rem	4px
--space-2	0.5rem	8px
--space-4	1rem	16px
--space-6	1.5rem	24px
--space-8	2rem	32px
--space-12	3rem	48px
--space-16	4rem	64px
--space-20	5rem	80px
--space-24	6rem	96px

Typography Tokens

Token	Value	Usage
--font-family-base	Inter, ui-sans-serif, …	All text
--font-size-sm	0.875rem	Labels, captions
--font-size-base	1rem	Body copy
--font-size-xl	1.25rem	Sub-headings
--font-size-3xl	1.875rem	Section headings
--font-size-5xl	3rem	Hero heading
--font-size-6xl	3.75rem	Hero (large screens)
--font-weight-semibold	600	Buttons, nav
--font-weight-bold	700	Headings
--font-weight-extrabold	800	Hero headline
--line-height-body	1.5	Paragraphs
--line-height-heading	1.15	H1–H3
--letter-spacing-tight	-0.02em	Large headings
--letter-spacing-wide	0.05em	Uppercase badges

Border Radius Tokens

Token	Value	Usage
--radius-sm	0.375rem (6px)	Badges, tags
--radius-md	0.75rem (12px)	Inputs, buttons
--radius-lg	1rem (16px)	Cards, panels
--radius-xl	1.5rem (24px)	Large feature cards
--radius-full	9999px	Pills, avatars

Shadow Tokens

Token	Value	Usage
--shadow-sm	0 1px 3px rgba(0,0,0,.4)	Subtle lift
--shadow-md	0 4px 16px rgba(0,0,0,.4)	Cards
--shadow-lg	0 8px 32px rgba(0,0,0,.5)	Modals, drawers
--shadow-glow	0 0 0 1px rgba(124,58,237,.3), 0 8px 32px rgba(124,58,237,.15)	Highlighted cards
--shadow-glow-sm	0 4px 16px rgba(124,58,237,.2)	Hovered CTAs

Implementation Notes — Rankfender

UI Framework \- Next.js (App Router, 14+) — confirmed via /\_next/ asset paths and HTML structure \- Tailwind CSS — highly likely; utility-class patterns throughout, 4px spacing grid, Tailwind color naming matches observed palette (violet-600, slate-400, etc.) \- No component library (Radix, shadcn, etc.) detected from HTML structure, but shadcn/ui components are plausible given the dark SaaS aesthetic

Theme Support \- Dark mode only — no prefers-color-scheme light variant detected; the site uses a fixed dark theme \- No toggle UI element observed in the nav or footer

Source Quality \- CSS values are approximated — direct access to /\_next/static/css/ bundles returned empty (Next.js hashed filenames not discoverable without the HTML source) \- Approximations are grounded in: (1) Tailwind's standard color scale (violet-600 = #7c3aed, violet-500 = #8b5cf6), (2) standard Next.js/Tailwind spacing (4px grid), (3) visual inference from layout structure described in the homepage HTML \- Font identified as Inter — the dominant choice for dark-themed SaaS products built with Tailwind; no to a different font was visible in the fetched markup

Notable Patterns \- Sticky nav with backdrop blur — common frosted-glass dark nav pattern \- Section numbering — "01 Monitor / 02 Analyze / 03 Act" suggests a stepped visual language with large outlined numbers \- Glow effects on primary cards — violet drop-shadow used to make featured/"Most Popular" cards pop against dark background \- Badge + pill system — small rounded labels for plan tiers, feature tags, trend indicators \- Gradient hero headline — hero text cycles through AI engine names ("Perplexity", "Google") suggesting animated gradient text \- High-density data UI (tables, progress bars, percentage readouts) inside mock dashboard screenshots — functional/simulator aesthetic \- CTA hierarchy: primary (violet filled) > secondary (ghost/outline) > tertiary (text link with arrow) \- "Most Popular" badge uses amber/warning color to create contrast within the pricing grid