Skip to content
Library

Ramp. Editorial finance desk, black-and-white pages with a single neon highlighter.

  • Finance
  • Light theme
  • 8 colors
  • 1 typeface

Ramp operates as a black-and-white editorial system punctuated by a single highlighter-yellow accent — the visual equivalent of a finance journal with a neon Sharpie. The interface stays nearly monochrome: warm off-white canvas, white cards, hairline gray borders, and deep near-black text. That one vivid chartreuse (#e4f222) appears only where money moves — CTAs, live counters, active states — making every action feel switched-on. Typography is a single-weight, neo-grotesque custom face (lausanne) at 400, used at large display sizes with tight leading (lineHeight ~1.0 at 64px) and positive tracking on small uppercase labels. Components are flat, hairline-bordered, and shadow-free: cards rest on borders, not shadows, with 12–16px radii; buttons are 6px-radius rectangles. Density is comfortable, rhythm is 8/12/16/24px, and motion is moderate and utility-focused rather than decorative.

Screenshot of Ramp
Captured from ramp.com on October 11, 2026

Ramp design system

Ramp

Brand1

  • Primary action fill, live counters, active-state highlights — the only chromatic accent in the system, making CTAs read as switched-on

Neutrals7

  • Primary text, heading fill, dark surface backgrounds — near-black with the faintest warm cast

  • Dark panels, navigation bar, inverted sections — slightly warmer and lighter than Ink for tonal variation

  • Secondary text, hushed captions, muted labels — the 60% opacity voice of --text-primary

  • Subtle borders, muted backgrounds, skeleton states — the 200-step in the black scale

  • Card borders, divider lines, structural outlines — 1px hairlines replace shadows as the elevation primitive

  • Page canvas, subtle card washes, link background hover states — warm off-white base layer

  • Card surfaces, modal panels, light fills, reversed text on dark backgrounds

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Ink on Highlighter Yellow

16.02 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.