---
name: Figma
description: "This site is a prime example of a modern, premium SaaS interface that balances professional clarity with creative expression, making it an excellent reference for clean, scalable design systems."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#808080"
  tertiary: "#5B5BF7"
  neutral: "#808080"
  line: "rgba(255, 255, 255, 0.16)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 330
    letterSpacing: "-0.24px"
  heading-lg:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "-0.14px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 330
    letterSpacing: "-0.12px"
  body-sm:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.45
    fontWeight: 330
    letterSpacing: "-0.12px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A collaborative interface design tool for teams to brainstorm, design, and build products together.

*The standard operating system for modern design and product teams.*

## Colors

High-contrast, clean white backgrounds with black text for maximum readability, accented by a vibrant purple for primary actions and a bright green for promotional banners.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#808080`)** — uses `ink-soft` token
- **Accent (`#5B5BF7`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.16)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Headlines use tight tracking (negative letter-spacing) for a modern, compact look.
- Body text maintains a light weight (330) for a clean, airy feel.
- Monospace fonts are reserved for code snippets or technical displays.

## Layout

A standard 12-column fluid grid with responsive breakpoints, prioritizing generous white space and clear content hierarchy.

*Rhythm:* 8px base unit with a consistent spatial system based on multiples of 8 and 16 for padding and margins.

## Elevation & Depth

- rgba(0, 0, 0, 0.08) 0px 1px 0px 0px
- rgb(0, 0, 0) 0px 0px 0px 1px inset
- rgb(255, 255, 255) 0px 0px 0px 1px inset
- Borders: Minimal use of borders, primarily subtle 1px dividers or inset shadows for defining containers and input fields.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** High contrast primary buttons (black background, white text) with pill or slightly rounded corners. Secondary buttons use outlined styles.
- **card:** Cards are often used to showcase community projects, featuring large imagery and clean typography, sometimes with subtle shadows or borders.
- **chip:** Minimal use of chips; tags and labels are typically integrated into lists or navigation menus.
- **input:** Clean input fields defined by inset shadows or subtle borders, often accompanied by monospace fonts for technical inputs.
- **hero:** Dynamic hero sections featuring large, expressive typography, often interacting with or overlaying a gallery of diverse, colorful project screenshots.

## Do's and Don'ts

**Don't:**
- Don't use a dark primary background — the screenshot shows predominantly white backgrounds.
- Don't use serif fonts for headings — the screenshot shows humanist-sans-serif fonts.
- Don't use overly complex, multi-colored gradients as primary backgrounds — the screenshot shows a clean white base.
- Don't use heavy, drop shadows for elevation — the screenshot shows subtle, minimal box shadows or inset borders.
- Don't use all-caps for body text — the screenshot shows uppercase text used sparingly for labels or small tags.
- Don't use a high-contrast, bright primary color that isn't purple or green — the screenshot shows a specific purple for CTAs and green for promotional banners.

---

## System Prompt (paste into AI agent)

```
This is the homepage of Figma, a collaborative design tool. The design DNA is clean, professional, and highly refined, prioritizing clarity and whitespace. The primary color palette is monochromatic with black (#000000) text on a white (#FFFFFF) background, accented by a vibrant purple (#5B5BF7) for primary action buttons and a bright green (#24CB71) for promotional banners. Typography is strictly humanist-sans-serif (Figma Sans) with a light body weight (330) and tight letter-spacing for a modern feel. Key interactions are subtle, using smooth transitions. Critical don'ts: Do not use dark mode as the primary theme; do not use serif fonts; do not rely on heavy drop shadows for elevation. Focus on clean layouts, generous spacing, and high-contrast, accessible text.
```