.webp)
Rankfender
Rankfender Design System
Source:
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
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.