designlang
Brand guidelines #141414

June 25, 2026

ramp.com

A reading of the visual language at https://ramp.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 85/100
Tokens
1 colours · 2 sizes
Generated
designlang
Chapter 00

Essence

ramp.com is an Everyman brand — understated, timeless, approachable and grounded — anchored on Times, mixed motion.

Everyman archetype · 70% fit · vs Innocent

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 45% confidence
Material language
flat
Imagery style
none
Component library
unknown
Stack
unknown
Voice tone
neutral
Chapter 03

Colour

1 neutrals · 1 total

Neutrals

#000000

Full palette

#000000

WCAG 100% · 0 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

1 families · 2 sizes · 1 weights

Display
Times
Body
Times
Weights
400

Specimen

Quick brown fox jumps over the lazy dog.
AaBbCc 0123456789 ?!&

Scale

StepSizeSample
t00 16px Quick brown fox jumps over t
t01 13px Quick brown fox jumps over t
Chapter 05

Spacing

Base 8px · 2 steps captured

Rhythm

8px
13px
Chapter 06

Shape

0 radii · 0 elevation tiers

Border radii

Chapter 07

Iconography

unknown · 0 captured

Library
unknown
Confidence
0%
Stroke style
—

No icons captured.

Chapter 08

Motion

Feel: mixed · 0 durations · 0 easings

Chapter 09

Components

unknown · 0 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →
Chapter 10

Voice

neutral · — · —

Chapter 11

Accessibility

100% WCAG 2.1 contrast
0 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #0066cc;
  --font-display: "Times";
  --space-base: 4px;
  --radius-md: 8px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#0066cc' },
      fontFamily: { display: ['Times', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '8px' },
    },
  },
};

Run npx designlang pack ramp.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.