Skip to content
DesignMunkDesignMunk Submit a site

Solidroad

solidroad.com
We know the terrain. You know the destination.
AI Software Framer Homepage ABC Arizona Mix FT Regola Neue
Share Visit site
solidroad.com DESKTOP · 1440
Solidroad

AI Breakdown

Design export

---
version: alpha
name: Solidroad
description: We know the terrain. You know the destination.
colors:
  primary: "#fbf7eb"
  secondary: "#7c8c14"
  tertiary: "#dbf400"
  neutral: "#121212"
  border: "#374151"
  brand-coffee-bean: "#362f23"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: ABC Arizona Mix Light
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -0.018em
  headline-md:
    fontFamily: ABC Arizona Mix Light
    fontSize: 31px
    fontWeight: 300
    lineHeight: 1.29
    letterSpacing: -0.026em
  headline-sm:
    fontFamily: FT Regola Neue Regular
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.21
  headline-xs:
    fontFamily: sans-serif
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.22
  body-md:
    fontFamily: FT Regola Neue Regular
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.4
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 2px
  sm: 12px
  md: 20px
  lg: 28px
  xl: 80px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "#0000ee"
    rounded: "{rounded.sm}"
    padding: 20px 28px
    height: 69px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 20px 28px
    height: 69px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Solidroad: Alpine night hero with chartreuse trail

## Overview

Solidroad's UI is a dark-mode system designed for enterprise CX buyers. Tone is confident and quiet: serif lightweights, restrained body copy, and one vivid accent that signals action and evaluation. The interface should feel focused rather than flashy, using whitespace, hairline rules, and steady typography to organize complex information. Use the accent sparingly to guide the eye between product data and calls to action.

## Colors

- Primary (#fbf7eb): Parchment text for headlines and body on dark surfaces.
- Secondary (#7c8c14): Olive accent for subtle UI states, badges, and data points.
- Tertiary (#dbf400): Electric chartreuse for high-priority highlights and key CTAs.
- Neutral (#121212): Core canvas for dark mode sections and cards.
- Border (#374151): Graphite dividers, tables, and 1px outlines.
- brand-coffee-bean (#362f23): Deep brown used sparingly in imagery tints and brand flourishes.
- Surface ({colors.neutral}): Default surface equals the neutral canvas for visual unity.
- on-surface ({colors.primary}): Default text color on surfaces; use for legibility.

## Typography

- ABC Arizona Mix Light (headline-lg, headline-md): 40px/31px at weight 300 for primary headings; elegant, high-contrast serif suited to editorial hero copy. Availability: custom/self-hosted; agents should not assume access. Substitutes: Playfair Display, Cormorant Garamond, Spectral.
- FT Regola Neue Regular (headline-sm, body-md): 24px section heads and 14px body at light weight; readable serif for longer copy. Availability: custom/self-hosted. Substitutes: Source Serif 4, EB Garamond, Libre Baskerville.
- headline-xs uses generic sans-serif at 18px for small labels; acceptable fallbacks include Inter, System UI, or Source Sans 3.
Keep tracking as specified and prefer weight 300 where defined to maintain the airy, editorial feel.

## Layout

Spacing uses compact-to-generous steps: 2, 12, 20, 28, and 80px. Apply 80px for section top/bottom rhythm, 28px for block gaps, 20px for inner component spacing, and 12px for tight gutters and control groups. Cards use 16px internal padding per token, aligning visually between 12 and 20. Content typically aligns to a multi-column grid; keep margins and gutters in multiples of 12/20 for consistency.

## Elevation & Depth

Shadows are not used (all levels: none). Hierarchy relies on tone, borders (#374151), and whitespace. Use 1px dividers for tables and section separators, and rely on color contrast—#121212 backgrounds against #fbf7eb text—with the chartreuse accent to call attention to actions or state changes.

## Shapes

Corner language is minimal. Use 4px radius for small interactive elements (primary/secondary buttons) and 8px for larger surfaces such as cards and carousels. Link buttons are square (0px) to read as text actions. Keep radii consistent across all breakpoints.

## Components

Buttons and cards are foundational; apply exactly as follows.
- Button—Primary: background #ffffff with text #0000ee, 69px height, 20px 28px padding, 4px radius.
- Button—Secondary: text {colors.primary} on transparent or dark surface, 69px height, 20px 28px padding, 4px radius.
- Button—Link: text {colors.primary}, 0px radius; treat as textual action.
- Card: background {colors.neutral}, text {colors.primary}, 8px radius, 16px padding; add a 1px #374151 border when adjacency needs separation.

### Mountain Hero with Dashboard Overlay
- Full-bleed dark image with left-aligned headline-lg (40px) and body-md (14px). Accent line or path uses #dbf400. Primary CTA sits adjacent to copy.

### Customer Logo Rail
- Single-row brand marks under the hero. Use low-contrast monochrome logos and 12–20px horizontal gaps.

### Quality Score Table Snapshot
- A table module with hairline #374151 dividers and small badges. Text in #fbf7eb; use #dbf400 or #7c8c14 for positive grades.

### Feature Trio Panels
- Repeating blocks each with headline-sm (24px), body-md, and a small CTA. Maintain 20–28px gaps between items.

### Testimonial Carousel with Stats
- Quote text set in headline-md (31px). A container with 8px radius and subtle border; include numeric stat chips nearby.

### Integrations Grid
- Grid of partner logos beneath "Built to fit your stack." Keep even gutters (12–20px) and align to the page grid.

### Footer Slogan Lockup
- Repeats the line "We know the terrain. You know the destination." with dense navigation columns; text remains #fbf7eb on #121212.

## Do's and Don'ts

- Do keep text in #fbf7eb on #121212 for reliable contrast; avoid mid-gray body copy.
- Do reserve #dbf400 for key actions, highlights, and success states; use #7c8c14 for secondary emphasis only.
- Do maintain headline weights at 300; heavier weights break the editorial tone.
- Do keep buttons at 69px height with 20px × 28px padding and 4px radius for consistency.
- Don't add drop shadows; use 1px #374151 borders for separation.
- Don't mix multiple accent colors within a single component or card.

## Agent Prompt Guide

Quick color reference — text: #fbf7eb, background: #121212, border: #374151, accent: #dbf400.

1) Build a dark hero
- Background: #121212. Heading (40px, weight 300) in 'ABC Arizona Mix Light', Playfair Display, serif. Body (14px) in 'FT Regola Neue Regular', Source Serif 4, serif. Primary button 69px tall with 20px 28px padding, radius 4px, background #ffffff, text #0000ee. Add a thin accent line in #dbf400.

2) Create a three-card feature row
- Each card: background #121212, 1px border #374151, radius 8px, padding 16px. Headline 24px (FT Regola Neue Regular / Source Serif 4), body 14px. Add a small accent dot or icon in #dbf400. Gaps between cards: 28px; section top/bottom: 80px.

3) Testimonial carousel
- Container: #121212, 1px border #374151, radius 8px, no shadow. Quote set in 31px (ABC Arizona Mix Light / Playfair Display). Include small stat chips bordered in #374151 with text #fbf7eb and tiny accents in #7c8c14.

4) Logo rail
- Single row of logos beneath a section intro. Use 12px horizontal gaps and dim logos to ~60–70% opacity on #121212. Section padding: 80px top and bottom.

5) KPI stat band
- Use a full-width band on #121212 with four stats. Labels 14px body, numbers 31px headline-md. Underline key numbers with a 2px rule in #dbf400; maintain 28px vertical spacing.

## Similar Brands

- Intercom: Dark surfaces with disciplined highlights; Intercom leans friendlier with rounded sans type versus Solidroad's editorial serifs.
- Zendesk: Calm, editorial marketing with large type; Zendesk favors lighter canvases and softer greens over acid accents.
- Observe.AI: AI QA positioning with dark UI and bright highlights; Observe uses bolder gradients where Solidroad stays near-black.
- Gong: Data-forward storytelling and strong accent colors; Gong's purple energy is louder, while Solidroad opts for quieter serif styling and a single neon thread.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 36 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 36 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 12 hours ago