figma.com

---
site: "Figma: The Collaborative Interface Design Tool"
url: "https://figma.com"
generated_at: "2026-05-14T22:16:23.103Z"
generator: "designlang@12.11.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#e4ff97"
    secondary: "#00b6ff"
    accent: "#c4baff"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: figmaSans
    mono: figmaMono
    base: 18
  spacing:
    base: 4
    scale: "[1, 16, 24, 27, 40, 44, 53, 60, 64, 80]"
  radii:
    xs: 2
    md: 8
    lg: 16
    full: 50
  shadows:
    sm: "rgb(255, 255, 255) 0px 0px 0px 1px inset"
    xs: "rgba(0, 0, 0, 0.08) 0px 1px 0px 0px"
    lg: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
---

# Overview

A **landing** page (heuristic confidence 0.29), dressed in **flat** material.

> "Use cases"

The author writes in a **friendly** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `cta → nav → nav → nav → nav → nav → nav → nav → testimonial → hero → content → hero → testimonial → content → content → testimonial → testimonial → content → pricing → content → footer`.

Source: <https://figma.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#e4ff97` | 1 |
| secondary | `#00b6ff` | 1 |
| accent | `#c4baff` | 1 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#ffffff` · `#697485` · `#e6e6e6` · `#f3ffe3`

**Total unique colors detected:** 18.

# Typography

**Families**
- `figmaSans` · 1496 uses
- `figmaMono` · 19 uses

**Body size:** `18px` / line-height `25.2px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `400` | `70.4px` |
| h2 | `44px` | `400` | `48.4px` |
| h3 | `24px` | `320` | `32.4px` |
| h4 | `18px` | `330` | `25.2px` |

# Layout

**Spacing base:** `4px` increments.
**Scale:** `1px` · `16px` · `24px` · `27px` · `40px` · `44px` · `53px` · `60px` · `64px` · `80px`

**Layout primitives:** 23 grid containers · 154 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgb(0, 0, 0) 0px 0px 0px 1px inset`
- `sm` — `rgb(255, 255, 255) 0px 0px 0px 1px inset`
- `xs` — `rgba(0, 0, 0, 0.08) 0px 1px 0px 0px`
- `lg` — `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px`
- `xl` — `rgba(0, 0, 0, 0.1) 0px 24px 70px 0px`

**Z-index layers:** 11

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `8px`
- `lg` — `16px`
- `full` — `50px`

# Components

**Detected patterns:** `buttons` · `cards` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `tabs`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 22 |

# Do's and Don'ts

**Do's**
- Use `publish`, `products`, `solutions` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 8 font weights in use — consider standardizing to 3 (regular, medium, bold).
- Don't 216 !important rules — prefer specificity over overrides.
- Don't 94% of css is unused — consider purging.
- Don't 41308 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://figma.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._