.webp)
Solidroad
AI Optimization for human and AI agents
No items found.
No items found.
Visual identity
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