Brand guidelines `#e4ff97`

May 18, 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 02

## Logo

figma.com

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

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

Step | Size | Sample
--- | --- | ---
`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

- `ease-in-out`
- `custom`
- `spring`

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

- Use cases
- Roles
- Organizations
- Get started

### CTA verbs

- ``×2
- ``×1
- ``×1
- ``×1
- ``×1
- ``×1
- ``×1
- ``×1

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 variables variables.css

    :root {
      --color-primary: #e4ff97;
      --font-display: "figmaSans";
      --space-base: 4px;
      --radius-md: 8px;
    }

Tailwind config tailwind.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.