--- version: alpha name: "Ramp" description: "Ramp picked the most counter-intuitive position in fintech: black type on white pages, broken only by a single pastel-yellow `#fcfb70` band that arrives once per scroll-length like a highlighter pulled across a paragraph in a printed report. The brand colour is functionally *black*; the yellow is sectional, not actionable. This makes Ramp read more like a McKinsey deliverable or a Pentagram annual report than a SaaS site — disciplined, editorial, almost institutional. Söhne (or Söhne-class neo-grotesque) handles every weight; the H1 sets at 500 with hard `-0.03em` tracking, giving it a quiet authority that Brex's heavier weights or Stripe's gradients can't match. The pill button radius is the one warm gesture in an otherwise rectilinear, hairline-ruled system. There is no gradient, no glow, no glassy chrome: every page is a stack of editorial sections separated by a thin 10% black rule, and every CTA is a flat black pill with white type. The yellow band — and the way Ramp centres testimonials and customer logos inside it — is a direct descendant of New York Times product pages and Linear's section-as-zone composition." colors: bg: "#ffffff" bg-soft: "#fafaf7" bg-paper: "#f7f6f1" bg-yellow: "#fcfb70" bg-yellow-soft: "#fefee0" bg-ink: "#0a0a0a" bg-ink-pure: "#000000" surface: "#ffffff" surface-soft: "#f9f9f7" surface-elev: "#fafaf7" surface-yellow: "#fcfb70" text: "#0a0a0a" text-strong: "#000000" text-body: "#1a1a1a" text-muted: "#5b5b58" text-soft: "#8a8a85" text-faint: "#b0b0a8" text-on-ink: "#ffffff" text-on-ink-soft: "#a3a3a0" text-on-yellow: "#0a0a0a" brand: "#0a0a0a" brand-strong: "#000000" brand-hover: "#1a1a1a" brand-pressed: "#000000" accent: "#fcfb70" accent-strong: "#e8e750" accent-soft: "#fefee0" accent-ink: "#0a0a0a" border: "rgba(10, 10, 10, 0.10)" border-soft: "rgba(10, 10, 10, 0.06)" border-strong: "rgba(10, 10, 10, 0.18)" border-on-yellow: "rgba(10, 10, 10, 0.16)" on-brand: "#ffffff" on-accent: "#0a0a0a" link: "#0a0a0a" link-hover: "#000000" link-visited: "#3a3a36" shadow-ambient: "rgba(10, 10, 10, 0.04)" scrim: "rgba(10, 10, 10, 0.50)" success: "#1a7f3a" success-soft: "rgba(26, 127, 58, 0.10)" warning: "#a36b00" warning-soft: "rgba(163, 107, 0, 0.10)" danger: "#9a1f1f" danger-soft: "rgba(154, 31, 31, 0.10)" info: "#0a0a0a" info-soft: "rgba(10, 10, 10, 0.06)" typography: display: fontFamily: "Söhne" fontSize: "96px" lineHeight: 1.55 letterSpacing: "-0.035em" body: fontFamily: "Söhne" fontSize: "17px" lineHeight: 1.55 mono: fontFamily: "Söhne Mono" rounded: button: "8px" card: "12px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "64px" --- ## Overview ## Overview Ramp's marketing surface is the quietest in fintech. Pages are white, type is black, and exactly one band per scroll-length is washed in the signature pastel `#fcfb70`. There is no gradient, no glassy glow, no glow-in-the-dark dashboard. The H1 lands at 80px / 500 weight with `-0.03em` tracking — restrained, but tracked tight enough to feel newspaper-like. The brand reads as if a Pentagram-trained editorial designer was hired to lay out a corporate-card website the way they'd lay out an annual report: hairline rules, full-bleed sectional bands, mono caps eyebrows, and a single pastel highlighter that only appears at strategic moments. The chromatic move that distinguishes Ramp is that yellow is *not* a brand colour in the usual sense — it isn't on the logo, isn't on the CTA, isn't on icons. It's a **sectional device**, painted across a full horizontal band, almost always behind a customer testimonial or a metric. The brand colour is, functionally, black. Every CTA is a flat black pill with white type. Every headline is set at 500 weight in Söhne (or a Söhne-class neo-grotesque) with hard negative tracking. Every divider is a 10%-black hairline. The discipline is total: a Ramp page reads like a printed page that has been hyperlinked, not a SaaS marketing site. What makes the yellow land as confident rather than decorative is the way it's deployed. The yellow band is full-bleed — it spans the entire viewport width, breaks the page rhythm, and contains a centred quotation or metric set in 28px Söhne 400 with comfortable 1.3 line-height. The band is preceded and followed by white space. It arrives once per scroll-length. There is no second yellow zone competing for attention. This restraint is the whole brand — the moment you add a second yellow accent, a yellow icon, a yellow line of text, the page collapses into the kind of brand-on-everything SaaS noise Ramp was specifically built to avoid. The atmospheric vocabulary that captures Ramp's feeling: *broadsheet-quiet, annual-report-grade, hairline-ruled, Söhne-tracked-tight, McKinsey-deliverable, Pentagram-editorial, single-highlighter, sectional-yellow, pill-on-rectilinear, mono-caps-eyebrows, newspaper-column-prose, institutional-confident.* Every surface lands like it was designed by an in-house brand team that read editorial design history before they read SaaS marketing best-practice — which is, in fact, exactly what Ramp's brand team did. The third register is the **discipline of weight 500 at large sizes**. Söhne at 500 with `-0.03em` tracking gives the H1 a quiet authority. A heavier 700 would push it into ad territory; a lighter 400 into editorial preciousness. The 500/`-0.03em` pair is the precise sweet spot for *broadsheet authority without ad-grade volume*. This is the typographic detail Brex pushes the opposite way (600/`-0.03em` for declarative confidence); Ramp pulls it toward calm. **Key Characteristics** - Pure white `#ffffff` canvas — the dominant tone, no warm-cream tint, no cool-grey panel - Signature pastel-yellow `#fcfb70` band — full-bleed, sectional, one per scroll-length - Near-black `#0a0a0a` body type — slight warmth in the deep, not pure black - Söhne neo-grotesque at weight 500 — display, body, button, all the same family at three weights - H1 at 80px / 500 with `-0.03em` tracking — broadsheet authority, not ad-grade volume - Body at 17px / 1.55 line-height — slightly larger than default, optimised for reading - Mono caps eyebrows in Söhne Mono at `0.06em` tracking — newspaper kicker convention - Flat black pill CTAs (radius 9999) — the single warm gesture in an otherwise rectilinear system - 8px card radius — hairline-only borders, no shadows on default cards - 1280px max page width with 32px container gutters — generous editorial margin - 128px section padding for major bands — the most generous vertical rhythm in fintech - 10% black hairline rules — the only divider Ramp uses between sections - Optional dark mode where the yellow band stays unchanged — black inverts to white only - Newspaper-column prose at 680px max width — ~68 characters per line for reading rhythm ## Colors ### Primary - **Canvas** (`#ffffff`): pure white page background. The dominant tone — Ramp doesn't tint the canvas warm or cool. The whiteness is the editorial signature. - **Off-White** (`#fafaf7`): the softest panel tint, barely warm. Used for elevated cards inside dense sections and for testimonial rails. - **Paper Warm** (`#f7f6f1`): the rare second neutral, used for footnote rails or methodology blocks where a warmer ground signals a quieter register. - **Text** (`#0a0a0a`): near-black with a subtle warmth — the colour that carries body and headline. Not pure black; the slight warmth keeps the page from reading as cold-tech. - **Text Strong** (`#000000`): peak ink for display copy where maximum contrast is required. ### Brand & Sub-Brand - **Brand** (`#0a0a0a`): the primary action colour is **black**. Not yellow. Yellow is sectional; black is actionable. The black pill is the brand-defining element. - **Brand Strong** (`#000000`): peak ink for primary CTA fill on hero placements. - **Brand Hover** (`#1a1a1a`): subtle warming on hover — the pill shifts barely a tone darker. - **Brand Pressed** (`#000000`): pressed-state returns to peak ink. ### Accent (the Yellow) - **Accent** (`#fcfb70`): the signature pastel-yellow. Used as a full-bleed sectional band and, sparingly, as the fill of a `NEW` mono-caps badge. Never as a foreground colour. - **Accent Strong** (`#e8e750`): deeper highlighter yellow. Used only for hover state on yellow-fill chips. - **Accent Soft** (`#fefee0`): palest yellow wash. Used for inline pull quotes inside dense prose where a full band would over-emphasise. - **Accent Ink** (`#0a0a0a`): the near-black ink that always rides on the yellow ground. The pair is non-negotiable — black-on-yellow at 16.4:1 contrast is the brand's signature contrast pair. ### Interactive - **Link** (`#0a0a0a` with underline): inline body links use the newspaper convention — same colour as body text, distinguished by a 1px underline. Underline thickens to 2px on hover. - **Link Hover**: stays `#0a0a0a`; underline thickens. No colour change. - **Selected** (`#fcfb70` background under `#0a0a0a` text): selected nav, active filter chip — the rare interactive use of the yellow. - **Disabled** (`#b0b0a8`): faint warm-grey for disabled controls. - **Focus** (2px `rgba(10, 10, 10, 0.16)` ring + 2px outline-offset): near-black translucent focus ring. No coloured glow. ### Neutral Scale The neutral ramp is dense and disciplined: - **Pure White** (`#ffffff`) — canvas - **Off-White** (`#fafaf7`) — soft panel - **Paper Warm** (`#f7f6f1`) — rare warm-tinted panel - **Border Soft** (`rgba(10, 10, 10, 0.06)`) — quiet divider - **Border Default** (`rgba(10, 10, 10, 0.10)`) — the editorial signature hairline - **Border Strong** (`rgba(10, 10, 10, 0.18)`) — focused inputs - **Text Faint** (`#b0b0a8`) — placeholder, disabled - **Text Soft** (`#8a8a85`) — eyebrow secondary - **Text Muted** (`#5b5b58`) — captions, helper text - **Text Body** (`#1a1a1a`) — body paragraph, slightly softer than headlines - **Text** (`#0a0a0a`) — headlines and body - **Text Strong** (`#000000`) — peak display The warm undertone in the deep ink and the soft warm tint in the off-white panel are deliberate. They keep the page from reading as the cold blue-greys of legacy enterprise software, and they create kinship with the printed-paper aesthetic Ramp inherits from editorial design. ### Surface & Borders - **Canvas** (`#ffffff`) — page background - **Surface Soft** (`#f9f9f7`) — quiet card alternative - **Surface Elevated** (`#fafaf7`) — softer elevated panel - **Surface Yellow** (`#fcfb70`) — full-bleed yellow band as a card-group ground - **Surface Ink** (`#0a0a0a`) — inverted near-black band - **Border Default** (`rgba(10, 10, 10, 0.10)`) — 10% black hairline rule, the signature - **Border Soft** (`rgba(10, 10, 10, 0.06)`) — 6% quieter divider - **Border Strong** (`rgba(10, 10, 10, 0.18)`) — 18% near-black for focused inputs - **Border On-Yellow** (`rgba(10, 10, 10, 0.16)`) — hairline that survives on the yellow ground ### Shadow Colors Ramp largely **avoids shadows**. The brand discipline is hairline-only: cards are bordered, not lifted. The only sanctioned shadows are: - `rgba(10, 10, 10, 0.04) 0 1px 2px` — ambient (rare, used on the sticky nav post-scroll) - `rgba(10, 10, 10, 0.08) 0 8px 24px -8px` — elevated (dropdowns and popovers only) - `rgba(10, 10, 10, 0.10) 0 12px 32px -16px` — popover (deeper drop for nested menus) - `rgba(10, 10, 10, 0.20) 0 24px 64px -16px` — modal (the only element that admits a real shadow) The shadow philosophy is *editorial*. Printed pages don't have shadows; Ramp doesn't either. Depth is achieved through **bands and rules**, not lift. The page is a vertical stack — white band → yellow band → white band → ink band — separated by 1px / 10% black rules. Cards inside bands use the same hairline plus an optional flat fill. ### Semantic The semantic palette is **deliberately quiet**. Ramp's success/warning/danger colours are darker, more editorial, and never bright: - **Success** (`#1a7f3a` on `rgba(26, 127, 58, 0.10)`): forest-green confirmation. Quiet, editorial, never the bright emerald of consumer apps. - **Warning** (`#a36b00` on `rgba(163, 107, 0, 0.10)`): umber-amber advisory. Calm, not alarmist. - **Danger** (`#9a1f1f` on `rgba(154, 31, 31, 0.10)`): ink-red error. Restrained, never bright red. - **Info** (`#0a0a0a` on `rgba(10, 10, 10, 0.06)`): info reads as plain near-black with an underline — the same convention as inline links. The semantic tones are tuned to match the editorial register. Bright primary colours (consumer-app green/red/blue) would clash with the broadsheet voice and would compete with the yellow band for chromatic attention. ## Typography ### Font Family **Primary**: `"Söhne", "Söhne Breit", "Inter Display", Inter, "Helvetica Neue", Arial, sans-serif`. **Söhne** is a neo-grotesque type family from Klim Type Foundry / Lineto. Used at weight 500 for display copy with `-0.03em` letter-spacing — the hard tracking is half the brand voice. The fallback chain runs Inter Display → Inter → Helvetica → Arial; on no-license environments, Inter at 500 is the closest open-source substitute, though Söhne's tighter terminals and slightly higher x-height are subtly different. **Mono companion**: `"Söhne Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace`. Söhne Mono carries section eyebrows, footnote markers, status pills, and pricing tabular numerals. The mono pair is the brand's secondary-identity tell — when Ramp wants to mark a section as *editorial-meta* (kicker, footnote, page number, citation), Söhne Mono at `0.06em` tracking does the work. **OpenType features**: Söhne renders with `kern` and `liga` always on. `ss01` enables for stylistic alternates that clean up the `R` and `K` joins in display sizes. Mono adds `liga`, `tnum`, and `zero` — `tnum` enables tabular figures for pricing alignment and `zero` provides the slashed zero for code references. The discipline: weight 500 across all display copy, weight 400 for body, weight 500 for nav and labels. There is no medium-weight middle ground at display sizes — display lives at 500. Body lives at 400. Nav links and form labels live at 500. The system has clear tiers without ambiguity. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | display-hero | Söhne | 96px | 500 | 0.95 | -0.035em | ss01 | The largest hero variant — landing page only | | display-xl | Söhne | 80px | 500 | 0.98 | -0.03em | — | The canonical Ramp H1 — most pages | | display-lg | Söhne | 64px | 500 | 1.0 | -0.03em | — | Section opener | | h1 | Söhne | 56px | 500 | 1.04 | -0.025em | — | Sub-page title | | h2 | Söhne | 40px | 500 | 1.10 | -0.02em | — | Marketing section H2 | | h3 | Söhne | 28px | 500 | 1.20 | -0.01em | — | Card heading, sub-section | | h4 | Söhne | 22px | 500 | 1.30 | -0.005em | — | Sub-card heading | | h5 | Söhne | 18px | 500 | 1.40 | 0 | — | Inline emphasis | | eyebrow | Söhne Mono | 12px | 500 | 1.40 | 0.06em | uppercase | Section pre-label | | section-label | Söhne Mono | 13px | 500 | 1.40 | 0.06em | uppercase | Marketing section eyebrow | | body-lg | Söhne | 20px | 400 | 1.50 | 0 | — | Hero deck, lede paragraph | | body-md | Söhne | 17px | 400 | 1.55 | 0 | — | Default body — note the bump from 16 | | body-sm | Söhne | 14px | 400 | 1.45 | 0 | — | Card body, dense rows | | caption | Söhne | 13px | 400 | 1.40 | 0 | — | Image caption, footer micro | | caption-mono | Söhne Mono | 12px | 500 | 1.40 | 0 | tnum | Pricing values, dashboard meta | | label | Söhne | 12px | 500 | 1.30 | 0 | — | Form field label | | label-mono | Söhne Mono | 11px | 500 | 1.30 | 0.06em | uppercase | Mono caps label | | button-md | Söhne | 15px | 500 | 1.20 | 0 | — | Default CTA copy | | button-sm | Söhne | 13px | 500 | 1.20 | 0 | — | Compact button | | quote-pull | Söhne | 32px | 400 | 1.30 | -0.015em | — | Pull quote inside dense prose | | quote-hero | Söhne | 44px | 400 | 1.20 | -0.02em | — | Hero quote inside the yellow band | | code-inline | Söhne Mono | 14px | 500 | 1.40 | 0 | — | Inline `code` reference | ### Principles - **Weight 500 + `-0.03em` tracking is the brand voice.** Söhne at 500 with hard negative tracking is the canonical Ramp display. Drop to 400 and the page reads as editorial-precious (Mercury territory); push to 700 and it reads as ad-grade (Klarna territory). The 500/`-0.03em` pair is the precise sweet spot. - **Single-family system with mono companion.** Söhne Sans + Söhne Mono cover everything. Adding a serif (Mercury territory) or a third sans (most-of-SaaS territory) breaks the brand's neo-grotesque commitment. - **Body holds at weight 400.** Body never goes 500 except for nav links and labels. The 400-vs-500 split is the brand's hierarchy logic; the gap is small but rigorously maintained. - **Negative tracking compresses with size.** `-0.035em` at 96px, `-0.03em` at 64–80px, `-0.025em` at 56px, `-0.02em` at 40px, `-0.01em` at 28px, near-zero below 22px. - **17px body, 1.55 line-height.** Slightly larger than the typical 16px and slightly more open than Brex's 1.50 — the editorial voice prefers a more generous reading rhythm. - **Quote-pull at weight 400.** The pull-quote inside the yellow band steps *down* in weight from the 500 of headlines, creating a softer, more humanist register that contrasts with the structural display copy. - **Mono caps for eyebrows, status pills, and pricing values.** Söhne Mono at 11–13px / 0.06em tracking is the brand's secondary-identity tell. - **`tnum` enabled in pricing displays.** Tabular numerals make pricing comparison tables align column-wise — a polish detail that signals attention. - **No italic in display.** Söhne is set roman across all hierarchy. Body italics carry quoted titles only. - **Underlined inline links — newspaper convention.** Ramp's links are not coloured; they're the same near-black as body text with a 1px underline. Underline thickens to 2px on hover. This is the broadsheet move. ## Layout ### Spacing System - Base unit: **8px** (with 4px micro-rhythm for inline elements) - Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64 · 96 · 128 · 160 · 192 · 240` - Section padding (vertical): **128px** for major marketing bands — the most generous in fintech; 96px between minor sections; 32–48px between content blocks - Card internal padding: **32px** on default cards; 48px on featured editorial cards; 24px on compact tiles - Inter-card gutters: 32px between cards in 3-up; 24px in dense 4-up; 16px in 6-up customer logo grids - The yellow band itself uses **128px** vertical padding — the brand breathes most generously inside the chromatic moment ### Grid & Container - Max content width: **1280px** with 32px gutters — generous editorial margin - 12-column grid; hero blocks span full width inside the container; feature grids span 4-3-2-1 columns by breakpoint - Reading column caps at **680px** for prose-heavy content (case studies, blog posts) — newspaper column rhythm at ~68 characters - Hero treatment: full-bleed white canvas with 80px / 500 H1, left-aligned, deck below at 20px / 400, dual CTA pair (black pill primary + outlined secondary), product imagery on the right ### Whitespace Philosophy The page breathes — 128px section padding is the most generous in fintech (typical SaaS is 80–96px, Brex pushes to 112px, Ramp goes further to 128px). The whitespace is part of the brand's "annual report" pitch — readers expect editorial space and reward generosity with attention. The breathing room compounds with the yellow band: when the band arrives, it has full air around it. The contrast between dense editorial sections (paragraph + figure + footnote rail) and the spacious yellow moment is the macro brand voice. ### Section Cadence A typical Ramp page runs: 1. **Hero** — `#ffffff` canvas with mono-caps eyebrow, 80px / 500 H1 left-aligned, 20px / 400 deck, dual CTA pair (black pill primary + outlined secondary), product imagery on the right side 2. **Feature Section** — `#ffffff` band with editorial 3-up card grid, hairline borders, no shadows, 28px / 500 card titles + 17px / 400 body 3. **Yellow Sectional Band** — `#fcfb70` full-bleed band with centred testimonial in Söhne 32–44px / 400, optional customer logo grid below 4. **Editorial Long-Form** — `#ffffff` band with prose column at 680px width, body at 17px / 1.55 line-height, pull quotes in Söhne 32px / 400, footnote rail at 13px / 400 5. **Comparison Table** — Dense data table with mono caps headers, hairline rows, `tnum` enabled for pricing alignment 6. **Closing CTA** — Centered black pill on white canvas, single dominant action, mono-caps eyebrow above 7. **Footer** — `#000000` peak black inversion, multi-column link grid in 14px / 400 soft-on-dark The "alternation" is *white + white + yellow + white + white + black footer*. The brand commits to white as the default ground; the yellow is a single moment per page; the black footer provides closure. ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Top nav collapses to logo + Get Started + hamburger; hero H1 drops 80→44px; cards 1-up; yellow band padding reduces to 80px vertical; testimonial drops to 24px / 400 | | Tablet | 640–1024px | Top nav keeps inline links (without mega-menu); hero H1 at 56px; cards 2-up; yellow band padding at 96px vertical | | Desktop | 1024–1280px | Full nav with mega-menu; hero H1 at 64–80px; cards 3-up; yellow band at 128px vertical padding | | Wide | 1280–1440px | Content width caps at 1280; gutters absorb the rest | | Ultra | >1440px | Page locks to 1280; gutters expand to 64px | ### Touch Targets - Buttons: 44px minimum height across all sizes — Apple HIG compliant - Top-nav links: 44×44px tap area even at 15px text - Yellow status pill (NEW badges): 28px visual but 12px vertical padding for 44px effective - Pricing tier toggle: 44×44px segmented-control thumb ### Collapsing Strategy - **Top nav** at <1024px: primary nav links collapse into hamburger sheet; `Get Started` black pill stays visible - **Hero CTA pair** at <640px: stacks vertically (black pill above, outlined secondary below) - **Card grids**: 4 → 3 → 2 → 1 columns - **Yellow band**: vertical padding reduces from 128px → 96px → 80px across breakpoints; testimonial type drops from 44px → 32px → 24px - **Customer logo grid**: 16 → 8 → 4 → 3 columns; logos render monochrome at all sizes - **Pricing cards**: stack vertically at <1024px; featured tier remains prominent ### Image Behavior Customer logos use SVG with `currentColor` so they switch from `#0a0a0a` on white to `#0a0a0a` on yellow without asset swap. Product imagery uses `aspect-ratio` to prevent layout shift. Marketing illustrations use `srcset` with 1x/2x. Ramp avoids decorative imagery — most pages render entirely with type, hairlines, and the yellow band, with product screenshots being the only image content. ### Container Queries Used inside dense data tables: when card width crosses 480px, comparison table switches from horizontally-scrolling to fully-visible columns. At narrower widths, columns stack into card-style rows. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no border, no shadow | Page canvas, body sections, dense data | | 1 — Hairline | 1px `rgba(10, 10, 10, 0.10)` border | Default editorial cards (the signature) | | 2 — Hairline + Soft | hairline + `rgba(10, 10, 10, 0.04) 0 1px 2px` | Sticky nav post-scroll | | 3 — Elevated | `rgba(10, 10, 10, 0.08) 0 8px 24px -8px` | Dropdowns, popovers | | 4 — Popover | `rgba(10, 10, 10, 0.10) 0 12px 32px -16px` | Nested menus, tooltips | | 5 — Modal | scrim `rgba(10, 10, 10, 0.50)` + `rgba(10, 10, 10, 0.20) 0 24px 64px -16px` | Application dialogs, confirmations | ### Shadow Philosophy Ramp's depth philosophy is **editorial**: printed pages don't have shadows, and Ramp doesn't either. The page is built from **bands and rules** rather than lifted surfaces. Cards are bordered, not floated. The default card geometry is hairline-only — no shadow at any level. This is the discipline that defines the brand. The shadow tiers exist only for elements where editorial depth fails — dropdowns must overlap content, modals must scrim everything beneath them, popovers must visually escape their containers. For these elements, Ramp uses **near-black-tinted** shadows (`rgba(10, 10, 10, …)`) at low opacities. The shadow is functional, not decorative. The discipline differs from Brex's brand-glow shadow (which extends brand chroma into negative space) and Mercury's softer multi-layer shadows (which signal consumer-app polish). The single exception: customer-logo grids inside the yellow band sometimes use a faint `rgba(10, 10, 10, 0.04)` ambient shadow under the white logo cards to create separation against the chromatic ground. Even here, the shadow is so soft it's barely perceptible — the brand's discipline holds. ## Shapes | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Decorative dividers, focus indicators inside chips | | XS | 4px | Status badges, tag chips | | SM | 6px | Compact chips | | MD | 8px | Cards, inputs — the dominant editorial radius | | LG | 12px | Modals, hero panels, large surfaces | | XL | 16px | Rare emphasis (featured editorial cards) | | Pill | 9999px | All buttons — the only warm gesture | Ramp's signature pairing is **8px cards + 9999px pills** — the contrast between hard 8px card corners and the fully-rounded button is the brand's signature shape rhythm. Every page repeats it. There are no zero-radius elements except section dividers (which are 1px hairlines, not shapes). The 9999px pill is reserved for buttons exclusively — never for cards, never for chips. The radius ladder is tight (2 → 4 → 6 → 8) before jumping to the modal/featured tier (12 → 16). The compression of the small tiers reinforces the editorial discipline; the jump to pill-radius for buttons creates the only warm gesture in an otherwise rectilinear system. This shape ladder is what distinguishes Ramp from Mercury (which uses 12–16px cards) and from Brex (which uses 16px cards + 8px buttons). Ramp goes 8px cards + full pills — sharper cards, fully rounded buttons. ## Components ### Buttons **Primary Pill (Black)** — The signature button. Background: `#0a0a0a` near-black. Text: white at 15px / 500 in Söhne, **9999px radius (full pill)**, 12×22px padding, 44px height. Hover: background warms to `#1a1a1a` over 180ms — no translate, no shadow. Use case: *Get started*, *Talk to sales*, *Apply for Ramp*, *Open account*. The black pill on white is the brand-defining element. **Secondary Pill (Outlined)** — `#ffffff` fill, near-black text at 15px / 500, 1px solid `#0a0a0a` border (full ink, not a soft grey), 9999px radius, 44px height, 12×22px padding. Hover: background fills `rgba(10, 10, 10, 0.04)`. Use case: *Watch demo*, *See pricing*, *Read documentation* — paired adjacently with the primary. **Ghost Pill** — Transparent background, near-black text at 15px / 500, 9999px radius, 8×16px padding. Hover fills `rgba(10, 10, 10, 0.04)`. Use case: nav links, footer secondaries, in-card text actions. **Pill on Yellow** — Same `#0a0a0a` fill / white text as primary, but used inside a yellow band. The contrast (black-on-yellow + black-pill) is dramatic and intentional — never invert to a yellow pill on yellow. ### Cards **Default Editorial Card** — `#ffffff` fill, 1px hairline border at `rgba(10, 10, 10, 0.10)` (the signature 10% black rule), **8px radius**, 32px padding, **no shadow**. The dominant card across feature grids, customer logos, partner directories. Hover: border opacity steps from 10% to 18% over 180ms — no lift, no shadow change. **Paper Card** — `#fafaf7` warm-off-white fill, 1px `rgba(10, 10, 10, 0.06)` border, 8px radius, 32px padding. Used inside the few warm-tinted panels (footnote rails, methodology blocks, citation lists). The paper-warm fill provides separation from the white canvas without needing a heavier border. **Card on Yellow Band** — `#ffffff` fill, hairline border deepens to `rgba(10, 10, 10, 0.16)` to compensate for the surrounding chroma, 8px radius, 32px padding. Used when a white card sits inside a yellow sectional band — most often for testimonial cards or featured-customer blocks. ### The Yellow Band The most distinctive component. **Background**: `#fcfb70` full-bleed. **Padding**: `128px 32px` — the brand's generous vertical rhythm. **Content**: centred testimonial in Söhne 32–44px / 400 / `-0.015em` tracking, near-black ink, max-width 920px. Optional: customer logo grid below the quote in 16-up at desktop, monochrome SVG with `currentColor`. The yellow band is the brand's most considered design moment. It arrives once per scroll-length, is preceded and followed by white space, and contains the page's most quotable content. There is no second yellow zone competing for attention. This is the discipline that defines the brand. ### Badges, Tags, Pills **Yellow Status Pill** — `#fcfb70` brand-yellow fill, near-black text at 11px / 500 in Söhne Mono uppercase with `0.06em` tracking, 4px radius, 2×8px padding. Use case: `NEW`, `FEATURED`, `BETA` — the rare sanctioned use of the yellow outside the band. **Tag Chip** — `#ffffff` fill, muted text at 11px / 500 in Söhne Mono, 1px `rgba(10, 10, 10, 0.10)` hairline border, 4px radius, 2×8px padding. Use case: feature labels, integration tags. The hairline border is what makes it readable on white without filling. **Mono Caps Eyebrow** — No chrome, just type. Söhne Mono 12px / 500 / uppercase / `0.06em` in `#5b5b58`. Sits above the H1 like a newspaper kicker. The eyebrow is the editorial signature — no SaaS site uses this convention, but every newspaper page does. ### Inputs / Forms **Text Input** — `#ffffff` fill, near-black text at 16px / 400 in Söhne, 1px border at `rgba(10, 10, 10, 0.18)`, **8px radius**, 44px height, 12×14px padding. Placeholder colour at `#8a8a85`. On focus: border shifts to `#0a0a0a` peak ink and a 2px translucent near-black ring appears (`rgba(10, 10, 10, 0.16) 0 0 0 2px`). No coloured glow, no purple ring — the focus state stays editorial. **Select** — Same shape as text-input with a chevron icon at right (12px) at muted-text colour. **Checkbox** — 16×16px square, 4px radius, 1px `#0a0a0a` border at rest, fills with `#0a0a0a` on check with white tick at 14px stroke 1.5. ### Navigation **Top Nav** — `rgba(255, 255, 255, 0.92)` translucent white fill with `backdrop-filter: blur(8px)`, **64px height**, 1px bottom hairline at `rgba(10, 10, 10, 0.10)` always visible (not just on scroll — Ramp commits to the rule). Ramp wordmark left in Söhne 20px / 500. Center: nav links (Product, Use cases, Customers, Pricing, Resources) at 15px / 500 ghost-button style. Right: ghost `Sign in` + primary black-pill `Get started` button. **Footer** — `#000000` peak black inversion band — the deepest darkest closer to the page. White wordmark, multi-column link grid in Söhne 14px / 400 in `#a3a3a0` soft-on-dark. Legal links + social icons at the bottom. ### Optional / Decorative **Pull Quote (Inline)** — Söhne 32px / 400 / `-0.015em`, near-black text, with optional `#fefee0` palest-yellow background wash (the soft yellow used only inline, not full-bleed). 4px-radius rounded corners on the wash. **Modal** — `#ffffff` fill, 12px radius (slightly more relaxed than the 8px card to signal *modal-grade*), 32px padding, modal shadow `rgba(10, 10, 10, 0.20) 0 24px 64px -16px`. Backdrop scrim at `rgba(10, 10, 10, 0.50)`. Max-width 520px for confirmations, 720px for forms. **Toast** — `#ffffff` fill, 1px hairline border, 8px radius, 12×16px padding. Icon + message in Söhne 14px / 400 + dismiss button. Quiet semantic colours for success/warning/danger. **Customer Logo Grid** — Inside the yellow band: 16-up at desktop, monochrome SVG with `currentColor` ink, gap 32px. The grid is the brand's conversion proof — *these are the companies that use Ramp* — placed inside the yellow ground for maximum chromatic emphasis. ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, color transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal entry, hero reveal - **Out-Soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — gentle settle; dropdown reveal, scroll-reveal ### Duration Buckets | Bucket | Value | Use | |--------|-------|-----| | Instant | 0ms | Border opacity changes, link underline weight | | Fast | 100ms | Link underline fade-in, focus ring fade-in | | Standard | 180ms | Button background colour swap, card border opacity | | Slow | 240ms | Modal entry, dropdown reveal, scroll-reveal opacity | | Page | 300ms | Route transitions | ### Per-Component Recipes - **Link hover**: underline thickness `1px → 2px` over 100ms standard; colour stays `#0a0a0a` near-black at all states. - **Primary pill button hover**: background `#0a0a0a → #1a1a1a` over 180ms standard. **No translate, no shadow change.** The discipline is rectilinear-and-flat; consumer-app micro-lifts would break the editorial register. - **Secondary pill button hover**: background `transparent → rgba(10, 10, 10, 0.04)` over 180ms; border colour unchanged. - **Ghost button hover**: background `transparent → rgba(10, 10, 10, 0.04)` over 180ms. - **Card hover**: border opacity `10% → 18%` over 180ms standard. **No lift, no shadow.** The brand is hairline-only. - **Yellow band hover-on-card**: white card inside yellow band hovers with border opacity `16% → 24%` and a subtle 2px upward translate (the only translate Ramp uses). - **Scroll-reveal**: marketing-page sections fade in over 240ms ease-out-soft when entering viewport at 80% threshold. **Opacity only** — no translateY rise that competes with the scroll itself. - **Modal entry**: backdrop scrim fades in over 180ms; modal content fades + scales from 0.98 to 1.0 over 240ms ease-emphasized. - **Dropdown reveal**: fades in over 180ms ease-out-soft from `translateY(-4px)` to `translateY(0)`. ### Page Transitions Page-to-page navigation uses a 300ms cross-fade with the sticky header staying static. Anchor smooth-scroll uses 600ms ease-emphasized. The sticky nav border-bottom fades in over 100ms when scrollY > 8px (it's already visible at rest, but it deepens slightly). ### Reduced Motion Respects `prefers-reduced-motion: reduce`. Scroll-reveal becomes static on-mount. Modal scale-in becomes opacity-only. All `translate` and `scale` transforms suppress entirely — replaced with instant render or opacity-only fades. Durations halve where they remain. Card hover loses any translate; only the border opacity change remains. Button hover loses nothing because it had no translate to begin with — the brand's restraint pays off in reduced-motion compliance. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | `#0a0a0a` text on `#ffffff` canvas | 19.6 | AAA at all sizes | | `#0a0a0a` text on `#fafaf7` panel | 18.7 | AAA at all sizes | | `#0a0a0a` text on `#fcfb70` yellow band | 16.4 | AAA at all sizes | | `#5b5b58` muted on `#ffffff` | 7.1 | AAA at body sizes | | `#8a8a85` soft on `#ffffff` | 4.5 | AA at body sizes | | `#ffffff` on `#0a0a0a` near-black pill | 19.6 | AAA at all sizes | | `#0a0a0a` link underlined on `#ffffff` | 19.6 | AAA at all sizes | | `#1a7f3a` success on `#ffffff` | 5.4 | AA at body sizes | | `#9a1f1f` danger on `#ffffff` | 6.3 | AA at body sizes | The contrast ratios are all extreme — Ramp's near-black-on-white discipline produces 19.6:1 ratios that exceed AAA at every size. The yellow band's 16.4:1 is also AAA — the pastel-yellow + near-black pair is one of the most contrast-correct accent pairings in fintech. ### Focus Indicators Focus ring is `2px solid rgba(10, 10, 10, 0.16)` near-black translucent ring with 2px outline-offset. The ring stays editorial — no coloured glow, no purple ring, no brand-chroma extension. The discipline is *visible focus without decorative emphasis*. On the yellow band, the focus ring deepens to `2px solid rgba(10, 10, 10, 0.30)` to compensate for the surrounding chroma. ### ARIA Patterns - **Top nav**: `