Ramp Careers Page

Project Purpose

Jonathan Moore is applying for a Design Engineer role at Ramp. This page is a personalized parody of ramp.com/careers hosted at jonathanmoore.com/ramp — a portfolio piece that demonstrates design engineering ability by recreating their own site, then layering on original features.

Strategy: 1-for-1 recreation first, then boost with new features (session recording/playback via rrweb, live cursor presence, Figma-style threaded comments via Liveblocks).

Build Approach

Phase 1 (current): Pixel-perfect match of https://ramp.com/careers — spacing, typography, colors, layout, interactions
Phase 2: Personalize copy to tell Jonathan’s story in Ramp’s voice
Phase 3: Layer on interactive features (rrweb, Liveblocks, comments)

Copywriting Principles

Short, punchy, declarative. Ogilvy discipline — omit needless words, active voice, emphatic words at sentence end
Specific over general. Facts over comparative claims. Let the reader draw conclusions
No hedging, no jargon, no corporate language, no performative cleverness
Avoid AI tells (restrained em dash usage, no “leverage”, no “cutting-edge”)
Locked copy is final unless explicitly reopened

Architecture

Standalone page — own <html>, no BaseLayout, no global.css
Entry: src/pages/ramp/index.astro
Styles: src/styles/ramp.css (Tailwind v4 with @source scoped to ramp files only)
Components: src/components/ramp/ — React with client:load
Font: TWK Lausanne (400, 500, 700) served from public/fonts/
Full Lausanne font family (weights 50–1000, italics) available in tmp/ if more weights are needed

Design Tokens (from ramp.css :root — camelCase to match ramp.com)

Core Colors

Token	Value
`--black`	`#1a1919`
`--solar`	`#e4f222`
`--solarLight`	`#f5ff78`
`--smolder`	`#17332d`
`--grayLight`	`#f4f2f0`
`--grayMedium`	`#d2cecb`
`--grayDark`	`#6e6a68`
`--white`	`#fff`
`--blaze`	`#e96516`
`--springLight`	`#e4ebf6`
`--spring`	`#5683d2`

Text & Border

Token	Value
`--text-primary`	`#0c0a08`
`--text-primaryReverse`	`#fff`
`--text-hushed`	`#0c0a0899`
`--text-hushedReverse`	`#fff9`
`--border-primary`	`#d2cecb`

Opacity Scales

--white-0 through --white-900 (rgba with --white-rgb: 255, 255, 255)
--black-0 through --black-900 (rgba with --black-rgb: 33, 33, 33)

Gradients

Token	Description
`--dusk`	oklab gradient: springLight → spring → deep blue
`--midnight`	oklab gradient: black → navy
`--daylight`	oklab gradient: light blue → near-white

Z-index

--z-header: 300, --z-overlay: 400, --z-modal: 500, --z-popover: 600, --z-tooltip: 700, --z-toast: 800, --z-navmenu: 900

Spacers (responsive)

Breakpoint	`--spacer-m`	`--spacer-l`
Base	40px	80px
≥768px (md)	48px	96px
≥992px (lg)	64px	128px

Lab Color Overrides

Wide-gamut displays get lab() equivalents via @supports (color: lab(0% 0 0)).

Tailwind v4 Theme

Tokens are mapped into @theme for native utility class support:

Breakpoints: sm: 480px, lg: 992px, 2xl: 1440px
Colors: bg-solar, text-gray-dark, border-gray-medium, etc.
Z-index: z-header, z-overlay, z-modal, etc.

Components

Component	Section
`RampNav.tsx`	Top navigation bar
`RampHero.tsx`	Hero / masthead
`RampFoundersLetter.tsx`	Founder’s letter section
`RampJobs.tsx`	Open positions listing
`RampFAQ.tsx`	FAQ accordion
`RampFooter.tsx`	Footer
`RampPage.tsx`	Shell that composes all sections

Reference

Target: https://ramp.com/careers
Use the live site as the source of truth for any discrepancies
When comparing, use browser dev tools on the live site to extract exact values

Dev Notes

pnpm dev is always running — never start it
CSS isolation: Tailwind only scans ramp files via @source directives
Responsive spacers defined via --spacer-m / --spacer-l CSS custom properties