ramp.com
ramp.com ↗
B2B SaaS product site using a strict grid framework with neon yellow accent blocks to puncture neutral grayscale backgrounds, creating visual hierarchy through chromatic isolation rather than scale.
Colors
Industry
Mood
Screen type
Type style
Visual details
How it works
- hero:
- Full-width image carousel with overlaid left-aligned headline and CTA button; neon yellow highlight bar behind key phrase creates a single focal point above the fold without competing visual weight.
- layout:
- Predominantly single-column with alternating 50/50 and full-width section blocks; repeating pattern of text-left/image-right and image-left/text-right creates rhythm; product screenshots and UI mockups sit flush-edge within neutral containers with generous whitespace padding.
- type:
- Sans-serif hierarchy (likely -apple-system or modern geometric sans) with 2–3 size tiers; headlines use tight tracking and moderate weight; body copy stays compact at smaller x-height for density; neon yellow appears only on key phrases and numerals, never on body text.
- colors:
- Neutral palette (off-white, light gray, charcoal) as container; neon yellow (#FFFF00 or similar) deployed as surgical accent marks—behind headlines, in button states, and rule bars—creating intentional visual stops that guide reading order.
- distinctive:
- Neon yellow highlight bars used as a typographic underlining tool that extends beyond text width, creating the effect of a highlighter marker applied with mathematical precision—this single mechanical gesture unifies an otherwise austere B2B aesthetic.