--- version: alpha name: "figma.com" description: "Design system extracted from https://www.figma.com/ on 2026-10-28" colors: background: "#ffffff" surface: "#afbccf" foreground: "#000000" primary: "#000000" on-primary: "#ffffff" border: "#ffffff" typography: headline-display: fontFamily: "figmaSans" fontSize: "56px" fontWeight: 400 lineHeight: "56px" letterSpacing: "-1.25px" headline-lg: fontFamily: "figmaSans" fontSize: "44px" fontWeight: 400 lineHeight: "48.4px" letterSpacing: "-0.66px" headline-md: fontFamily: "figmaSans" fontSize: "16px" fontWeight: 400 lineHeight: "22.4px" body-md: fontFamily: "figmaSans" fontSize: "30px" fontWeight: 400 lineHeight: "36px" letterSpacing: "-0.66px" label-md: fontFamily: "figmaSans" fontSize: "16px" fontWeight: 400 lineHeight: "22.4px" button: fontFamily: "figmaSans" fontSize: "16px" fontWeight: 400 lineHeight: "23.2px" rounded: none: "0px" md: "8px" sm: "2px" full: "9999px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "20px" 6: "24px" 7: "32px" 8: "40px" 9: "80px" components: button-ghost: backgroundColor: "#ffffff" textColor: "#000000" typography: "{typography.button}" rounded: "8px" height: "46px" padding: "12px 22px" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "8px" height: "46px" padding: "12px 22px" --- # figma.com ## Overview Figma: The collaborative canvas for design, code, and AI: Figma is the canvas where design, code, and AI come together. From first idea to shipped product — go from concept to production with your whole team, in one place. Gently rounded controls, layered shadows for depth, large display type at 56px / 400, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 1326 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-symbol.png`: possible standalone brand symbol - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture - `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png - `screenshots/media-symbol-transparent.png`: possible standalone brand symbol / transparent.png - `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/c-button-1--rest.png`: Button 1 ("Read more"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("Read more"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("Read more"), focus - `screenshots/c-link-1--rest.png`: Text link 1 ("Explore Figma Design"), rest - `screenshots/c-link-1--focus.png`: Text link 1 ("Explore Figma Design"), focus - `screenshots/c-close-button-1--rest.png`: Close / dismiss button 1, rest - `screenshots/c-close-button-1--focus.png`: Close / dismiss button 1, focus - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Pricing"), rest - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Pricing"), focus - `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Products"), rest - `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("Products"), clicked - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Figma Design"), rest - `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Figma Design"), hover - `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest - `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("New"), rest - `screenshots/c-avatar-1--rest.png`: Avatar 1, rest - `screenshots/c-blockquote-1--rest.png`: Blockquote 1 ("Everyone is able to infl"), rest - `screenshots/c-image-1--rest.png`: Image / figure 1, rest - `screenshots/c-icon-1--rest.png`: Icon 1, rest - `screenshots/c-button-2--rest.png`: Button 2 ("Contact sales"), rest - `screenshots/c-button-2--hover.png`: Button 2 ("Contact sales"), hover - `screenshots/c-button-2--focus.png`: Button 2 ("Contact sales"), focus - `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest - `screenshots/c-icon-button-2--hover.png`: Icon button 2, hover - `screenshots/c-icon-button-2--focus.png`: Icon button 2, focus - `screenshots/c-icon-button-2--selected.png`: Icon button 2, clicked - `screenshots/c-link-2--rest.png`: Text link 2 ("Explore Figma's agent"), rest - `screenshots/c-link-2--focus.png`: Text link 2 ("Explore Figma's agent"), focus - `screenshots/c-menu-button-2--rest.png`: Menu / dropdown trigger 2 ("English"), rest - `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by menu-button "English" - `screenshots/c-image-2--rest.png`: Image / figure 2, rest - `screenshots/c-button-3--rest.png`: Button 3 ("Get started for free"), rest - `screenshots/c-button-3--hover.png`: Button 3 ("Get started for free"), hover - `screenshots/c-button-3--focus.png`: Button 3 ("Get started for free"), focus - `screenshots/c-icon-button-3--rest.png`: Icon button 3, rest - `screenshots/c-icon-button-3--hover.png`: Icon button 3, hover - `screenshots/c-image-3--rest.png`: Image / figure 3, rest ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | surface | `#afbccf` | Cards, panels, raised or recessed surfaces | | foreground | `#000000` | Primary text | | primary | `#000000` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | | border | `#ffffff` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#ffffff`, `#000000`, `#afbccf`. Gradients in use: `repeating-conic-gradient(rgb(0, 182, 255) 0deg, rgb(0, 182, 255) 18deg, rgba(0, 0, 0, 0) 18deg, rgba(0, 0, 0, 0) 30deg)`. The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **figmaSans** for h1, h2, h3, body, button, label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. - **figmaMono** for label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | figmaSans | 56px | 400 | 56px | -1.25px | | headline-lg | figmaSans | 44px | 400 | 48.4px | -0.66px | | headline-md | figmaSans | 16px | 400 | 22.4px | normal | | body-md | figmaSans | 30px | 400 | 36px | -0.66px | | label-md | figmaSans | 16px | 400 | 22.4px | normal | | button | figmaSans | 16px | 400 | 23.2px | normal | Type scale in use: 12px, 14px, 16px, 18px, 30px, 44px, 56px. Base body size 30px. The hero heading (h1) renders at 56px / 400, start aligned, up to 328px wide, tracking -1.25px. Sample: "The full-stack creative canvas". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40, 80 (px). - Flex and grid gaps: 4, 8, 12, 16, 24, 32, 40, 60 px. - Content max width: 1360px, centred. - Breakpoints: 480px, 768px, 960px, 1024px, 1280px. - Header: 78px tall, fixed, background `rgb(255, 255, 255)`; 5 nav links at 16px / 400 (Pricing · Log in · Contact sales · Get started for free). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `oklch(0 0 none / 0.16) 0px 0px 0px 1px inset` - shadow-2: `oklch(0 0 none / 0.16) 0px 1px 0px 0px` ## Shapes - Buttons: 8px - Inputs: 8px - Cards and panels: 0px - Images and media: 0px - Radius scale: none 0px, md 8px, sm 2px, full 9999px ## Components ### Button, ghost Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 8px, height 46px, padding 12px 22px, 16px / 400, shadow `oklch(0 0 none / 0.16) 0px 0px 0px 1px inset`. Sample label: "Contact sales". ### Button, primary Background `#000000`, text `#ffffff`, border none, radius 8px, height 46px, padding 12px 22px, 18px / 330. Sample label: "Get started for free". ### Link Colour `#000000`, no underline at rest, weight 400. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (22 of 87 in the checklist, 31 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 19 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | ink-icon-right, ghost-icon-right, ink-icon-right, ink-icon-right lg, ink lg | hover, focus | "Read more" | | Icon button | ink, ghost, filled | hover, focus, open, active | | | Text link | plain, plain | focus | "Explore Figma Design" | | Close / dismiss button | ghost | focus | | | Header / navbar | default | rest only | "ProductsWhat you can do in fig" | | Navigation link | plain | focus | "Pricing" | | Menu / dropdown trigger | ghost, ghost | open | "Products" | | Footer | default | rest only | "Figma SocialsProductFigma Desi" | | Footer link | plain | hover | "Figma Design" | | Social icon links | default | rest only | | | Banner / announcement bar | neutral-filled | rest only | "Check out everything we launch" | | Badge / pill / tag | subtle-square | rest only | "New" | | Styled list | default | rest only | | | Avatar | 48px-round | rest only | | | Blockquote | default | rest only | "Everyone is able to influence," | | Image / figure | aspect-0.8, aspect-1, aspect-2.69 | rest only | | | Icon | outline-16px | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Card, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar stack, Divider, Code block / inline code, Keyboard key, Video / media embed, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar. ## Dark Mode No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 1360px | 40px | 16px | 56px, 3 lines, start | 78px, 4 links, 2 CTA | media below text | 3→1 col; 2→2 col; 2→2 col | content-width | | laptop 1024px | 944px | 40px | 16px | 56px, 4 lines, start | 0px, 0 links | media below text | 3→1 col; 2→2 col; 2→2 col | content-width | | tablet 768px | 720px | 24px | 16px | 36px, 1 line, start | 0px, 0 links | media below text | 12→2 col; 6→1 col | content-width | | phone 390px | 358px | 16px | 16px | 36px, 2 lines, start | 0px, 0 links | media below text | 12→2 col; 6→1 col | content-width | - H1 goes 56px → 36px (64%), 3 → 2 lines. - No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified. - Card grids: 4 columns → 2 columns on phones (gap 16px → 16px). - Body text is 16px at the sampled desktop and phone widths. - Phone side gutter 16px. - Section top padding 80px → 40px. ## Interaction & Motion 60 elements carry transitions; typical 0.18s with ease-out, mostly on all, background, box-shadow. 1 running keyframe animations (animation-1ps4q2h 25s infinite). - Hover on button-primary ("Read more"): background #000000 → oklch(0 0 none / 0.85); cursor pointer; transition background, box-shadow | 0.18s, 0.18s | ease-out, ease-out | delay 0s, 0s. - Hover on button-secondary ("Contact sales"): shadow deepens; cursor pointer; transition background, box-shadow | 0.18s, 0.18s | ease-out, ease-out | delay 0s, 0s. - Hover on nav-link ("Pricing"): no visible change; cursor pointer. - Focus on button-primary: outline 2px dashed rgb(0, 0, 0), offset 4px. - No tooltip could be triggered from the first viewport, but the stylesheet defines tooltip rules (a, a *, button:not(.tooltip-btn), button:not(.tooltip-btn) *, select, input[type="checkbox"]): . - No dropdown menus found in the header. - 10 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe). Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#000000` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 30px in figmaSans. - Do match corner radii per element class (buttons 8px, cards 0px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from page-wrapper; large surface colors remain in the palette. - Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.