--- version: alpha name: Salesforce description: Lightning Design System — cloud-enterprise authority through warm-neutral surfaces, accessible cloud-blue accents, Salesforce Sans variable-weight headings, generous 8px-base spacing, and purposeful soft-shadow depth. colors: # Canvas + surfaces (warm gray neutral family) background: "#f3f3f3" # PALETTE_NEUTRAL_95 surface: "#ffffff" # COLOR_BACKGROUND_ALT / white cards surface-muted: "#f3f3f3" # PALETTE_NEUTRAL_95 — sidebar, app bg surface-inverse: "#032d60" # PALETTE_BLUE_20 — dark stage-left nav # Ink / text (warm-neutral family) ink: "#181818" # PALETTE_NEUTRAL_10 — body text ink-secondary: "#444444" # PALETTE_NEUTRAL_30 — action labels, subdued ink-tertiary: "#747474" # PALETTE_NEUTRAL_50 — placeholder, muted on-primary: "#ffffff" # COLOR_TEXT_BRAND_PRIMARY on-surface: "#181818" # Brand / accent — Lightning Blue primary: "#0176d3" # PALETTE_BLUE_50 / BRAND_ACCESSIBLE — accessible interactive primary-bold: "#1b96ff" # PALETTE_BLUE_60 / COLOR_BRAND — marketing highlight primary-hover: "#014486" # PALETTE_BLUE_30 — darker on hover primary-active: "#03234d" # PALETTE_BLUE_15 — pressed state primary-container: "#eef4ff" # PALETTE_BLUE_95 — tinted bg behind accents primary-text-link: "#0b5cab" # PALETTE_BLUE_40 / BRAND_TEXT_LINK — body links # Cloud Blue (secondary teal-blue accent, distinct from electric blue) cloud-blue: "#0d9dda" # PALETTE_CLOUD_BLUE_60 cloud-blue-light: "#eaf5fe" # PALETTE_CLOUD_BLUE_95 # Semantic success: "#2e844a" # PALETTE_GREEN_50 success-bg: "#cdefc4" # PALETTE_GREEN_90 warning: "#a96404" # PALETTE_ORANGE_50 warning-bg: "#fedfd0" # PALETTE_ORANGE_90 error: "#ea001e" # PALETTE_RED_50 / COLOR_TEXT_ERROR error-bg: "#feded8" # PALETTE_RED_90 # Borders border: "#dddbda" # PALETTE_WARM_GRAY_5 — default border border-subtle: "#ecebea" # PALETTE_WARM_GRAY_4 — dividers border-focus: "#0176d3" # same as primary — focus outline # Shadow tints (opaque approximations — Google format requires hex) shadow-soft: "#d4d4d4" # was rgba(0,0,0,0.16) — dropdown shadow flattened shadow-medium: "#c4c4c4" # was rgba(0,0,0,0.30) — drag shadow flattened shadow-active: "#0176d3" # BRAND_ACCESSIBLE — active glow ring typography: display-hero: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 42px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.5px display: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.25 letterSpacing: -0.25px heading-section: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0px heading-sub: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0px body-large: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0px caption: fontFamily: "Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px code: fontFamily: "Consolas, Menlo, Monaco, Courier, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px spacing: xxxs: 2px xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px rounded: none: 0px sm: 2px md: 4px lg: 8px pill: 240px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px borderColor: "{colors.primary}" borderWidth: 1px button-secondary-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-hover}" borderColor: "{colors.primary-hover}" button-ghost: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px button-ghost-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-hover}" button-destructive: backgroundColor: "{colors.error}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px card: backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: 16px 24px borderColor: "{colors.border}" borderWidth: 1px card-hover: borderColor: "{colors.primary}" input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px borderColor: "{colors.border}" borderWidth: 1px input-focus: borderColor: "{colors.border-focus}" outlineWidth: 1px outlineColor: "{colors.primary}" badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 8px badge-success: backgroundColor: "{colors.success-bg}" textColor: "{colors.success}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 8px badge-error: backgroundColor: "{colors.error-bg}" textColor: "{colors.error}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 8px nav-global: backgroundColor: "{colors.surface-inverse}" textColor: "{colors.on-primary}" typography: "{typography.nav-link}" padding: 0px 16px data-table-header: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" padding: 8px 12px borderColor: "{colors.border}" tooltip: backgroundColor: "{colors.surface-inverse}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: 6px 12px --- # Salesforce Design System ## Overview Salesforce's Lightning Design System is enterprise UI at its most deliberate: a system built to scale across thousands of applications, dozens of product teams, and millions of users worldwide. The canvas opens on `{colors.background}` — a warm neutral that sits a half-step off white — with white cards layered over it. This two-tone foundation creates clear visual hierarchy without leaning on shadow, the way many enterprise systems do. The result is calm and purposeful, never cold. The accent strategy is unambiguous. `{colors.primary}` (PALETTE_BLUE_50, `#0176d3`) is the workhorse — every interactive element, every focus ring, every CTA anchors to this accessible cloud-blue. A brighter marketing variant at `{colors.primary-bold}` (`#1b96ff`) animates the brand's advertising surfaces, but inside product UIs the accessible shade dominates. Semantic colors earn their own palettes — green for success, red for error, orange for warning — each available in both text-weight and soft background variants for layered feedback patterns. Typography is set in Salesforce Sans, a custom humanist geometric that the company refined from its roots in system-ui defaults. Its friendly round terminals read as approachable rather than cold, a deliberate counterweight to its IBM-style competitors. Weight 700 carries all display and heading roles; body text rides at 400, with the only other weight being a semi-bold accent for navigation. The type scale follows rem increments anchored at 16px base: `{typography.display-hero}` at 42px carries page-level titles, while `{typography.caption}` at 12px services data-dense UI labels throughout the app. **Key Characteristics:** - Warm neutral surfaces — `{colors.background}` at `#f3f3f3` and `{colors.surface}` at white create a two-tone canvas without harsh contrast - Single brand accent — `{colors.primary}` is used for every interactive state; no competing colors dilute its meaning - Accessible by default — `{colors.primary}` at `#0176d3` meets WCAG AA on both white and the neutral background - Dark stage-left nav — `{colors.surface-inverse}` at `#032d60` anchors the persistent global navigation with brand depth - Salesforce Sans custom typeface — humanist geometric with round terminals, distinct from generic system-ui stacks - 8px base spacing — `{spacing.xs}` as the atom; all layout gaps are multiples of this unit - Conservative 4px cards, 2px small-items radius — `{rounded.md}` for interactive elements; not aggressively rounded - Pill variant available — `{rounded.pill}` at 240px for badges and compact tags - Full semantic color system — success, warning, error each with both ink and background-tint variants - Data table–optimized — dedicated header and row-hover tokens; density is a first-class concern - Monospace code font — Consolas/Menlo stack for developer-facing surfaces inside the platform - Shadow used sparingly — dropdown menus and drag states get depth; cards prefer border over shadow ## Colors ### Primary - **App Background** (`{colors.background}`): The warm neutral `#f3f3f3` (PALETTE_NEUTRAL_95) covers the full application shell, creating a slightly receded canvas beneath white surface cards. - **Surface** (`{colors.surface}`): Pure white for cards, modals, panels — reads as "active" content area against the neutral background. - **Ink** (`{colors.ink}`): Near-black `#181818` (PALETTE_NEUTRAL_10) for all body text; warm rather than pure black to ease reading on extended sessions. ### Brand Accent - **Interactive Blue** (`{colors.primary}`): `#0176d3` — the WCAG AA–accessible brand blue used on all interactive elements: buttons, links, checkboxes, toggles, focus rings. - **Marketing Blue** (`{colors.primary-bold}`): `#1b96ff` — the more vivid brand expression used on marketing pages and hero illustrations; too bright for body interactive states. - **Link Blue** (`{colors.primary-text-link}`): `#0b5cab` — slightly darker shade for inline text links to hit contrast requirements against white backgrounds. ### States - **Hover** (`{colors.primary-hover}`): `#014486` — noticeably darker on hover to signal affordance; same hue, compressed toward deep navy. - **Active** (`{colors.primary-active}`): `#03234d` — near-navy for pressed states; unmistakably engaged. - **Tinted Container** (`{colors.primary-container}`): `#eef4ff` — pale blue fill for selected rows, input focus halos, and accent backgrounds. ### Semantic - **Success** (`{colors.success}`): `#2e844a` on `{colors.success-bg}` `#cdefc4` — green pair for validation, inline confirmation, and status badges. - **Warning** (`{colors.warning}`): `#a96404` on `{colors.warning-bg}` `#fedfd0` — amber pair for cautionary alerts and stale record indicators. - **Error** (`{colors.error}`): `#ea001e` on `{colors.error-bg}` `#feded8` — high-contrast red pair; error text on white meets AA. ### Borders and Shadows - **Border** (`{colors.border}`): `#dddbda` (warm gray) — consistent 1px rule on all cards and inputs; keeps surfaces legible without adding visual weight. - **Shadow soft** (`{colors.shadow-soft}`): was `rgba(0,0,0,0.16)` — flattened to `#d4d4d4` in Google hex format. Applied to dropdowns and popovers. ## Typography ### Font Family - **Primary**: `Salesforce Sans` — a custom humanist geometric commissioned by Salesforce, with rounded terminals that soften the enterprise edge. Full stack: `Salesforce Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`. - **Monospace**: `Consolas, Menlo, Monaco, Courier, monospace` — for code views, developer console, formula fields, and SOQL editors. ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values. | Token | Use | |---|---| | `display-hero` | Page-level headings, hero marketing titles | | `display` | Section titles, modal headers, dashboard panel labels | | `heading-section` | Component headers, form section titles | | `heading-sub` | Sub-section labels, sidebar headers | | `body-large` | Feature descriptions, lead paragraphs | | `body` | All primary content, form help text | | `body-small` | Secondary labels, compact list items | | `nav-link` | App navigation, tab labels, menu items | | `button-ui` | All button labels — bold 14px for legibility at small size | | `caption` | Data table headers, badge text, meta information | | `code` | Developer console, formula fields, code snippets | ### Principles - Weight is binary: 700 for headings and button labels, 400 for all body content — no intermediate weights create ambiguity. - 16px base (`{typography.body}`) is the minimum rendered size for all body text; `{typography.caption}` at 12px is reserved for data-dense labels only. - Line height 1.5 across body sizes supports readability in data-heavy CRM views where multiple fields compete for attention. - Letter spacing stays at 0 except for the two largest display tokens, where slight tightening (-0.5px, -0.25px) prevents visual spread at large sizes. - No italic or uppercase-transform role in the base system — emphasis is carried through weight and color, not transform. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (`{spacing.xs}`). SLDS uses a generous scale that respects the information density of CRM applications. Tighter 2px and 4px increments exist for inline icon gaps; 8px is the standard atom for padding and gap throughout components. ### Grid and Container - Max content width: 1280px for page layouts; record views can span full width in Lightning App Builder - 12-column grid with 16px gutters for Lightning page layouts - App navigation ("Stage Left") is fixed at 52px wide in collapsed state; expands to 256px - Record pages use a three-column split: detail panel (7/12) + activity sidebar (5/12) on desktop ### Whitespace Philosophy - SLDS defaults to dense; whitespace is purposefully rationed rather than lavished. This is a system built for sustained daily use, not marketing impressiveness. - Compact mode shrinks padding by 50% (8px → 4px on rows) for power users managing large datasets. - Generous 24px card padding (`{spacing.lg}`) ensures legibility even at high information density. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; `{colors.border}` 1px | Cards, panels, record fields | | Subtle (Level 1) | `0 2px 2px {colors.shadow-soft}` | Row hover states, inline menus | | Dropdown (Level 2) | `0 2px 3px {colors.shadow-soft}` | Dropdown menus, comboboxes, lookup results | | Elevated (Level 3) | `0 4px 12px {colors.shadow-medium}` | Docked panels, utility bar flyouts | | Dialog (Level 4+) | `0 8px 32px {colors.shadow-medium}` | Modals, full-screen overlays | | Focus Ring | `0 0 3px {colors.shadow-active}` | Active interactive elements, keyboard focus | **Shadow Philosophy**: SLDS uses shadow as a functional signal, not a decorative gesture. Cards and form elements live flat with borders; shadows only emerge when an element physically floats above the document (dropdowns, modals, drag handles). The "active" shadow tokens literally match `{colors.primary}` — making focus states accessible glow rings rather than geometric chrome. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Data tables, inline text fields, some list items | | `sm` | 2px | Smallest interactive elements, tooltips | | `md` | 4px | Buttons, input fields, cards — the dominant radius | | `lg` | 8px | Large cards, modals, panels | | `pill` | 240px | Badges, status indicators, compact tags | SLDS is a conservative radius system centered on `{rounded.md}`. The 4px corner is pragmatic — friendly without being playful, professional without being rigid. Large UI surfaces like modals get `{rounded.lg}` for a softer frame; tiny status items get `{rounded.pill}` to read as self-contained tags rather than rectangular chips. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button variants - **`button-primary`** — solid `{colors.primary}` fill, white label, `{rounded.md}` corners, 8px 16px padding. Used for the single primary action on any view. - **`button-secondary`** — white fill, `{colors.primary}` border and text. Used for secondary actions alongside a primary CTA; hover fills with `{colors.primary-container}`. - **`button-ghost`** — transparent fill, `{colors.primary}` text only. Used within already-branded contexts — card headers, app navigation — where adding a border would create excessive chrome. - **`button-destructive`** — `{colors.error}` fill, white text. Reserved for irreversible delete or cancel actions; never shown as a default-selected state. ### Cards Standard `{components.card}` is a white panel with `{colors.border}` 1px rule, 4px corners, and 24px padding. Data cards live on the `{colors.background}` neutral canvas. Hover state elevates the border color to `{colors.primary}` to signal interactivity. ### Inputs `{components.input}` uses `{colors.surface}` background with `{colors.border}` 1px rule. On focus, the border tightens to `{colors.border-focus}` and a secondary 1px outline ring in `{colors.primary}` creates the accessible glow. Error state replaces both with `{colors.error}`. ### Badges and Tags `{components.badge}` uses `{colors.primary-container}` fill with `{colors.primary}` text — a tinted pill that sits quietly alongside record metadata. Semantic variants (`{components.badge-success}`, `{components.badge-error}`) pair the semantic ink and background-tint tokens. ### Navigation `{components.nav-global}` renders on `{colors.surface-inverse}` (deep navy `#032d60`) with white labels — the persistent dark left rail that anchors every Lightning app. Section items use `{typography.nav-link}` at 14px. ## Do's and Don'ts ### Do - Use `{colors.primary}` for all interactive states — buttons, checkboxes, toggles, links, focus rings — and nothing else. Its singularity is its power. - Prefer 1px `{colors.border}` on cards over box-shadows for the app shell layer; reserve shadow for floating elements. - Use `{colors.surface-inverse}` only for the global nav; introducing it in content areas creates unintended emphasis. - Apply `{rounded.md}` (4px) to all standard buttons and inputs; don't introduce intermediate values like 6px or 10px. - Reference semantic color pairs together: `{colors.success}` text always on `{colors.success-bg}` — never on white surfaces, which loses the band-coded association. - Use weight 700 (`{typography.button-ui}`) for all button labels, even ghost buttons, to maintain legibility at 14px on any background. - Keep body typography at `{typography.body}` (16px) or above; `{typography.caption}` (12px) is data-table density only. - Use `{colors.primary-container}` (`#eef4ff`) as a tinted selection surface on rows, highlighted cells, or wizard-step completed states. ### Don't - Don't use `{colors.primary-bold}` (`#1b96ff`) inside product UIs for interactive elements — it's designed for marketing pages and fails WCAG AA against white. - Don't introduce mid-range radii (6px, 10px, 12px) — `{rounded.md}` (4px) and `{rounded.lg}` (8px) define the entire range for standard UI. - Don't layer multiple primary-colored elements on one screen; the single-accent system depends on sparsity to communicate hierarchy. - Don't use box-shadow on flat card content — border-only cards are the SLDS default; shadow implies floating. - Don't add custom color palettes to product UIs without mapping them to the SLDS semantic token set — ad-hoc colors break the system's predictability guarantee. - Don't use `{colors.ink-tertiary}` (`#747474`) for meaningful body text — it falls below WCAG AA on white; reserve it for true metadata (timestamps, tooltips). - Don't invert the type weight convention — 400 weight headings read as broken components in SLDS context where 700 is the expected display weight. - Don't skip the two-tone canvas (gray background + white cards); placing cards directly on white collapses the depth hierarchy that SLDS relies on for record layout. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <480px | Single-column record layout; global nav collapses to bottom tab bar | | Mobile | 480–767px | Tab navigation replaces stage-left rail; cards stack vertically | | Tablet | 768–1023px | Two-column record layout; collapsible sidebar | | Desktop | 1024–1279px | Full three-panel layout; stage-left nav icon mode | | Large Desktop | >1280px | Full expanded nav (256px); max-width content container | ### Touch Targets - Minimum touch target: 44×44px for all interactive elements on mobile - Compact density mode reduces touch targets to 32×32px — discouraged on mobile; intended for desktop power users - Focus rings expand to 3px offset on mobile for finger-precision input ### Collapsing Strategy - Stage-left navigation collapses to a 52px icon rail on tablet; on mobile it shifts to a bottom nav pattern - Record detail panels stack vertically on mobile; the activity sidebar drops below the detail panel - Data tables switch to card-list stacking on mobile, with each field labeled inline - Utility bar (bottom docked panels) is disabled on mobile; modal overlays replace flyout patterns ### Image Behavior - Avatars and account logos maintain fixed aspect ratio using object-fit: cover; cropped to circle or rounded square - Salesforce's Astro/Einstein mascot illustrations are 1x/2x/3x served; never used as background fills - Chart and data visualization components switch from multi-column to stacked single-column on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#f3f3f3` warm neutral) - Surface: `{colors.surface}` (white cards) - Text: `{colors.ink}` (`#181818`) - Brand accent: `{colors.primary}` (`#0176d3`) - Link: `{colors.primary-text-link}` (`#0b5cab`) - Border: `{colors.border}` (`#dddbda`) - Error: `{colors.error}` (`#ea001e`) - Dark nav: `{colors.surface-inverse}` (`#032d60`) ### Example Component Prompts - "Build a Salesforce Lightning–style CRM record card using `{colors.surface}` white background, `{colors.border}` 1px border, `{rounded.md}` corners, and 16px 24px padding (`{spacing.md}` / `{spacing.lg}`). Header: `{colors.ink}` `{typography.heading-section}`. Field labels: `{colors.ink-secondary}` `{typography.caption}`. Values: `{colors.ink}` `{typography.body}`. Hover state: `{colors.border}` → `{colors.primary}` border transition." - "Create a Salesforce Lightning primary button using `{colors.primary}` background, `{colors.on-primary}` text, `{typography.button-ui}` (bold 14px), `{rounded.md}` corners, 8px 16px padding. Hover: `{colors.primary-hover}`. Active: `{colors.primary-active}`. Focus: 1px `{colors.border-focus}` outline + `0 0 3px {colors.shadow-active}` glow." - "Design a status badge system using `{components.badge}` for default (blue-tinted), `{components.badge-success}` for confirmed (green-tinted), and `{components.badge-error}` for failed (red-tinted). All use `{rounded.pill}`, `{typography.caption}`, and 2px 8px padding." - "Build a Salesforce Lightning–style data table with `{colors.surface-muted}` header row, `{colors.border}` 1px row dividers, `{typography.caption}` column labels at `{colors.ink-secondary}`, and `{typography.body-small}` cell text at `{colors.ink}`. Row hover: `{colors.primary-container}` background." - "Create a Salesforce Lightning global navigation sidebar using `{colors.surface-inverse}` (`#032d60`) background, `{colors.on-primary}` nav labels, `{typography.nav-link}` at 14px, with active item highlighted at `{colors.primary-bold}`. Width: 256px expanded, 52px collapsed icon mode." - "Build a form input group with `{components.input}` style: `{colors.surface}` background, `{colors.border}` border, `{rounded.md}` corners, 8px 12px padding, `{typography.body}` text. On focus: `{colors.border-focus}` border + `{colors.shadow-active}` 0 0 3px ring. Error state: `{colors.error}` border with `{colors.error}` caption below." ### Iteration Guide 1. Start with the two-tone canvas: `{colors.background}` (`#f3f3f3`) for the shell, `{colors.surface}` (white) for content panels — the depth hierarchy lives here, not in shadow. 2. Use `{colors.primary}` exclusively for interactive elements; if an element is actionable, it gets this blue. If it doesn't get this blue, it shouldn't look interactive. 3. Typography weight is binary: `{typography.display-hero}` through `{typography.heading-sub}` use weight 700; everything else uses 400. No 500 or 600 weights. 4. Apply `{rounded.md}` (4px) to all buttons and inputs; `{rounded.lg}` (8px) only for modals and large panels; `{rounded.pill}` only for badges. 5. Shadow is reserved for floating elements (dropdowns, modals, drag handles) — use 1px `{colors.border}` for all card-level separation. 6. Semantic colors come in pairs: always use the text color on its matching background tint (`{colors.success}` on `{colors.success-bg}`, etc.) — never swap. 7. Stage-left global nav is always `{colors.surface-inverse}` — keep this as the sole dark surface in product UI; don't replicate it in content areas. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Salesforce. Brand names and trademarks belong to their respective owners.