designlang
Brand guidelines #0051c3

June 25, 2026

replit.com

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

Page intent
landing
System grade
B 84/100
Tokens
8 colours · 5 sizes
Generated
designlang
Chapter 00

Essence

replit.com is a Ruler brand — cool, bold, kinetic, timeless and authoritative — anchored on #0051c3 and Times, mixed motion.

Ruler archetype · 59% fit · vs Explorer

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 primary · 1 secondary · 1 accent · 5 neutrals · 8 total

Primary #0051C3
RGB
0, 81, 195
HSL
215°, 100%, 38%
Secondary #DE5052
RGB
222, 80, 82
HSL
359°, 68%, 59%
Accent #521010
RGB
82, 16, 16
HSL
0°, 67%, 19%

Neutrals

#404040
#000000
#595959
#FFFFFF
#EBEBEB

Full palette

#404040
#000000
#595959
#0051C3
#FFFFFF
#EBEBEB
#DE5052
#521010

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

Chapter 04

Typography

1 families · 5 sizes · 3 weights

Display
Times
Body
Times
Weights
400, 300, 600

Specimen

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

Scale

StepSizeSample
t00 60px Quick brown fox jumps over t
t01 30px Quick brown fox jumps over t
t02 16px Quick brown fox jumps over t
t03 15px Quick brown fox jumps over t
t04 13px Quick brown fox jumps over t
Chapter 05

Spacing

Base 3px · 4 steps captured

Rhythm

3px
23px
53px
160px
Chapter 06

Shape

2 radii · 0 elevation tiers

Border radii

2px
5px
Chapter 07

Iconography

unknown · 0 captured

Library
unknown
Confidence
0%
Stroke style
—

No icons captured.

Chapter 08

Motion

Feel: mixed · 1 durations · 0 easings

Duration scale

150ms
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 · — · —

CTA verbs

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: #0051c3;
  --font-display: "Times";
  --space-base: 4px;
  --radius-md: 5px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#0051c3' },
      fontFamily: { display: ['Times', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '5px' },
    },
  },
};

Run npx designlang pack replit.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.