Skip to main content
Back to Examples

Ramp

Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.

Corporate finance. Austere white canvas, one high-voltage chartreuse accent, monochrome TWK Lausanne type.

20
core colors
1
typefaces
37
tokens
Now playing — motion preview
01

Palette

primary
#212121
ink
#0A0A0A
on-primary
#FFFFFF
solar
#DFF50A
solar-light
#EAFB7A
on-solar
#212121
surface
#FFFFFF
surface-secondary
#F2F1EE
surface-tertiary
#F5F7F9
on-surface
#0A0A0A
on-surface-secondary
#6B6B66
hairline
#D2D0CC
hairline-soft
RGBA(33,33,33,0.1)
spring
#2D5AD6
spring-light
#E8F0FD
blaze
#D67A2C
smolder
#1F2E22
gradient-dusk
LINEAR-GRADIENT(TO TOP, #E4EBF6 8%, #C3D3EF 20%, #5683D2 48%, #001B4A 100%)
gradient-midnight
LINEAR-GRADIENT(TO BOTTOM, #000000, #112D5B)
gradient-daylight
LINEAR-GRADIENT(TO BOTTOM, #D2DFF3 22%, #F2F5F9 93%)
02

Typography

displayThe quick brown fox jumpsLausanne, "Lausanne Fallback", "Helvetica Neue", Arial, sans-serif
64px
headline-lgThe quick brown fox jumpsLausanne, "Lausanne Fallback", "Helvetica Neue", Arial, sans-serif
40px
headline-mdThe quick brown fox jumpsLausanne, "Lausanne Fallback", "Helvetica Neue", Arial, sans-serif
24px
body-lgThe quick brown fox jumpsLausanne, "Lausanne Fallback", "Helvetica Neue", Arial, sans-serif
16px
body-mdThe quick brown fox jumpsLausanne, "Lausanne Fallback", "Helvetica Neue", Arial, sans-serif
14px
eyebrowThe quick brown fox jumpsLausanne, "Lausanne Fallback", "Helvetica Neue", Arial, sans-serif
14px
03

Spacing & Shape

TokenValuePreview
xs4px
sm8px
md16px
lg24px
xl64px
2xl128px
04

Border Radius

TokenValuePreview
sm6px
md10px
lg12px
xl24px
full9999px
05

design.md

design.mdreadable by AI agents
tokens (raw)
name: ramp-design
version: alpha
description: >
  Ramp is Swiss-modernist minimalism: a white canvas over a subtle dot-grid, near-black
  ink (#212121), and one electric voltage — a "solar" acid-lime (~#DFF50A) reserved
  almost exclusively for the primary CTA ("Get started for free", "Make the switch").
  Type is Lausanne, a neo-grotesque set LARGE at regular weight with tight tracking, so
  headlines feel monumental but calm. Shapes are softly rounded (6–12px controls, larger
  card radii). Depth is near-flat with very soft shadows. Signature moves: the dot-grid
  texture, time-of-day gradients (dusk/midnight/daylight), the black metal card, and
  two-tone headlines (black lead-in + gray continuation).
colors:
  # Brand
  primary: '#212121'          # near-black (--black-rgb) — ink, dark UI, the metal card
  ink: '#0a0a0a'              # body text (near-pure black)
  on-primary: '#ffffff'
  # CTA voltage
  solar: '#dff50a'            # acid lime-yellow — the primary CTA fill (approx)
  solar-light: '#eafb7a'      # lighter solar tint
  on-solar: '#212121'         # dark ink on lime
  # Surface
  surface: '#ffffff'          # page canvas (with dot-grid overlay)
  surface-secondary: '#f2f1ee'# gray cards / section panels (grayLight)
  surface-tertiary: '#f5f7f9'
  # Text
  on-surface: '#0a0a0a'       # primary text
  on-surface-secondary: '#6b6b66' # two-tone gray headline continuation / meta
  # Hairlines
  hairline: '#d2d0cc'         # border-primary (grayMedium)
  hairline-soft: 'rgba(33,33,33,0.1)'
  # Secondary accents (used in illustration / data)
  spring: '#2d5ad6'           # blue
  spring-light: '#e8f0fd'
  blaze: '#d67a2c'            # amber/orange
  smolder: '#1f2e22'          # deep green-black
  # Signature gradients (time-of-day metaphors)
  gradient-dusk: 'linear-gradient(to top, #e4ebf6 8%, #c3d3ef 20%, #5683d2 48%, #001b4a 100%)'
  gradient-midnight: 'linear-gradient(to bottom, #000000, #112d5b)'
  gradient-daylight: 'linear-gradient(to bottom, #d2dff3 22%, #f2f5f9 93%)'
typography:
  display:
    fontFamily: 'Lausanne, "Lausanne Fallback", "Helvetica Neue", Arial, sans-serif'
    fontSize: 64px            # hero "Time is money. Save both."
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -0.01px
  headline-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 40px            # section heads ("One platform…", "Systems that never spoke")
    fontWeight: 400
    lineHeight: 42px
    letterSpacing: -0.005px
  headline-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
  body-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  eyebrow:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    textTransform: uppercase
    letterSpacing: 0.3px
rounded:
  sm: 6px     # small buttons / chips
  md: 10px    # inputs
  lg: 12px    # CTA button / containers
  xl: 24px    # large feature cards
  full: 9999px # icon buttons / pills
spacing:       # base unit 8px; named spacers 64 / 128
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 64px     # --spacer-m
  2xl: 128px   # --spacer-l
components:
  button-cta:                 # "Get started for free" / "Make the switch"
    backgroundColor: '{colors.solar}'
    textColor: '{colors.on-solar}'
    typography: '{typography.body-lg}'
    fontWeight: 500
    rounded: '{rounded.lg}'
    padding: '16px 24px'
  button-secondary:           # "Sign in"
    backgroundColor: 'rgba(33,33,33,0.05)'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.sm}'
    padding: '12px 16px'
  input:
    backgroundColor: '{colors.surface-secondary}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.md}'
    padding: '0 16px 0 24px'
    placeholderColor: '{colors.on-surface-secondary}'
  card:                       # feature panels ("Cards & Expenses…")
    backgroundColor: '{colors.surface-secondary}'
    rounded: '{rounded.xl}'
    textColor: '{colors.on-surface}'
    icon-button: 'white square with ↗ arrow, rounded'
  metal-card: '#212121 with concentric guilloché line pattern + chip'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 300ms
icons:
  style: outline
  stroke: 1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface}'

Ramp

ramp-design · alpha

Overview

Ramp is Swiss-modernist minimalism. The canvas is white, overlaid with a subtle dot-grid texture, and the ink is near-black (#212121). The system is almost entirely monochrome — and that restraint is the point, because it lets one electric voltage detonate: a "solar" acid-lime (~#DFF50A) used almost exclusively for the primary CTA ("Get started for free", "Make the switch"). Type is Lausanne, a neutral neo-grotesque, set LARGE at regular (400) weight with slightly negative tracking, so the hero "Time is money. Save both." feels monumental yet calm. Headlines use a two-tone trick — a black lead-in clause followed by a gray continuation ("One platform for your entire back office. Infinite agents that work 24/7."). Surfaces are soft warm-gray cards with generous rounding; depth is near-flat with whisper-soft shadows. Recurring brand devices: the dot-grid, time-of-day gradients (dusk / midnight / daylight), the black metal card with its concentric guilloché pattern, and small white ↗ icon buttons on feature cards.

Colors

Brand — the working brand color is near-black: primary #212121 for dark UI and the metal card, ink #0a0a0a for body text. The only loud color is solar #DFF50A (acid lime), reserved for the primary CTA — it appears once or twice per viewport and nowhere else as a fill.

Surface — white canvas with a faint dot-grid; feature cards and panels use a soft warm gray surface-secondary #f2f1ee; some inputs/sections use #f5f7f9.

Text — on-surface #0a0a0a for primary; on-surface-secondary #6b6b66 for the gray half of two-tone headlines, meta, and placeholders.

Hairlines — hairline #d2d0cc borders; rgba(33,33,33,0.1) softer dividers.

Secondary accents — used only in illustration/data, not chrome: spring #2d5ad6 (blue), blaze #d67a2c (amber), smolder #1f2e22 (deep green-black).

Signature gradients — Ramp themes around time of day: gradient-dusk, gradient-midnight, gradient-daylight (and a "solar" lime) appear behind hero/section art, reinforcing the "save time" narrative.

Typography

Family: Lausanne (neo-grotesque), fallback "Helvetica Neue", Arial, sans-serif. Closest open-source substitutes: Inter, Neue Haas Grotesk alternatives, or Söhne-like grotesques. The strategy is unusual and distinctive: huge sizes at regular (400) weight, never bold — the scale creates the impact, not the weight. Tracking is slightly negative on display sizes.

TokenSizeWeightLine-heightTrackingUsage
display64px40064px−0.01pxHero ("Time is money. Save both.")
headline-lg40px40042px−0.005pxSection heads (two-tone black→gray)
headline-md24px40028px0Card titles
body-lg16px40024px0Body / inputs
body-md14px40020px0Meta, supporting copy
eyebrow14px40020px+0.3pxUPPERCASE eyebrows ("US CORPORATE PAYMENTS…")

Layout

Base unit 8px, with large named spacers 64px and 128px for section rhythm. The whole page sits over a dot-grid and uses a wide centered container. Feature content is a 2-up card grid of soft-gray rounded panels ("Cards & Expenses…", "Procure to pay…", "Accounting automation…", "Banking…"), each with a small white ↗ icon-button top-right. Logo walls use a bordered tile grid. Whitespace is abundant; the hero is left-aligned with an inline email field + lime CTA.

Elevation & Depth

Near-flat. Cards rely on soft warm-gray fills and very subtle shadows rather than strong elevation. The dot-grid and floating product mocks (the metal card, app windows) provide visual interest instead of drop shadows. No glossy or heavy effects.

Shapes

Soft-rounded vocabulary: 6px small buttons, 10px inputs, 12px for the CTA and containers, 24px for large feature cards, and full for circular icon buttons. The geometry is friendly-but-precise — rounded enough to feel modern, restrained enough to stay Swiss.

Components

  • button-cta — lime solar fill, dark ink, ~12px radius, medium weight ("Get started for free", "Make the switch"). The one saturated element on the page.
  • button-secondary — faint rgba(33,33,33,0.05) tint fill, 6px radius ("Sign in").
  • input — warm-gray fill, ~10px radius, gray placeholder ("What's your work email?").
  • card — soft-gray #f2f1ee, 24px radius, with a white rounded ↗ icon-button and often a dotted-line motif; contains product UI mocks.
  • metal-card — the black #212121 Ramp card with a concentric guilloché line pattern and chip — a hero brand object.

Motion

Standard ~300ms ease. The page animates live counters ("Agents at work today: 1,718,211") and floating product elements. Motion is smooth and understated — no bounce, no parallax theatrics. The "save time" theme is reinforced by ticking stats rather than flashy transitions.

Iconography

Thin outline icons (~1.5px stroke) at 16/20/24px in on-surface. The recurring custom mark is the white ↗ (open/expand) arrow in a rounded square on every feature card. The Ramp wordmark + checkmark-swoosh is the brand logo. PDF/file and merchant logos appear in product mocks.

Do's and Don'ts

  • Do keep the canvas white with the subtle dot-grid and near-black #212121 ink.
  • Do reserve the lime solar for the primary CTA only — one or two per viewport.
  • Do set headlines huge in Lausanne at regular (400) weight, never bold.
  • Do use the two-tone headline pattern (black lead-in + gray continuation).
  • Do use soft warm-gray cards with 24px radius and the white ↗ icon-button.
  • Don't introduce extra saturated UI colors — keep secondary accents to illustration/data.
  • Don't bold the big type or tighten the airy whitespace.
  • Don't add heavy shadows; stay near-flat with the dot-grid for texture.

Known Gaps

  • Ramp authors colors in lab(); hexes above are conversions and the solar lime (~#DFF50A) in particular is approximate (mark before production use). "Lausanne" is a licensed face — substitute a neo-grotesque. The hero CTA's exact radius/padding is inferred from the rendered button.