Dodo
19 KiB
Ramp — Style Reference
dawn-lit financial cockpit. A premium fintech control surface where dark sky opens onto warm paper-white decks, anchored by a single vermilion ignition button.
Theme: light
Ramp's visual system is a financial command center rendered in dawn light: a dramatic gradient sky opens the page, then resolves into warm white surfaces organized around product photography and a single vermilion accent. The palette is overwhelmingly neutral — warm off-whites, deep obsidians, and slate borders — letting the vermilion CTA carry the only chromatic voice. Plus Jakarta Sans, a custom sans-serif, sets every word with quiet authority at scale, from 64px hero headlines down to 13px captions. Components are built on a strict two-radius system: 4px for functional controls, 12px for cards and surfaces. The page reads as premium and confident, not playful — the vermilion accent is functional urgency, never decoration.
Tokens — Colors
| Name | Value | Token | Role |
|---|---|---|---|
| Vermilion Pulse | #ff3b1f |
--color-vermilion-pulse |
Bold primary accent for CTAs, active states, product highlights, badges, and high-emphasis interactive moments. Adds heat and confidence without fighting the Cobalt Glow hero treatment. |
| Cobalt Glow | #5683d2 |
--color-cobalt-glow |
Hero gradient midpoint, decorative accents, link hover washes. Provides the atmospheric blue that carries the dawn-sky hero treatment |
| Obsidian | #0c0a08 |
--color-obsidian |
Primary text color, dark canvas surfaces, navigation bar, footer. The near-black that grounds the system with 19.8:1 contrast against white |
| Paper | #ffffff |
--color-paper |
Page background in light sections, text on dark surfaces, input fills. The clean canvas that lets product imagery and the vermilion accent command attention |
| Limestone | #f4f2f0 |
--color-limestone |
Card surfaces, elevated panels, warm neutral fills. Replaces drop shadows as the separation mechanism in light-mode layouts |
| Charcoal | #1a1919 |
--color-charcoal |
Elevated dark surfaces, filled dark buttons, card overlays. One step lifted from Obsidian for subtle depth without true black |
| Slate | #4d505d |
--color-slate |
Borders, dividers, muted structural elements. Carries a cool undertone that keeps it from competing with the warm Limestone surfaces |
| Fog | #999ba3 |
--color-fog |
Secondary text, helper copy, muted labels, icon strokes. The 50% gray that handles all de-emphasized content |
| Bone | #d2cecb |
--color-bone |
Hairline borders on light surfaces, subtle dividers, card outlines. Warmer than Slate, used where Slate would feel cold against Limestone |
Tokens — Typography
Plus Jakarta Sans — Primary typeface for all UI, headings, body, nav, buttons, and display. Plus Jakarta Sans is a custom commissioned sans-serif with optical sizing across 11 steps — its compressed line-height at 64px (0.74-1.05) gives hero headlines an editorial slab feel without switching to a serif. Weight 400 carries everything; 500 is reserved for nav and emphasis. · --font-sans
- Substitute: Inter, Söhne, Neue Haas Grotesk
- Weights: 400, 500
- Sizes: 10, 13, 14, 16, 18, 20, 24, 28, 40, 48, 64
- Line height: 0.74-1.60
- Letter spacing: normal across all sizes — the typeface does the work, not tracking
- OpenType features:
"ss01" - Role: Primary typeface for all UI, headings, body, nav, buttons, and display. Plus Jakarta Sans is a custom commissioned sans-serif with optical sizing across 11 steps — its compressed line-height at 64px (0.74-1.05) gives hero headlines an editorial slab feel without switching to a serif. Weight 400 carries everything; 500 is reserved for nav and emphasis.
Arial — Arial — detected in extracted data but not described by AI · --font-arial
- Weights: 400
- Sizes: 14px
- Line height: 1.2
- OpenType features:
"ss01" - Role: Arial — detected in extracted data but not described by AI
Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|---|---|---|---|---|
| micro | 10px | 1.2 | — | --text-micro |
| caption | 13px | 1.46 | — | --text-caption |
| body | 16px | 1.5 | — | --text-body |
| subheading | 18px | 1.43 | — | --text-subheading |
| heading-sm | 20px | 1.38 | — | --text-heading-sm |
| heading | 24px | 1.33 | — | --text-heading |
| heading-lg | 28px | 1.3 | — | --text-heading-lg |
| display-sm | 40px | 1.2 | — | --text-display-sm |
| display | 48px | 1.14 | — | --text-display |
| display-lg | 64px | 1.05 | — | --text-display-lg |
Tokens — Spacing & Shapes
Base unit: 4px
Density: comfortable
Spacing Scale
| Name | Value | Token |
|---|---|---|
| 4 | 4px | --spacing-4 |
| 8 | 8px | --spacing-8 |
| 12 | 12px | --spacing-12 |
| 16 | 16px | --spacing-16 |
| 20 | 20px | --spacing-20 |
| 24 | 24px | --spacing-24 |
| 28 | 28px | --spacing-28 |
| 32 | 32px | --spacing-32 |
| 40 | 40px | --spacing-40 |
| 48 | 48px | --spacing-48 |
| 52 | 52px | --spacing-52 |
| 64 | 64px | --spacing-64 |
| 76 | 76px | --spacing-76 |
| 128 | 128px | --spacing-128 |
| 160 | 160px | --spacing-160 |
| 176 | 176px | --spacing-176 |
Border Radius
| Element | Value |
|---|---|
| nav | 4px |
| tags | 9999px |
| cards | 12px |
| images | 12px |
| inputs | 4px |
| buttons | 4px |
Shadows
| Name | Value | Token |
|---|---|---|
| subtle | rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset |
--shadow-subtle |
Layout
- Page max-width: 1200px
- Section gap: 80px
- Card padding: 24px
- Element gap: 8px
Components
Primary Action Button
Role: Conversion anchor — the vermilion ignition
Filled with #ff3b1f (Vermilion Pulse), white text in Plus Jakarta Sans 500 at 16px, 4px radius. Padding 10px vertical, 20px horizontal. Appears as 'Get started for free' and 'See a demo'. The vermilion against warm whites creates urgency without aggression.
Outlined/Ghost Button
Role: Secondary navigation action
Transparent background, 1px border in #4d505d (Slate), Plus Jakarta Sans 500 at 16px in #0c0a08. 4px radius, 10px/20px padding. Used for 'Sign in' and less critical CTAs.
Text Link with Arrow
Role: Inline navigation affordance
Plus Jakarta Sans 400 at 16px in #0c0a08, followed by a → arrow glyph. 'Learn more →' pattern repeated across product cards. The arrow is part of the text flow, not a separate icon.
Email Capture Input
Role: Lead generation field
White (#ffffff) background, 1px border in #d2cecb (Bone), Plus Jakarta Sans 400 at 16px placeholder text in #999ba3 (Fog). 4px radius, 16px horizontal padding, 14px vertical. Fused with the primary button as a combined input+CTA unit.
Product Feature Card
Role: Feature discovery unit in the 'Get to know Ramp' grid
Limestone (#f4f2f0) background, 12px radius, 24px padding. Contains a bold heading (Plus Jakarta Sans 500, 20px), descriptor (Plus Jakarta Sans 400, 16px, Fog), a 'Learn more →' link, and a product image at the bottom with 12px radius. Arranged in a 4-column grid with 24px gaps.
Customer Story Photo Card
Role: Social proof through vertical-specific photography
Full-bleed photograph with 12px radius, 220-280px height. Category label ('STUDIOS', 'RETAIL', 'FINANCIAL SERVICES') overlaid top-left in Plus Jakarta Sans 500 13px white. Subcategory pill at bottom-left. No drop shadow — the image itself provides visual weight.
Category Tag/Pill
Role: Segment classifier on customer cards
Semi-transparent dark overlay (Charcoal at 60% opacity), Plus Jakarta Sans 500 at 13px white, 9999px radius, 4px vertical and 10px horizontal padding. Floats over photography.
Navigation Bar
Role: Primary site navigation
Transparent over hero gradient, switches to Obsidian (#0c0a08) on scroll. Logo left ('ramp' + vermilion triangle mark), nav links center (Products, Solutions, Customers, Resources, Pricing with dropdown carets), actions right (Sign in ghost + 'See a demo' vermilion). 4px radius on all interactive elements.
Social Proof Badge
Role: Trust signal in hero
Compact star icon + '2,000+ 5 star reviews' in Plus Jakarta Sans 400 at 14px in #ffffff (on dark hero). The star is the G2 logo mark. Sits above the hero headline as a credibility anchor.
Trust Logo Bar
Role: Enterprise credibility strip
Single row of 10+ customer logos (Quora, Visa, Complex, Stripe, CBRE, SoulCycle, Notion, Discord, GoodRx, Barry's, Eventbrite) in grayscale at uniform height (~24px). No logos in color — the bar is intentionally desaturated to keep the vermilion accent unique.
Product Device Mockup
Role: Multi-platform product showcase in hero
Composite of a laptop (centered, slight 3D angle), a phone (right, tilted), and a physical card (foreground, dark with white Ramp logo). Laptop displays the Spend Intelligence dashboard with line charts. The layered device composition communicates desktop + mobile + physical card capability in a single visual.
Section Heading Block
Role: Editorial section opener
Centered headline in Plus Jakarta Sans 400 at 48-64px, Obsidian (#0c0a08). Subheadline in Plus Jakarta Sans 400 at 18px, Fog (#999ba3). 32px gap between headline and subhead. Frequently followed by a single text link with arrow as tertiary action.
Do's and Don'ts
Do
- Use #ff3b1f (Vermilion Pulse) exclusively for primary action buttons and active states — no text, icons, or decorative fills
- Apply 4px radius to all functional controls (buttons, inputs, nav items) and 12px to all surfaces (cards, images) — never mix within a category
- Set hero headlines at 48-64px in Plus Jakarta Sans 400 with line-height 1.05-1.14 for editorial impact
- Use the blue gradient (#0c0a08 → #5683d2 → #f4f2f0) only for hero openers and never repeat it on interior sections
- Separate light-mode cards with a Limestone (#f4f2f0) fill against the Paper (#ffffff) canvas rather than drop shadows
- Pair every CTA with an arrow glyph (→) to reinforce clickability and directional flow
- Keep all customer logos in the trust bar grayscale — chromatic logos would compete with the vermilion accent
Don't
- Don't use #ff3b1f for body text, icons, borders, or backgrounds — it is action-only and loses impact if diluted
- Don't apply drop shadows to cards or surfaces — the warm surface layering is the elevation system
- Don't use system fonts or serifs for headlines — Plus Jakarta Sans with the "ss01" feature is non-negotiable for brand recognition
- Don't round buttons to 12px or cards to 4px — the dual-radius system is what makes the geometry feel intentional
- Don't place the vermilion CTA on the dark hero gradient where it loses contrast — keep it on light surfaces where the vermilion pops
- Don't use pure black (#000000) for text — Obsidian (#0c0a08) is warmer and reads as premium rather than flat
- Don't use the Cobalt Glow (#5683d2) for CTAs or text links — it is atmospheric decoration for the hero gradient only
Surfaces
| Level | Name | Value | Purpose |
|---|---|---|---|
| 0 | Paper Canvas | #ffffff |
Base page background for all light-mode sections |
| 1 | Limestone Card | #f4f2f0 |
Product feature cards, elevated content panels |
| 2 | Charcoal Overlay | #1a1919 |
Dark elevated surfaces, filled dark buttons, image overlays |
| 3 | Obsidian Ground | #0c0a08 |
Deepest surface for navigation, footer, and hero dark zones |
Elevation
- Navigation bar glass edge:
inset 0 0 2px 0 rgba(255, 255, 255, 0.6)
Imagery
Product photography dominates: the hero composites a laptop (Spend Intelligence dashboard with multi-line charts in pastel blues and pinks), a tilted phone (dark-mode mobile UI), and a physical Ramp card (dark with white logo). Product feature cards use contained screenshots and conceptual photography (a hand holding a phone scanning, a document upload interface). Customer story cards use full-bleed lifestyle photography with people — diverse, candid, mid-action, color-rich. All imagery is treated with 12px corners; no drop shadows or vignettes. Icons are minimal: a small star (G2 rating), a triangle mark in the logo, and → arrows. The visual language is product-confident, not lifestyle-aspirational.
Layout
Max-width 1200px centered container with generous outer margins. The page follows a three-act structure: (1) a full-bleed dark hero with a blue-to-white gradient sky, left-aligned headline and CTA, right-aligned multi-device product mockup; (2) a centered 'Get to know Ramp' heading over a 4-column card grid with 24px gaps, each card stacking title, description, link, then image; (3) a horizontally-scrolling customer story carousel with overlapping photo cards. Section rhythm alternates between dark (hero) and light (all subsequent sections) with 80px vertical gaps. The trust logo bar acts as a visual bridge between the hero and the feature grid, centered as a single row. Navigation is a top bar that sits transparent over the hero and shifts to Obsidian on scroll.
Agent Prompt Guide
Quick Color Reference
- Text: #0c0a08 (Obsidian)
- Background: #ffffff (Paper)
- Card surface: #f4f2f0 (Limestone)
- Border: #d2cecb (Bone) on light, #4d505d (Slate) on dark
- Accent: #ff3b1f (Vermilion Pulse)
- primary action: no distinct CTA color
Example Component Prompts
No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
-
Product Feature Card: Limestone (#f4f2f0) background, 12px radius, 24px padding. Heading at 20px Plus Jakarta Sans 500, #0c0a08. Body at 16px Plus Jakarta Sans 400, #999ba3. 'Learn more →' link at 16px Plus Jakarta Sans 400, #0c0a08, with arrow as part of text. Product image at bottom, 12px radius, full card width.
-
Customer Story Card: Full-bleed photo, 12px radius, 260px height. Category label top-left in a Charcoal pill (60% opacity, 9999px radius, Plus Jakarta Sans 500 13px white, 4px/10px padding). Subcategory label bottom-left in same pill style.
-
Trust Logo Bar: Single horizontal row, centered, logos at 24px height, all rendered in #999ba3 (Fog) grayscale. 40px horizontal gaps between logos. No chromatic logos, no labels, no borders.
Similar Brands
- Mercury — Same fintech-premium positioning with a single accent color, dark-to-light hero transition, and warm neutral card surfaces replacing drop shadows
- Brex — Similar card-based feature grid layout, full-bleed customer photography, and a restrained palette that lets one accent color own conversion moments
- Linear — Same strict dual-radius system (small for controls, larger for surfaces), custom sans-serif typography at large display sizes, and avoidance of drop shadows in favor of surface color shifts
- Plaid — Same multi-device product mockup treatment in the hero (laptop + phone + card), centered section headings with arrow-link CTAs, and a trust-logo bar as a credibility bridge
Quick Start
CSS Custom Properties
:root {
/* Colors */
--color-vermilion-pulse: #ff3b1f;
--color-cobalt-glow: #5683d2;
--color-obsidian: #0c0a08;
--color-paper: #ffffff;
--color-limestone: #f4f2f0;
--color-charcoal: #1a1919;
--color-slate: #4d505d;
--color-fog: #999ba3;
--color-bone: #d2cecb;
/* Typography — Font Families */
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-micro: 10px;
--leading-micro: 1.2;
--text-caption: 13px;
--leading-caption: 1.46;
--text-body: 16px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.43;
--text-heading-sm: 20px;
--leading-heading-sm: 1.38;
--text-heading: 24px;
--leading-heading: 1.33;
--text-heading-lg: 28px;
--leading-heading-lg: 1.3;
--text-display-sm: 40px;
--leading-display-sm: 1.2;
--text-display: 48px;
--leading-display: 1.14;
--text-display-lg: 64px;
--leading-display-lg: 1.05;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-52: 52px;
--spacing-64: 64px;
--spacing-76: 76px;
--spacing-128: 128px;
--spacing-160: 160px;
--spacing-176: 176px;
/* Layout */
--page-max-width: 1200px;
--section-gap: 80px;
--card-padding: 24px;
--element-gap: 8px;
/* Border Radius */
--radius-md: 4px;
--radius-lg: 7.8px;
--radius-xl: 12px;
/* Named Radii */
--radius-nav: 4px;
--radius-tags: 9999px;
--radius-cards: 12px;
--radius-images: 12px;
--radius-inputs: 4px;
--radius-buttons: 4px;
/* Shadows */
--shadow-subtle: rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset;
/* Surfaces */
--surface-paper-canvas: #ffffff;
--surface-limestone-card: #f4f2f0;
--surface-charcoal-overlay: #1a1919;
--surface-obsidian-ground: #0c0a08;
}
Tailwind v4
@theme {
/* Colors */
--color-vermilion-pulse: #ff3b1f;
--color-cobalt-glow: #5683d2;
--color-obsidian: #0c0a08;
--color-paper: #ffffff;
--color-limestone: #f4f2f0;
--color-charcoal: #1a1919;
--color-slate: #4d505d;
--color-fog: #999ba3;
--color-bone: #d2cecb;
/* Typography */
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-micro: 10px;
--leading-micro: 1.2;
--text-caption: 13px;
--leading-caption: 1.46;
--text-body: 16px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.43;
--text-heading-sm: 20px;
--leading-heading-sm: 1.38;
--text-heading: 24px;
--leading-heading: 1.33;
--text-heading-lg: 28px;
--leading-heading-lg: 1.3;
--text-display-sm: 40px;
--leading-display-sm: 1.2;
--text-display: 48px;
--leading-display: 1.14;
--text-display-lg: 64px;
--leading-display-lg: 1.05;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-52: 52px;
--spacing-64: 64px;
--spacing-76: 76px;
--spacing-128: 128px;
--spacing-160: 160px;
--spacing-176: 176px;
/* Border Radius */
--radius-md: 4px;
--radius-lg: 7.8px;
--radius-xl: 12px;
/* Shadows */
--shadow-subtle: rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset;
}