Skip to content

figma.md

Latest commit

 

History

History
85 lines (58 loc) · 2.64 KB

figma.md

File metadata and controls

85 lines (58 loc) · 2.64 KB

Design System: Figma: The Collaborative Interface Design Tool

This is a real DESIGN.md example generated from https://figma.com with npx brandmd.

Drop a DESIGN.md like this in your project root so Claude Code, Cursor, Gemini CLI, Codex, or Google Stitch can use the colors, typography, spacing, and UI patterns when generating UI.

Generate one for your site: npx brandmd https://yoursite.com (npm · repo)

1. Visual Theme & Atmosphere

Overall mood: Balanced and professional

Density: Moderate. The layout uses a varied spacing scale.

Shape language: Rounded, friendly aesthetic with generous corner radii.

Depth: Uses 4 shadow styles for layering and elevation.

2. Color Palette & Roles

  • White (#FFFFFF): Page background
  • Black (#000000): Dark background / footer
  • Blue (#C4BAFF): Accent background
  • Dark Blue (#4D49FC): Accent background
  • Light Green (#E4FF97): Page background
  • Blue (#00B6FF): Accent background
  • Cyan (#33DFDF): Link / accent text
  • Yellow (#B98E01): Secondary text

3. Typography Rules

Primary font: figmaSans Secondary font: figmaMono

Fonts by role:

  • Headings: figmaSans, figmaMono
  • Body: figmaSans

Type scale:

  • Headings: 24px, 56px, 72px
  • Body / UI: 16px, 18px
  • Captions / Small: 0px, 12px

Weights in use: 320, 330, 340, 400, 480, 520

Line heights: 25.2px, 23.2px, 0px, 32.4px, 20.8px, 61.6px, 72px, 23.4px, 12px, 18.4px

Letter spacing: -0.12px, -0.14px, -0.09px, -0.24px, 0.48px, -0.84px

4. Component Stylings

Buttons

  • Text color: rgb(255, 255, 255)
  • Padding: 0px 0px 0px 0px
  • Font: 18px, weight 330

Cards

  • Background: rgba(0, 0, 0, 0.16)
  • Padding: 0px 0px 0px 0px

Inputs

5. Layout Principles

Spacing scale: 2px, 6px, 8px, 12px, 16px, 24px, 60px, 120px

Base unit: 8px grid (values are mostly multiples of 8).

Border radii: 2px, 4px, 8px, 16px, 18px, 50%, 50px

6. Guidelines

Do

  • Use 8px grid for all spacing
  • Use #C4BAFF for primary actions and CTAs
  • Use figmaSans as the primary typeface

Don't

  • Don't introduce colors outside the palette above
  • Don't mix fonts beyond figmaSans and figmaMono
  • Don't use inline styles when the design system covers the pattern
  • Don't use border-radius values outside: 2px, 4px, 8px, 16px, 18px, 50%, 50px

This DESIGN.md was generated by brandmd. Drop it into your project root and AI coding agents (Claude Code, Cursor, Gemini CLI) will use it to generate on-brand UI.