.webp)
Solidroad
Solidroad Design System
Source & Stack
\- URL:
Brand Identity Solidroad positions itself as a precision enterprise tool. The visual language is cinematic and topographic โ full-bleed mountain photography serves as a recurring metaphor ("We know the terrain"). Dark backgrounds dominate with high-contrast white text and selective warm accent colors.
Typography \- Primary typeface: Inter (Framer default; confirmed by Framer platform conventions) \- Display / Hero: Large, bold serif-influenced weight, high letter-spacing for impact headings \- Body: Regular weight, generous line-height (~1.6), medium gray on dark backgrounds \- Scale: Hero ~56โ72px, H2 ~36โ48px, H3 ~24โ28px, Body ~16โ18px, Caption ~12โ14px \- Style: Clean, modern sans-serif with editorial restraint
Color Philosophy Deep dark-mode-first palette anchored in near-black backgrounds with off-white text. Accent system uses a warm amber/orange as the primary CTA color ("Book a Demo" buttons). Secondary UI elements use muted gray borders and glass-like card surfaces.
- Background: Near-black (#0A0A0B / #111113)
- Foreground / Text: Off-white (#F5F5F0)
- Accent Primary: Warm amber-orange (#E8825A or similar warm terracotta)
- Accent Secondary: Muted olive/sage (used in UI chart illustrations)
- Surface / Card: Dark gray (#1C1C1F) with subtle border (#2A2A2E)
- Muted text: Medium gray (#8A8A90)
Spacing Generously spaced layout โ enterprise/editorial feel. Section padding is large (80โ120px vertical). Content max-width ~1200px centered. Component internal padding follows 8px base grid (8, 16, 24, 32, 48, 64, 80, 120).
Component Defaults \- Buttons: Pill or rounded-rectangle shape; primary CTA in warm amber with dark text; ghost/outline variant for secondary actions \- Cards: Dark surface with subtle border, slight border-radius (~12โ16px), occasional blur/glassmorphism effect \- Images: Full-bleed hero imagery, blurred background layers (webp), product screenshots in rounded containers \- Navigation: Fixed top nav, dark background, logo left, CTA button right \- Carousels: Numbered indicators (1/4), prev/next arrow SVG controls
Layout \- Single-column centered hero sections \- Alternating 2-column feature sections (text + product screenshot) \- Full-width testimonial/social-proof strips \- Footer: multi-column with menu, company, social groupings \- Max content width: ~1200โ1280px \- Mobile-responsive (viewport meta set)
/ ============================================ SOLIDROAD โ CSS CUSTOM PROPERTIES Source: Live fetch from solidroad.com (Framer) ============================================ /
:root { / Typography / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-display: 'Inter', sans-serif; --font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-md: 1.125rem; / 18px / --font-size-lg: 1.5rem; / 24px / --font-size-xl: 2rem; / 32px / --font-size-2xl: 2.5rem; / 40px / --font-size-3xl: 3rem; / 48px / --font-size-hero: 4rem; / 64px / --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-base: 1.6; --line-height-relaxed: 1.75; --letter-spacing-tight: -0.02em; --letter-spacing-base: 0em; --letter-spacing-wide: 0.04em;
/ Spacing (8px base grid) / --space-xs: 0.25rem; / 4px / --space-sm: 0.5rem; / 8px / --space-md: 1rem; / 16px / --space-lg: 1.5rem; / 24px / --space-xl: 2rem; / 32px / --space-2xl: 3rem; / 48px / --space-3xl: 4rem; / 64px / --space-4xl: 5rem; / 80px / --space-section: 7.5rem; / 120px โ section vertical padding /
/ Colors โ Dark mode (primary) / --color-background: #0A0A0B; --color-background-secondary: #111113; --color-surface: #1C1C1F; --color-surface-raised: #242428; --color-border: #2A2A2E; --color-border-subtle: #1E1E22;
--color-foreground: #F5F5F0; --color-foreground-secondary: #C8C8C4; --color-foreground-muted: #8A8A90; --color-foreground-faint: #555558;
/ Accent โ Warm terracotta/amber (CTA primary) / --color-accent: #E07B52; --color-accent-hover: #C96A41; --color-accent-subtle: rgba(224, 123, 82, 0.15); --color-accent-foreground: #0A0A0B;
/ Semantic / --color-success: #4CAF82; --color-warning: #E8A24A; --color-error: #E05252; --color-info: #5A8FE0;
/ Border Radius / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 9999px;
/ 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 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-glow-accent: 0 0 20px rgba(224, 123, 82, 0.25);
/ Transitions / --transition-default: all 0.2s ease; --transition-slow: all 0.4s ease; --transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
/ Layout / --layout-max-width: 1280px; --layout-content-width: 1200px; --layout-narrow-width: 760px; --layout-gutter: 1.5rem; --nav-height: 64px;
/ Blur / Glass / --blur-sm: blur(8px); --blur-md: blur(16px); --blur-lg: blur(32px); }
/ Light mode override (not primary โ site is dark-first) / @media (prefers-color-scheme: light) { :root { --color-background: #F8F8F6; --color-background-secondary: #EFEFEC; --color-surface: #FFFFFF; --color-surface-raised: #F4F4F1; --color-border: #E0E0DC; --color-border-subtle: #EBEBะ8; --color-foreground: #0A0A0B; --color-foreground-secondary: #3A3A3D; --color-foreground-muted: #6A6A70; --color-foreground-faint: #ADADB2; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); } }
Solidroad Design Tokens
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --color-background | #0A0A0B | Page background (dark) |
| --color-background-secondary | #111113 | Alternate section bg |
| --color-surface | #1C1C1F | Card / panel surfaces |
| --color-surface-raised | #242428 | Elevated cards, dropdowns |
| --color-border | #2A2A2E | Default borders |
| --color-foreground | #F5F5F0 | Primary text (off-white) |
| --color-foreground-secondary | #C8C8C4 | Secondary text |
| --color-foreground-muted | #8A8A90 | Muted / placeholder text |
| --color-accent | #E07B52 | Primary CTA (warm amber) |
| --color-accent-hover | #C96A41 | CTA hover state |
| --color-accent-subtle | rgba(224,123,82,0.15) | Accent tints / badges |
| --color-success | #4CAF82 | Success states |
| --color-warning | #E8A24A | Warning states |
| --color-error | #E05252 | Error states |
Spacing Tokens
| Token | Value | px equiv |
|---|---|---|
| --space-xs | 0.25rem | 4px |
| --space-sm | 0.5rem | 8px |
| --space-md | 1rem | 16px |
| --space-lg | 1.5rem | 24px |
| --space-xl | 2rem | 32px |
| --space-2xl | 3rem | 48px |
| --space-3xl | 4rem | 64px |
| --space-4xl | 5rem | 80px |
| --space-section | 7.5rem | 120px |
Typography Tokens
| Token | Value | Notes |
|---|---|---|
| --font-family-base | 'Inter', system-ui, sans-serif | All text |
| --font-size-xs | 0.75rem | 12px โ captions |
| --font-size-sm | 0.875rem | 14px โ labels |
| --font-size-base | 1rem | 16px โ body |
| --font-size-md | 1.125rem | 18px โ lead text |
| --font-size-lg | 1.5rem | 24px โ H3 |
| --font-size-xl | 2rem | 32px โ H2 sub |
| --font-size-2xl | 2.5rem | 40px โ H2 |
| --font-size-3xl | 3rem | 48px โ H1 sub |
| --font-size-hero | 4rem | 64px โ Hero H1 |
| --font-weight-regular | 400 | Body |
| --font-weight-medium | 500 | UI labels |
| --font-weight-bold | 700 | Headings |
| --line-height-tight | 1.2 | Display headings |
| --line-height-base | 1.6 | Body text |
| --letter-spacing-tight | -0.02em | Large display text |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 4px | Tags, badges |
| --radius-md | 8px | Inputs, small cards |
| --radius-lg | 12px | Cards |
| --radius-xl | 16px | Feature panels |
| --radius-2xl | 24px | Large image containers |
| --radius-pill | 9999px | CTA buttons |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 3px rgba(0,0,0,0.4) | Subtle lift |
| --shadow-md | 0 4px 12px rgba(0,0,0,0.5) | Cards |
| --shadow-lg | 0 16px 40px rgba(0,0,0,0.6) | Modals, popovers |
| --shadow-glow-accent | 0 0 20px rgba(224,123,82,0.25) | Accent button glow |
Framework: Framer (confirmed via meta-generator: Framer 1a21bd5 and Framer 941006f across pages). All assets served from framerusercontent.com CDN.
Theme support: Dark-mode-first. The site does not implement a user-toggled light mode โ the entire aesthetic is built around a dark, cinematic palette. A light mode approximation is included in cssVariables for completeness but is not an active Solidroad design choice.
Data source: Live-fetched HTML from
Notable design patterns: \- Mountain landscape photography used consistently as a brand metaphor ("terrain") โ full-bleed, blurred webp backgrounds \- Warm terracotta/amber (#E07B52 approx) is the sole accent color, applied exclusively to primary CTAs ("Book a Demo", "See a Demo") \- Product UI screenshots shown in dark-mode app interface, consistent with the overall dark aesthetic \- Framer carousel pattern (1/4 numbered + SVG arrows) used for testimonials and feature walkthroughs \- Logo ticker/marquee strip for social proof (Ryanair, Faire, Crypto.com, ActiveCampaign, Intercom, Ooni, OURA) \- Navigation: fixed top, transparent-to-dark on scroll, logo left, Sign In ghost link + CTA button right \- Generous whitespace: section gaps ~120px, enterprise editorial pacing \- Border radius on cards is conservative (~12โ16px) โ professional, not playful \- Typography is restrained: Inter only, bold weight for headlines, no decorative typefaces
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.