# Figma — DESIGN.md

Light multi-panel design editor: cool gray dotted canvas, white property sheets, charcoal tool rail, and a restrained blue selection language over low-fi gray wireframe fills.

Independent reference guide from ScreenRove browser captures (signed-in Free team file **ScreenRove Research** + Recents home). Not an official brand guide. Values describe the captured desktop states; labels distinguish **observed** (visible in UI / panel readout), **sampled** (screenshot-quantized hex), and **recommended** (implementation guidance). Responsive rules below are recommendations. Marketing routes were **not** captured in this deepen pass.

Captured: 2026-09-30 (BST) · Account: Alex Screenrove · Team: Alex Christou’s team (Free) · Signed in: yes · No invites · No payment · Viewport: native **1280×800** (no upscaling)

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: clean **UI sans / Inter-adjacent** across file chrome, layers labels, property fields, and canvas text (no marketing display face in this set). A family name is not a bundled font licence. Recommended: Inter / system-ui. Do not ship proprietary Figma font files.

---

## 1. Visual Theme & Atmosphere
- Product is a **three-zone design editor**: far-left charcoal icon rail → white layers/assets sheet → cool gray canvas → white Design/Prototype properties sheet.
- Mood: precise, tool-forward, calm — the canvas is the protagonist; chrome stays quiet except for selection blue and dark menus.
- Density is high at the edges (tool rail, pages/layers, property stacks) and airy in the middle (empty `#F5F5F5` page until frames appear).
- Wireframe language in our file: light gray `#D9D9D9` rectangles for Header bar / Primary CTA background / insight tile, black body text for “ScreenRove” and “Make research visible…”, modest CTA label “Start a research flow”.
- Recents home is a separate **files dashboard**: white sidebar + white main grid, AI “Make” prompt strip, file thumbnail cards — not the editor chrome.
- Agents are first-class in chrome (robot/head icon on the left rail; “Bring third-party agents” card on the right) but were not configured beyond observation.

## 2. Color Palette & Roles

### Product editor (observed / sampled)

| Token | Value | Role | Confidence |
|---|---|---|---|
| Page / canvas bg | `#F5F5F5` | Empty page fill (Page settings readout) | **observed** in Design panel |
| Frame surface | `#ffffff` | Desktop frame artboard body | sampled / observed |
| Wireframe fill | `#D9D9D9` | Header bar, CTA background, insight tile, Rectangle fills | **observed** Fill field |
| Left tool rail | `#2b2b2b` / `#262626` | Far-left icon strip | sampled |
| Right / layers sheets | `#ffffff` / `#f8f8f8` | Properties + Layers/Assets panels | sampled dominant |
| Primary text | near-black / `#202020`–`#282828` | Layer names, property labels, canvas copy | sampled / observed |
| Secondary / meta | mid-gray (`#6e6e6e`–`#787878`) | Empty hints, disabled Invite, dimmed chrome | sampled |
| Selection / menu accent | `#0b8be7` ≈ (`#0888e0`–`#0b8ce4`) | File-menu row highlight (“Show version history”) | sampled |
| Selection outline / badge | `#2b95dc` / `#2192e9` family | Blue bounding box, dimension badges | sampled |
| Alignment guide cyan | `#5ac4ff` / `#9dedff` / `#80d5ff` | Smart guides when aligning objects | sampled |
| File menu surface | `#1e1e1e` / `#181818` | Dark dropdown under file title | sampled |
| Share scrim | `#7a7a7a` / `#787878` | Dimmed canvas behind Share modal | sampled |
| Modal fill | `#ffffff` | Share dialog body | sampled / observed |
| Soft Make wash | `#f4f2fe` | Lavender strip under Recents AI Make area | sampled |
| Recents card wash | `#f5f5f5` / `#fcfcfc` | File cards + main Recents canvas | sampled |
| Thumbnail gold | `#f8c000` ≈ | Accent in “Figma basics” starter thumbnail | sampled (content, not chrome) |
| FigJam purple (library/UI) | `#c482ff` ≈ | Appears in add-frame capture chroma | sampled (do not treat as primary CTA) |
| Avatar | pink/red circle + white “A” | Top-right collaborator chip | observed (small; not hex-instrumented) |
| Free badge | text “Free” on team folder | Plan marker in file header / sidebar | observed |

### Semantic roles
- **Primary chrome actions:** dark fills / dark menus for destructive or structural file ops; blue reserved for **selection, focus, and menu highlight** — not large marketing CTAs in this product set.
- **Wireframe fills:** single neutral `#D9D9D9` for placeholder structure; do not invent brand gradients on the artboard from these captures.
- **Share / invite:** white modal; Invite stays disabled/gray until valid emails (not entered); Copy link is a quiet text/icon control.
- **Agents affordance:** informational card + blue text “Set up” link/button in the right rail (observed copy; not completed).

## 3. Typography Rules

| Role | Size / line height | Weight | Tracking | Notes |
|---|---|---|---|---|
| Recents page title | ~28–32px | 600–700 | tight | “Recents” |
| Make headline | ~16–18px | 500–600 | normal | “Describe your idea…” with AI mark |
| File title (top bar) | ~13–14px | 500–600 | normal | “ScreenRove Research” / “Untitled” |
| Layers / page item | ~12–13px | 400–500 | normal | `# Desktop - 1`, `T Start a research flow` |
| Property label | ~11–12px | 400–500 | normal | Position, Layout, Appearance, Fill |
| Property value | ~12px | 400–500 | normal | `W 1200`, `H 100`, `#D9D9D9`, `100%` |
| Canvas body copy | ~14–18px | 400–700 | normal | “Make research visible…”, “ScreenRove” |
| CTA label on artboard | ~12–14px | 500 | normal | “Start a research flow” |
| Modal title | ~14–16px | 600 | normal | “Share to selection ‘Research card’” |
| Menu item | ~13px | 400–500 | normal | Dark file menu rows |
| Dimension badge | ~11–12px | 500–600 | normal | On-canvas `1200 × 100`, `400 x 100`, `119 x 15` |
| Meta / timestamps | ~12px | 400 | normal | “Edited 35 minutes ago” on Recents cards |

## 4. Component Stylings

### Navigation
- **Far-left icon rail** (charcoal): File, Agents, Assets, Tools, Variables — icon-only, vertical.
- **Editor left sheet:** Pages (“Page 1”) + Layers tree with type prefixes (`T` text, rectangle/shape marks, `#` frames).
- **Assets mode:** “Search all libraries” + library cards (iOS/iPadOS UI Kit Beta, Material 3 Design Kit, Simple Design System) — observed listed, not installed further.
- **Recents home sidebar:** profile “Alex Screenrove”, Search, Recents (selected), Community, team “Alex Christou’s te…” + Free, Drafts / All folders / Resources / Trash, plan/usage card, Starred.
- **Top file bar:** Figma mark / menu · file name · Team folder · Free · presence avatar · Share · zoom.

### Buttons & controls
- Share (header): compact control opening the share modal (resting state captured; exact fill not hex-locked — treat as secondary chrome).
- Invite inside modal: disabled gray until emails entered (**not** exercised).
- Copy link: text + link icon in modal header.
- Make (Recents): dark circular / compact send control on the AI prompt field (observed; hover not captured).
- File menu: dark surface; selected row uses bright blue highlight on white/light text (“Show version history”).
- Agents “Set up”: blue text/button treatment in the right-rail promo card.

### Canvas objects
- Frames: white artboards with blue selection outline + corner handles when selected; labels like `# Desktop - 1`, `# ScreenRove Home`, `# Research card`, `# Frame 1`.
- Shapes: default fill `#D9D9D9`, opacity 100%, rotation 0° in captures.
- Text: editable blue outline while selected; fixed-width layout option shown in properties.
- Dimension chip: blue pill floating near selection (`1200 × 100`, `100x100`, `400 x 100`, `119 x 15`).
- Alignment: cyan/blue dashed smart guides between objects and frame edges.

### Inputs & panels
- Property fields: compact numeric inputs for X, W, H, rotation, opacity; Fill row shows hex `#D9D9D9`.
- Page background swatch: `#F5F5F5` when nothing (or page) is the context.
- Clip content: checkbox on frames (checked on Research card / Desktop captures).
- Design | Prototype tabs on the right sheet.

### Dialogs / overlays
- **Share modal:** centered white card over gray scrim; sections for invite field, “Who has access” (team can edit, Team folder can access, you = owner), Community share, Publish, Copy Dev Mode link, More. Opened and **dismissed without entering recipients**.
- **File options menu:** dark anchored menu under title (Publish library, Export, Copy to Slides, Add to sidebar, Create branch, color profile, Duplicate, Rename, Go to folder, Move, Trash).

### Cards (Recents)
- File thumbnails with soft gray empty preview or starter art (“Figma basics”, “FigJam basics”); meta line with relative time; blue Figma / purple FigJam type marks on cards.

## 5. Layout Principles
- Editor: **rail | inspector sheet | canvas | properties** — canvas claims the majority of width; side sheets are narrow and scrollable.
- Recents: **sidebar | main** with filter chips (Design / FigJam / Slides / Make) and a card grid under Recently viewed / Shared tabs.
- Synthetic ScreenRove Home composition: top Header bar (≈1200×100) → brand/value copy → insight tile → Primary CTA background + “Start a research flow”.
- Spacing: dense property stacks (~4–8px internal rhythm); generous empty canvas margin around a single Desktop frame (1440×1024 observed when first added).
- Recommended build base: **4px** spacing scale; keep chrome denser than content.

## 6. Depth & Elevation
- Editor depth is mostly **flat + contrast** (dark rail vs white sheets vs gray page), not heavy drop shadows.
- Selection uses **outline + badge + guides** rather than elevation.
- Share modal: medium gray scrim + white elevated card (scrim reads flat/dimmed, not blurred glass in these captures).
- Dark file menu floats above the light chrome as a high-contrast overlay.
- Recents cards: subtle surface separation from `#fcfcfc` main (light border/wash; no dramatic shadow sampled).

## 7. Do's and Don'ts

### Do
- Keep the canvas cool gray (`#F5F5F5`) and artboards white; reserve `#D9D9D9` for structural wireframe blocks.
- Use blue only for selection, focus, guides, and sparse text actions (“Set up”) — not full-bleed hero panels.
- Preserve the charcoal icon rail vs white inspector duality.
- Show honest empty Assets / empty Styles / empty Export sections when unused.
- Name layers clearly (`Header bar`, `Primary CTA background`, `Research insight tile`) the way the captured file does.
- Keep Share invite inert unless the user explicitly provides recipients (we dismissed without inviting).

### Don't
- Don’t invent Figma marketing purple/multicolor hero layouts from the product editor — marketing was not captured here.
- Don’t recreate the multicolor Figma logo from memory; use a supplied brand asset if a mark is required.
- Don’t fabricate Dev Mode, multiplayer cursors, FigJam sticky sessions, payment upgrade modals, or Community publish success states.
- Don’t treat library kit thumbnails (iOS 27 / Material 3) as your product UI.
- Don’t upscale soft captures; these deepen shots are already native 1280×800.

## 8. Responsive Behavior
- Captures are **desktop 1280×800** browser windows only. Collapse of side sheets, tablet split, and mobile Figma app were **not observed**.
- Recommended: below ~1024px collapse Layers/Assets and Properties into drawers; keep the tool rail icon-only; preserve ≥44px touch targets for rail icons; stack Recents filters; keep Share as a full-screen sheet on small viewports.

## 9. Agent Prompt Guide
- Canvas page: `#F5F5F5`; artboard: white; wireframe fills: `#D9D9D9` (observed).
- Chrome: charcoal left rail `#2b2b2b`; white property/layers sheets; dark `#1e1e1e` menus with blue `#0b8be7` highlight (sampled).
- Selection: blue outline + cyan guides + dimension badge — not colored shadows.
- Layout: icon rail | pages/layers | canvas | Design properties; optional centered Share modal on gray scrim.
- Recents variant: white sidebar + AI Make prompt strip (`#f4f2fe` wash) + file card grid.
- Prompt starter: “Build a collaborative design-tool workspace with a dark tool rail, white layers and properties panels, a light gray dotted canvas, blue selection handles, and a low-fi gray wireframe mockup titled ScreenRove Home. Use original branding; do not copy Figma’s logo.”

---

## Implementation recommendations
- Use your own name, logo, copy, and sample frames.
- Semantic HTML / accessible panels: visible focus rings (blue family is fine), labelled property inputs, contrast-safe text on `#D9D9D9` (prefer darker text or darker fills for real UI — wireframe gray is for mock structure).
- Recommended 4px spacing base; desktop measurements are reference only.
- Implement empty Assets/Styles, disabled Invite, and dismissible Share; do not infer billing, SSO admin, or multiplayer presence beyond the single “A” avatar.

## Interaction inventory
- Recents home (AI Make strip + file cards). Screenshot: `product/figma-product-01-recents.png`.
- Open populated canvas (Header bar selected, 1200×100, fill `#D9D9D9`). Screenshot: `product/figma-product-02-open-canvas.png`.
- Layers panel (ScreenRove Home + Research card selected). Screenshot: `product/figma-product-03-layers-panel.png`.
- Design properties (Rectangle 1 100×100, fill `#D9D9D9`, guides). Screenshot: `product/figma-product-04-design-properties.png`.
- Share modal (no recipients entered). Screenshot: `product/figma-product-05-share-modal.png`.
- File options menu (dark menu, “Show version history” highlighted). Screenshot: `product/figma-product-06-file-options.png`.
- Renamed file title “ScreenRove Research”. Screenshot: `product/figma-product-07-renamed-file.png`.
- Flow — new/empty file (Assets libraries + Agents card, page `#F5F5F5`). Screenshot: `flow/figma-flow-01-new-file.png`.
- Flow — add frame (Desktop - 1, 1440×1024). Screenshot: `flow/figma-flow-02-add-frame.png`.
- Flow — add shape. Screenshot: `flow/figma-flow-03-add-shape.png`.
- Flow — add text (“Write research report…”). Screenshot: `flow/figma-flow-04-add-text.png`.
- Flow — adjust properties (400×100 bar, fill `#D9D9D9`). Screenshot: `flow/figma-flow-05-adjust-properties.png`.
- Flow — rename outcome. Screenshot: `flow/figma-flow-06-rename.png`.
- Flow — populated outcome (ScreenRove Home composition). Screenshot: `flow/figma-flow-07-populated-outcome.png`.

## Avoid
- Fabricating FigJam whiteboard sessions, paid AI Make results, billing upgrade walls, or real collaborator invites.
- Applying Recents marketing-style Make hero inside the dense editor properties rail.
- Treating screenshots as editable source components or shipping scraped font/kit binaries.

## Reference pages
- Recents: `https://www.figma.com/files/.../recents-and-sharing/recently-viewed` (session URL captured in shot)
- Design file: `https://www.figma.com/design/.../ScreenRove-Research` (and earlier Untitled state in flow shots)

## Capture scope
Signed-in Free team; file created/populated and renamed **ScreenRove Research**; synthetic layers only (ScreenRove Home, Research card, Header bar, Primary CTA background, Research insight tile, CTA copy). Share modal opened and dismissed — **no emails entered, no Community publish**. Marketing folder empty this pass. Hover micro-interactions, mobile app, Dev Mode deep panels, and paid AI Make generation **not exercised**. All PNGs native 1280×800.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

Structure inspired by those resources. Guide text and values come from this independent ScreenRove capture pass. No proprietary source code or font files are included.