Figma Design System

---
name: Figma
url: https://figma.com
version: 2.3.0
tokens:
  colors:
    primary: "#a259ff"
    coral: "#ff7262"
    green: "#0acf83"
    blue: "#1abcfe"
    background: "#ffffff"
    text-primary: "#333333"
  typography:
    font-sans: "Inter, system-ui, sans-serif"
    scale:
      - { name: display, size: "72px", weight: 700, lineHeight: 1.1 }
      - { name: body, size: "16px", weight: 400, lineHeight: 1.5 }
  spacing:
    base: "8px"
    scale:
      space-2: "8px"
      space-4: "16px"
      space-8: "32px"
  radius:
    sm: "4px"
    md: "8px"
    lg: "12px"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
---

# Figma — Design System Specification

## 1. Overview
Vibrant, canvas-centric visual language combining purple (`#a259ff`), coral (`#ff7262`), mint green (`#0acf83`), and blue (`#1abcfe`).

## 2. Color System
- Purple: `#a259ff`
- Coral: `#ff7262`
- Green: `#0acf83`
- Blue: `#1abcfe`

## 3. Typography Scale
- Display: 72px / Weight 700 / Inter
- Body: 16px / Weight 400 / Inter

## 4. Button Variants
- Primary Button: `background: #a259ff`, `color: #ffffff`, `border-radius: 8px`

## 5. Card Examples
- Canvas Card: `background: #ffffff`, `border: 1px solid rgba(0,0,0,0.1)`

## 6. Form Elements
- Toolbar Input: `border-radius: 6px`

## 7. Spacing Scale
- 4px, 8px, 16px, 24px, 32px, 48px

## 8. Border Radius Scale
- `sm: 4px`, `md: 8px`, `lg: 12px`

## 9. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`