designlang
Brand guidelines #e4ff97

May 15, 2026

figma.com

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

Page intent
landing
System grade
B 88/100
Tokens
18 colours · 7 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 29% confidence
Material language
flat
Imagery style
mixed
Component library
unknown
Stack
next
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 5 neutrals · 18 total

Primary #E4FF97
RGB
228, 255, 151
HSL
76°, 100%, 80%
Secondary #00B6FF
RGB
0, 182, 255
HSL
197°, 100%, 50%
Accent #C4BAFF
RGB
196, 186, 255
HSL
249°, 100%, 86%

Neutrals

#000000
#FFFFFF
#697485
#E6E6E6
#F3FFE3

Full palette

#000000
#FFFFFF
#697485
#33DFDF
#B98E01
#24CB71
#E6E6E6
#4D49FC
#F3FFE3
#E4FF97
#00B6FF
#C4BAFF
#95B9AC
#FF7237
#CB9FD2
#FFC9C1
#721C1C
#C7F8FB

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

Chapter 04

Typography

2 families · 6 sizes · 8 weights

Display
figmaSans
Body
figmaMono
Weights
400, 330, 320, 480, 540, 340, 450, 700

Specimen

Use cases
Roles

Scale

StepSizeSample
t00 64px Use cases
t01 44px Use cases
t02 24px Use cases
t03 18px Use cases
t04 16px Use cases
t05 12px Use cases
Chapter 05

Spacing

Base 4px · 14 steps captured

Rhythm

1px
16px
24px
27px
40px
44px
53px
60px
64px
80px
Chapter 06

Shape

4 radii · 5 elevation tiers

Border radii

2px
8px
16px
50px

Elevation

xs
sm
md
lg
xl
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
grid24
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: springy · 6 durations · 3 easings

Duration scale

100ms
160ms
300ms
500ms
800ms
2000ms

Easings

Chapter 09

Components

unknown · 1 component patterns captured

Mocks

Card

Built from these tokens

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

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
—
Sizes
—
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
7 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: #e4ff97;
  --font-display: "figmaSans";
  --space-base: 4px;
  --radius-md: 8px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#e4ff97' },
      fontFamily: { display: ['figmaSans', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '8px' },
    },
  },
};

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