# Figma — Design System
> Figma is the leading collaborative design platform for building meaningful products.
- **Canonical:** https://uiuxskills.com/library/figma
- **Source:** https://www.figma.com
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:54.732Z

---

---
version: alpha
name: Figma
description: Collaborative interface design and prototyping platform.
tone: Professional, collaborative, innovative, and accessible.
color-scheme: light
colors:
  primary: "#0D99FF"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-surface: "#333333"
  on-primary: "#FFFFFF"
  outline: "#E5E5E5"
  error: "#FF4D4D"
  success: "#00C853"
  focus-ring: "#0D99FF"
  surface-bright: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Helvetica Neue
    fontSize: 3rem
  display-md:
    fontFamily: Helvetica Neue
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Helvetica Neue
    fontSize: 1.875rem
  headline-md:
    fontFamily: Helvetica Neue
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Helvetica Neue
    fontSize: 1.25rem
  body-md:
    fontFamily: Helvetica Neue
    fontSize: 1rem
  body-sm:
    fontFamily: Helvetica Neue
    fontSize: 0.875rem
  label-md:
    fontFamily: Helvetica Neue
    fontSize: 0.875rem
  label-sm:
    fontFamily: Helvetica Neue
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0077CC"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0077CC"
  badge:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Figma is a professional-grade design tool that emphasizes real-time collaboration and design systems. Its visual identity is clean, functional, and highly focused on the creative process, using a neutral palette to let user-generated content take center stage.

## Colors

The color strategy focuses on a high-contrast, neutral foundation that allows the core brand blue to act as a clear, functional indicator for interactive elements.

*   Primary (inferred) (#0D99FF): The core brand blue used for primary CTAs and focus states.
*   Surface (inferred) (#FFFFFF): The primary background color for the interface.
*   Surface-container (inferred) (#F5F5F5): A secondary background color used for cards and section groupings.
*   On-surface (inferred) (#333333): The primary text color, ensuring high readability against light backgrounds.
*   Outline (inferred) (#E5E5E5): The standard border color for components and dividers.
*   Error (inferred) (#FF4D4D): A semantic color reserved strictly for error states.
*   Success (inferred) (#00C853): A semantic color used to indicate successful actions or statuses.

## Typography

The typography system relies on Helvetica Neue to maintain a neutral, professional, and highly legible aesthetic across all interface levels.

*   Display-lg (inferred): Reserved for high-impact hero headlines.
*   Headline-md (inferred): Used for card titles and section headers.
*   Body-md (inferred): The standard weight and size for general paragraph text.
*   Label-md (inferred): The primary size for button text and interactive labels.

## Layout

Figma utilizes a clean, grid-based layout that prioritizes whitespace to highlight product screenshots and UI examples. The system follows a consistent spacing scale (e.g., `spacing.md` as a 16px base unit) to maintain rhythm between content blocks. The page pattern follows a logical flow: `nav` → `hero` → `social-proof` → `features` → `testimonials` → `footer`. The hero section features a centered headline with a primary CTA and dynamic media, while the overall design employs a mobile-first approach with stacked content blocks on smaller viewports.

## Elevation & Depth

Depth is conveyed through subtle, single-layer shadows that keep the interface feeling flat and modern. These values are inferred based on standard design system practices to provide hierarchy without visual clutter.

*   `elevation.sm`: Subtle lift for small UI elements.
*   `elevation.md`: Standard lift for cards and interactive containers.
*   `elevation.lg`: Pronounced lift for modals or overlay elements; use sparingly to avoid clutter.

## Shapes

The brand uses a balanced approach to geometry, pairing sharp corners for structural layouts with rounded corners for interactive components. This mix creates a balance between technical precision and approachable UI.

Radius tokens are applied as follows: `rounded.sm` (4px) for inputs, `rounded.md` (8px) for cards, and `rounded.full` (9999px) for badges and pill-shaped elements.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and `{colors.surface}` for secondary actions, both utilizing `{typography.label-md}`. Use primary buttons for the main conversion point and secondary buttons for alternative actions.

### Card
Cards are defined by a `{colors.surface}` background, `{rounded.md}` corners, and an `{colors.outline}` border. Use these to group related content or feature sets, applying `{elevation.md}` only when the card needs to appear interactive or elevated above the background.

### Badge
Badges are pill-shaped containers using `{rounded.full}`. Use them to highlight status or category labels, utilizing `{colors.surface-container}` for neutral labels or semantic colors like `{colors.error}` for urgent status updates.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.error}` for primary buttons. |
| Apply `{typography.display-lg}` for hero headlines. | Avoid using `{typography.body-sm}` for main headers. |
| Use `{rounded.md}` for all card components. | Do not mix rounded corners with sharp edges on the same component. |
| Maintain `{spacing.md}` between content blocks. | Do not use non-standard spacing outside the `{spacing}` scale. |
| Use `{colors.on-surface}` for body text. | Never apply `{typography.body-md}` on `{colors.surface-container}` without contrast. |
| Apply `{elevation.md}` to elevated cards. | Avoid excessive use of `{elevation.lg}`. |
| Use `{colors.focus-ring}` for accessibility. | Never omit focus states on interactive elements. |
| Use `{badge}` with `{rounded.full}` for tags. | Do not use square corners for badge components. |

## Content Style

CTA labels should use imperative verbs, sentence case, and remain short and clear.

Headings should be benefit-driven, concise, and professional, avoiding overly flowery language.

Copy density should prioritize scannability, utilizing short paragraphs and frequent bullet points to break up technical information.

## Imagery & Icons

The imagery style is mixed, utilizing a combination of high-fidelity product screenshots, clean SVG icons, and abstract UI motion graphics. Assets should feel integrated into the interface, often using consistent aspect ratios and clean, minimal icon sets that align with the brand’s professional tone.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Figma, a minimal, professional design platform. Match its clean, functional, and accessible tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name (`{colors.primary}`, `{typography.body-md}`, `{spacing.md}`) — never hardcode hex values, font sizes, or pixel values.
2. Use only the component variants defined under `components:`. Do not invent states, sizes, or variants the spec does not list.
3. Follow the Shapes narrative exactly: `{rounded.sm}` for inputs, `{rounded.md}` for cards, `{rounded.full}` for badges. Do not mix corner styles on a single component.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. All tokens marked "(inferred)" are visual approximations. If an authoritative token file exists for this product, it takes precedence over spec values.

## Output contract

**Must:**
- Use token names for every color, radius, spacing, shadow, and typography value.
- Implement hover, focus, and disabled states for all interactive components when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` as a visible focus indicator on every interactive element; never omit it.
- Follow the canonical spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding and gaps.
- Use `{typography.display-lg}` only for hero headlines; `{typography.label-md}` for button text.

**Must NOT:**
- Invent colors, font sizes, radii, or shadows outside the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, decorative flourishes, or filler copy.
- Apply `{colors.error}` to primary buttons or `{elevation.lg}` liberally.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary groupings, use `{colors.surface-container}`.
- For unspecified breakpoints, use mobile-first layout with a single breakpoint at 768px, consistent with the spec's Layout narrative.
- "(inferred)" tokens are approximations; defer to any authoritative source file if one exists.