Salesforce

# layout.md — Salesforce.com Design System

> **⚠️ Important caveat:** The extraction captured an Access Denied / error page, not the live Salesforce marketing site. All tokens below are reconstructed from that single page's computed styles. The real Salesforce design system (Lightning Design System) is substantially richer. Treat this document as a minimal baseline and supplement with manual extraction from salesforce.com directly.

---

## 0. Quick Reference

**Stack:** HTML/CSS, no framework detected. Token source: reconstructed-from-computed (low confidence). Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.

```css
/* Core design tokens — paste into :root */
:root {
  /* Typography */
  --salesforce-font-family-base: "Times New Roman", Times, serif; /* body & heading font */
  --salesforce-font-size-xs: 16px;   /* body / paragraph text */
  --salesforce-font-size-sm: 32px;   /* h1 heading */
  --salesforce-font-weight-regular: 400; /* body weight */
  --salesforce-font-weight-medium: 700;  /* heading weight */

  /* Colour (reconstructed from error page — likely not brand colours) */
  --salesforce-color-text:       #000000; /* primary text */
  --salesforce-color-bg:         transparent; /* page background */
  --salesforce-color-border:     #000000; /* border fallback */

  /* Spacing (reconstructed — 16px base unit inferred) */
  --salesforce-space-xs:  4px;
  --salesforce-space-sm:  8px;
  --salesforce-space-md:  16px;  /* base unit */
  --salesforce-space-lg:  32px;
  --salesforce-space-xl:  64px;

  /* Radius */
  --salesforce-radius-none: 0px; /* all elements on error page are sharp */
}
```

```tsx
// Error / status message component — minimal reconstructed example
export function StatusMessage({ title, ref, url }: { title: string; ref: string; url: string }) {
  return (
    <div style={{ fontFamily: 'var(--salesforce-font-family-base)', padding: 'var(--salesforce-space-lg)' }}>
      <h1 style={{ fontSize: 'var(--salesforce-font-size-sm)', fontWeight: 'var(--salesforce-font-weight-medium)', margin: '21.44px 0' }}>
        {title}
      </h1>
      <p style={{ fontSize: 'var(--salesforce-font-size-xs)', fontWeight: 'var(--salesforce-font-weight-regular)', margin: 'var(--salesforce-space-md) 0' }}>
        {ref}
      </p>
      <p style={{ fontSize: 'var(--salesforce-font-size-xs)', color: 'var(--salesforce-color-text)' }}>
        {url}
      </p>
    </div>
  );
}
```

**NEVER rules:**
- NEVER fabricate brand colours (Salesforce blue `#0176D3`) from this file — it was not extracted from the live site
- NEVER use `font-family: Arial` or `font-family: Inter` — extracted font is `"Times New Roman"`
- NEVER apply `border-radius` > `0px` — all extracted elements are sharp (`border-radius: 0px`)
- NEVER use hardcoded hex values in components — always reference a `--salesforce-*` token
- NEVER treat `font-size-sm: 32px` as a "small" size in UI terms — it is the **h1** size in this system
- NEVER infer a complete Salesforce brand palette from this file — source was an error page, not the marketing site

**Full design system → see layout.md**

---

## 1. Design Direction & Philosophy

### What we know (from extracted data)
The extraction captured a single **Access Denied** error page from salesforce.com, which returned browser-default serif rendering. This is almost certainly **not** representative of Salesforce's actual design system (Lightning Design System / SLDS), which uses a custom sans-serif typeface (Salesforce Sans), a distinct blue brand palette, and a comprehensive component library.

### Character of the extracted page
- **Minimal / unstyled:** No custom CSS properties, no component classes, no design framework detected
- **Typographic only:** Pure text hierarchy — heading + paragraph copy — no visual decoration
- **Sharp geometry:** Zero border-radius on all elements; no shadows, no gradients
- **Monochrome:** Black text on transparent/white background only

### What this design explicitly rejects (on the extracted page)
- Rounded corners (all `border-radius: 0px`)
- Colour decoration (no brand colour applied)
- Custom typography (falls back to browser-default Times New Roman)
- Motion or animation (transition value is `all` with no associated duration — browser default)
- Shadows or elevation (`box-shadow: none` on all elements)

### Design direction for implementation
Given the low-confidence extraction, agents should:
1. Use this file only as a **structural baseline**
2. Supplement with manual extraction from `salesforce.com` live pages
3. Reference [SLDS (Lightning Design System)](https://www.lightningdesignsystem.com/) for authoritative brand tokens

---

## 2. Colour System

> **Confidence: LOW** — reconstructed from a single error page. These are browser-default colours, not Salesforce brand colours.

### Primitive values
```css
/* ── Tier 1: Primitives (reconstructed) ── */
:root {
  --salesforce-primitive-black:       #000000; /* reconstructed: sole text/border colour extracted */
  --salesforce-primitive-white:       #ffffff; /* reconstructed: inferred page background */
  --salesforce-primitive-transparent: transparent; /* reconstructed: body backgroundColor */
}
```

### Semantic aliases
```css
/* ── Tier 2: Semantic (reconstructed) ── */
:root {
  --salesforce-color-text:         var(--salesforce-primitive-black); /* reconstructed: all body and heading text */
  --salesforce-color-text-heading: var(--salesforce-primitive-black); /* reconstructed: h1 colour */
  --salesforce-color-bg-page:      var(--salesforce-primitive-transparent); /* reconstructed: page/body background */
  --salesforce-color-bg-surface:   var(--salesforce-primitive-white);       /* reconstructed: implied card/surface */
  --salesforce-color-border:       var(--salesforce-primitive-black);        /* reconstructed: border colour on all elements */
}
```

### Component tokens
```css
/* ── Tier 3: Component (reconstructed) ── */
:root {
  --salesforce-color-text-body:    var(--salesforce-color-text);         /* paragraph and label text */
  --salesforce-color-text-h1:      var(--salesforce-color-text-heading); /* page-level heading */
  --salesforce-color-bg-body:      var(--salesforce-color-bg-page);      /* document background */
}
```

### Colour palette table

| Token | Value | Purpose | Confidence |
|---|---|---|---|
| `--salesforce-primitive-black` | `#000000` | Text, borders | reconstructed: high for this page |
| `--salesforce-primitive-white` | `#ffffff` | Surface background | reconstructed: inferred |
| `--salesforce-color-text` | `#000000` | All body text | reconstructed: high for this page |
| `--salesforce-color-bg-page` | `transparent` | Page background | reconstructed: from computed style |

> **[TBD - extract manually]** Brand blues, action colours, feedback colours (success/error/warning), and all interactive state colours must be extracted from the live salesforce.com marketing pages.

---

## 3. Typography System

> **Confidence: MODERATE** — two composite styles extracted (h1, body). Font family confirmed as `"Times New Roman"` from font declarations.

### Font stack
```css
:root {
  --salesforce-font-family-base: "Times New Roman", Times, serif; /* extracted: only declared font family */
  /* [TBD - extract manually] Salesforce Sans (brand typeface) — not present on error page */
}
```

### Composite type scale

```css
/* ── Composite Typography Tokens ── */
:root {
  /* Heading / H1 */
  --salesforce-type-h1-family:         var(--salesforce-font-family-base); /* extracted: high confidence */
  --salesforce-type-h1-size:           32px;   /* extracted: high confidence */
  --salesforce-type-h1-weight:         700;    /* extracted: high confidence */
  --salesforce-type-h1-line-height:    normal; /* extracted: browser default */
  --salesforce-type-h1-letter-spacing: normal; /* extracted: browser default */
  --salesforce-type-h1-margin:         21.44px 0px; /* extracted: browser-computed margin */

  /* Body / Base */
  --salesforce-type-body-family:         var(--salesforce-font-family-base); /* extracted: high confidence */
  --salesforce-type-body-size:           16px;   /* extracted: high confidence */
  --salesforce-type-body-weight:         400;    /* extracted: high confidence */
  --salesforce-type-body-line-height:    normal; /* extracted: browser default */
  --salesforce-type-body-letter-spacing: normal; /* extracted: browser default */
  --salesforce-type-body-margin:         16px 0px; /* extracted: browser-computed margin */
}
```

### Type scale table

| Role | Family | Size | Weight | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| `h1` (heading) | Times New Roman, serif | **32px** | **700** | normal | normal |
| `body` (paragraph) | Times New Roman, serif | **16px** | 400 | normal | normal |
| `[TBD]` h2–h6 | [TBD - extract manually] | [TBD] | [TBD] | [TBD] | [TBD] |
| `[TBD]` label/caption | [TBD - extract manually] | [TBD] | [TBD] | [TBD] | [TBD] |

### Pairing rules
- Only two weights extracted: **400** (body) and **700** (heading) — do not introduce intermediate weights without manual verification
- Heading-to-body ratio is **2:1** (32px : 16px)
- NEVER use `font-family: sans-serif` as a fallback — the extracted stack is serif-only (`"Times New Roman", Times, serif`)

---

## 4. Spacing & Layout

> **Confidence: LOW — reconstructed** from body margin (`16px`) and h1 margin (`21.44px`). A 16px base unit (4px grid × 4) is inferred.

```css
/* ── Spacing Scale (reconstructed: moderate confidence, inferred from 16px base) ── */
:root {
  --salesforce-space-base: 16px; /* reconstructed: body margin-top/bottom — base unit */

  --salesforce-space-2xs:  2px;  /* reconstructed: 0.125× base */
  --salesforce-space-xs:   4px;  /* reconstructed: 0.25× base */
  --salesforce-space-sm:   8px;  /* reconstructed: 0.5× base */
  --salesforce-space-md:   16px; /* reconstructed: 1× base — body margin */
  --salesforce-space-lg:   24px; /* reconstructed: 1.5× base */
  --salesforce-space-xl:   32px; /* reconstructed: 2× base — h1 size matches */
  --salesforce-space-2xl:  48px; /* reconstructed: 3× base */
  --salesforce-space-3xl:  64px; /* reconstructed: 4× base */

  /* Layout */
  --salesforce-layout-max-width:    [TBD - extract manually]; /* not available from error page */
  --salesforce-layout-gutter:       var(--salesforce-space-md); /* reconstructed: inferred from body margin */
  --salesforce-layout-column-gap:   var(--salesforce-space-md); /* reconstructed */
}
```

### Grid / breakpoints

> **[TBD - extract manually]** — No grid or breakpoint data was present on the error page. Salesforce.com uses a responsive multi-column grid on its marketing pages. Extract breakpoints from live pages.

| Breakpoint | Width | Status |
|---|---|---|
| Mobile | [TBD] | not extracted |
| Tablet | [TBD] | not extracted |
| Desktop | [TBD] | not extracted |
| Wide | [TBD] | not extracted |

### Flex / Grid decision rule (reconstructed)
- The extracted page uses `display: block` — no flex or grid layout detected on the error page
- `flexDirection: row`, `justifyContent: normal`, `alignItems: normal`, `gap: normal` on all extracted elements — these are browser defaults, not intentional design choices

---

## 5. Page Structure & Layout Patterns

> **Source: Layout Digest only. No screenshots available.** The extraction captured an Access Denied error page, not the Salesforce marketing site. Section map below distinguishes between **extracted** (confirmed from digest) and **(inferred)** (probable sections from a typical enterprise SaaS homepage).

### 5.1 Section Map

| # | Section | Layout Type | Approx. Height | Key Elements | Status |
|---|---|---|---|---|---|
| 1 | Navigation bar | Horizontal flex | ~64px | Logo, nav links, CTA button | (inferred) |
| 2 | Error / Access Denied message | Block, centred | ~200px | H1 "Access Denied", reference paragraph, URL paragraph | **extracted** |
| 3 | Hero | Full-width flex | ~500px | Headline, subheading, primary CTA | (inferred) |
| 4 | Feature / product grid | Multi-column grid | ~400px | 3–4 feature cards | (inferred) |
| 5 | Social proof / testimonials | Horizontal flex | ~300px | Logos or quotes | (inferred) |
| 6 | Secondary CTA band | Full-width block | ~150px | Headline + button | (inferred) |
| 7 | Footer | Multi-column grid | ~300px | Links, legal, social | (inferred) |

### 5.2 Layout Patterns

**Extracted page (Access Denied):**
- Single-column `display: block` layout
- No flex or grid containers detected
- Text content stacked vertically with browser-default block margins
- H1 margin: `21.44px 0` (browser UA stylesheet value)
- Body paragraph margin: `16px 0`
- No padding on any extracted element (`padding: 0px`)

**Inferred homepage patterns** (based on enterprise SaaS norms — NOT extracted):
- Navigation: `display: flex; justify-content: space-between; align-items: center` — **(inferred)**
- Feature grid: CSS Grid, likely `grid-template-columns: repeat(3, 1fr)`, gap `~32px` — **(inferred)**
- All inferred section column ratios and gap sizes are **[TBD - extract manually]** from live pages

### 5.3 Visual Hierarchy

**From extracted data only:**
- Sole heading is **32px / 700 weight** — dominates the page
- Body text at **16px / 400 weight** — clear step down
- 2:1 size ratio creates a two-level hierarchy
- No colour differentiation for hierarchy — all text is `#000000`
- No CTA buttons present on extracted page — **[TBD - extract manually]** for button census

**Inferred for homepage:**
- Primary CTA colour: **[TBD - extract manually]** — likely Salesforce brand blue but NOT confirmed from this extraction
- Hero headline would occupy the dominant visual position — **(inferred)**

### 5.4 Content Patterns

**Extracted (confirmed):**
- Pattern: `<h1>` error title → `<p>` reference code → `<p>` error URL — a three-element stacked text block
- No images, icons, or interactive elements on the extracted page

**Inferred for live site:**
- Repeating card pattern: icon + heading + body copy — **(inferred)**
- CTA pattern: headline + subheading + button — **(inferred)**
- All content patterns for the marketing site are **[TBD - extract manually]**

---

## 6. Component Patterns

> **Confidence: LOW** — only typographic elements were extracted. Component tokens below are reconstructed from the minimal data available. All interactive states are inferred from best practice unless noted.

### 6.1 Heading (H1)

**Anatomy:** Single block-level text element, no sub-components.

**Token mappings:**

| Property | Token | Value |
|---|---|---|
| `font-family` | `--salesforce-font-family-base` | `"Times New Roman", Times, serif` |
| `font-size` | `--salesforce-font-size-sm` | `32px` |
| `font-weight` | `--salesforce-font-weight-medium` | `700` |
| `color` | `--salesforce-color-text-heading` | `#000000` |
| `margin` | extracted value | `21.44px 0` |

```tsx
// H1 component — extracted styles, reconstructed tokens
interface HeadingProps {
  children: React.ReactNode;
  as?: 'h1' | 'h2' | 'h3';
}

export function Heading({ children, as: Tag = 'h1' }: HeadingProps) {
  return (
    <Tag
      style={{
        fontFamily: 'var(--salesforce-font-family-base)',
        fontSize: 'var(--salesforce-font-size-sm)',       /* 32px */
        fontWeight: 'var(--salesforce-font-weight-medium)', /* 700 */
        lineHeight: 'normal',
        letterSpacing: 'normal',
        color: 'var(--salesforce-color-text-heading)',
        margin: '21.44px 0',
        textAlign: 'start',
        textTransform: 'none',
        textDecoration: 'none',
      }}
    >
      {children}
    </Tag>
  );
}
```

---

### 6.2 Body Paragraph

**Anatomy:** Block-level text, no sub-components.

**Token mappings:**

| Property | Token | Value |
|---|---|---|
| `font-family` | `--salesforce-font-family-base` | `"Times New Roman", Times, serif` |
| `font-size` | `--salesforce-font-size-xs` | `16px` |
| `font-weight` | `--salesforce-font-weight-regular` | `400` |
| `color` | `--salesforce-color-text-body` | `#000000` |
| `margin` | extracted value | `16px 0` |

```tsx
// Paragraph component — extracted styles
interface BodyTextProps {
  children: React.ReactNode;
  className?: string;
}

export function BodyText({ children, className }: BodyTextProps) {
  return (
    <p
      className={className}
      style={{
        fontFamily: 'var(--salesforce-font-family-base)',
        fontSize: 'var(--salesforce-font-size-xs)',         /* 16px */
        fontWeight: 'var(--salesforce-font-weight-regular)', /* 400 */
        lineHeight: 'normal',
        color: 'var(--salesforce-color-text-body)',
        margin: 'var(--salesforce-space-md) 0',
        textAlign: 'start',
      }}
    >
      {children}
    </p>
  );
}
```

---

### 6.3 Error / Status Page

**Anatomy:** Container → H1 (title) → P (reference code) → P (URL or detail)

**States:** This is a static display component — no interactive states applicable.

```tsx
// Full error page component — reconstructed from extracted Access Denied page
interface ErrorPageProps {
  title?: string;
  reference?: string;
  detail?: string;
}

export function ErrorPage({
  title = 'Access Denied',
  reference,
  detail,
}: ErrorPageProps) {
  return (
    <main
      style={{
        fontFamily: 'var(--salesforce-font-family-base)',
        color: 'var(--salesforce-color-text)',
        backgroundColor: 'var(--salesforce-color-bg-body)',
        padding: 'var(--salesforce-space-lg)',
        maxWidth: 'var(--salesforce-layout-max-width, 100%)',
      }}
    >
      <h1
        style={{
          fontSize: 'var(--salesforce-font-size-sm)',       /* 32px */
          fontWeight: 'var(--salesforce-font-weight-medium)', /* 700 */
          margin: '21.44px 0',
          lineHeight: 'normal',
          color: 'var(--salesforce-color-text-heading)',
        }}
      >
        {title}
      </h1>

      {reference && (
        <p
          style={{
            fontSize: 'var(--salesforce-font-size-xs)', /* 16px */
            fontWeight: 'var(--salesforce-font-weight-regular)', /* 400 */
            margin: 'var(--salesforce-space-md) 0',
            color: 'var(--salesforce-color-text-body)',
          }}
        >
          {reference}
        </p>
      )}

      {detail && (
        <p
          style={{
            fontSize: 'var(--salesforce-font-size-xs)',
            fontWeight: 'var(--salesforce-font-weight-regular)',
            margin: 'var(--salesforce-space-md) 0',
            color: 'var(--salesforce-color-text-body)',
          }}
        >
          {detail}
        </p>
      )}
    </main>
  );
}
```

---

### 6.4 Button (Inferred — not extracted)

> **[TBD - extract manually]** — No button elements were present on the extracted page. The following is a structural placeholder only.

```tsx
// Button — PLACEHOLDER. All values marked [TBD] must be extracted from live salesforce.com
// DO NOT ship this component without manual token verification

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

export function Button({ variant = 'primary', children, disabled, ...rest }: ButtonProps) {
  // [TBD - extract manually]: background colour, border-radius, padding, font-size, hover/focus states
  return (
    <button
      {...rest}
      disabled={disabled}
      style={{
        fontFamily: 'var(--salesforce-font-family-base)',
        fontSize: 'var(--salesforce-font-size-xs)', /* 16px — assumed body size */
        fontWeight: 'var(--salesforce-font-weight-medium)',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.5 : 1,
        /* backgroundColor: '[TBD - extract manually]', */
        /* borderRadius:    '[TBD - extract manually]', */
        /* padding:         '[TBD - extract manually]', */
        /* color:           '[TBD - extract manually]', */
      }}
    >
      {children}
    </button>
  );
}
```

---

## 7. Elevation & Depth

> **Confidence: LOW — reconstructed.** All extracted elements had `box-shadow: none` and `border: 0px none`. No elevation system is present on the error page.

```css
/* ── Elevation Tokens (reconstructed: low confidence — no shadows extracted) ── */
:root {
  --salesforce-shadow-none: none; /* extracted: all elements on error page */

  /* [TBD - extract manually] — shadow scale for cards, modals, dropdowns */
  --salesforce-shadow-sm:  [TBD]; /* card / tile elevation */
  --salesforce-shadow-md:  [TBD]; /* dropdown / popover */
  --salesforce-shadow-lg:  [TBD]; /* modal / dialog */

  /* Border */
  --salesforce-border-width-none: 0px;  /* extracted: all elements */
  --salesforce-border-style:      none; /* extracted */
  --salesforce-border-color:      var(--salesforce-color-border); /* extracted: #000000 fallback */

  /* Border radius */
  --salesforce-radius-none: 0px; /* extracted: high confidence — all elements sharp */
  /* [TBD - extract manually] —  radius values for buttons, cards, modals on live site */

  /* Z-index scale (reconstructed) */
  --salesforce-z-base:    0;    /* document flow */
  --salesforce-z-raised:  10;   /* sticky elements */
  --salesforce-z-overlay: 100;  /* dropdowns, tooltips */
  --salesforce-z-modal:   1000; /* modals, dialogs */
  --salesforce-z-toast:   2000; /* notifications */
}
```

### Layering principles
- No layering signals extracted from the error page
- All elevation tokens marked `[TBD]` must be extracted from live salesforce.com interactive components
- NEVER apply `box-shadow` or `border-radius` to components without manual verification — the extracted page uses neither

---

## 8. Motion

> **Confidence: LOW — reconstructed.** All extracted elements had `transition: all` with no explicit duration, delay, or easing — this is the browser default, not an intentional design choice.

```css
/* ── Motion Tokens (reconstructed: low confidence) ── */
:root {
  /* The extracted value "transition: all" with no duration means NO intentional animation */
  --salesforce-transition-none:     none;       /* use for elements that must not animate */
  --salesforce-transition-default:  all;        /* extracted: browser default — avoid in production */

  /* [TBD - extract manually] — real duration and easing from live site interactions */
  --salesforce-duration-fast:    [TBD]; /* e.g. button hover */
  --salesforce-duration-base:    [TBD]; /* e.g. panel open */
  --salesforce-duration-slow:    [TBD]; /* e.g. page transition */
  --salesforce-easing-standard:  [TBD]; /* e.g. cubic-bezier(...) */
  --salesforce-easing-enter:     [TBD]; /* decelerate */
  --salesforce-easing-exit:      [TBD]; /* accelerate */
}
```

### Motion rules
- NEVER use `transition: all` in production — it causes layout thrashing and unexpected side-effects on non-visual properties
- NEVER animate without checking `prefers-reduced-motion`
- All duration and easing tokens are `[TBD]` — do not invent values without extraction from live interactions

```css
/* Accessibility — required on all animated components */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## 9. Anti-Patterns & Constraints

1. **Hardcoded hex colours → Why it fails → Use tokens instead.**
   AI agents default to writing `color: #000000` or worse, guessing `color: #0176D3` (Salesforce blue) directly in component styles. This fails because: (a) the colour was never extracted from the live site, and (b) hardcoded values cannot be themed or updated centrally. **Always use `var(--salesforce-color-text)` or a documented token. If the token is [TBD], leave a comment and do not fabricate a value.**

2. **Assuming brand colours from company identity → Why it fails → Only use extracted values.**
   An AI agent "knows" Salesforce uses blue and will write `background: #0176D3` or `background: #1589EE` from training data. This fails because the live site may have updated brand colours, and mixing extracted tokens with hallucinated brand values creates inconsistency. **Use only tokens in this file. If the value is [TBD], mark it explicitly and extract manually.**

3. **Using `font-family: Inter` or `font-family: Arial` → Why it fails → Use the extracted serif stack.**
   AI agents default to Inter or system-ui when no instruction is given. This extraction confirmed `"Times New Roman", Times, serif`. Writing a different family breaks typographic fidelity even if the error page is not representative. **Always write `font-family: var(--salesforce-font-family-base)`.**

4. **Treating `font-size-sm: 32px` as a "small" size → Why it fails → Understand token naming conventions.**
   The token name `--salesforce-font-size-sm` maps to the **h1 at 32px**. An AI agent reading "sm" will assume ~14px and apply it to fine print or labels, producing wildly oversized small text. **Read the usage comment on every token — never infer meaning from the name suffix alone.**

5. **Arbitrary spacing values → Why it fails → Use the 16px grid.**
   Without explicit spacing tokens, agents write `margin: 12px` or `padding: 20px`. These values break the reconstructed 16px-base grid (4, 8, 16, 32, 48, 64). **Only use multiples of `--salesforce-space-base` (16px). Reference a named spacing token; never hard-code pixel values.**

6. **Applying `border-radius` to components → Why it fails → All extracted elements are sharp.**
   AI agents default to `border-radius: 8px` or `border-radius: 4px` on buttons and cards. Every element on the extracted page has `border-radius: 0px`. Applying rounding without extraction invents geometry that may not match the real site. **Use `--salesforce-radius-none: 0px` until live button/card radius values are manually extracted.**

7. **Using `transition: all` → Why it fails → It animates unintended properties.**
   The extracted `transition: all` is a browser default. Writing `transition: all 0.2s` in production animates every property including `width`, `height`, and `display`, causing layout thrash and accessibility failures. **Use specific property transitions: `transition: color 0.2s ease, background-color 0.2s ease`.**

8. **Generating interactive component states without extraction data → Why it fails → States are fabricated.**
   When AI sees a Button component, it will add `:hover { background: darken(#0176D3, 10%) }` from training data. No interactive state was extracted from this page. Fabricated states silently diverge from the real Salesforce UI. **Mark all interactive state tokens as [TBD] and require manual extraction before shipping interactive components.**

9. **Using `display: absolute` for block-level layout → Why it fails → Breaks document flow.**
   The error page uses pure `display: block`. AI agents sometimes reach for `position: absolute` to achieve layouts when no flex/grid instructions are given. This breaks scrolling, accessibility, and responsive reflow. **Use `display: block`, `display: flex`, or `display: grid` with the documented layout tokens. Use `position: absolute` only for overlays and tooltips with a documented z-index token.**

10. **Treating this file as a complete Salesforce design system → Why it fails → Source was an error page.**
    An agent reading this file will generate components using serif fonts and no brand colour, producing output that looks nothing like Salesforce.com. This fails because the extraction source was a single Access Denied page, not the design system. **Every [TBD] token must be manually extracted from live salesforce.com pages before this file is used for production component generation.**

---

## Appendix A: Complete Token Reference

Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.

```css
/* Colours (14) */
--salesforce-color-text: #000000;
--salesforce-color-bg: transparent;
--salesforce-color-border: #000000;
--salesforce-primitive-black: #000000;
--salesforce-primitive-white: #ffffff;
--salesforce-color-text-heading: var(--salesforce-primitive-black);
--salesforce-color-bg-page: transparent;
--salesforce-color-bg-surface: var(--salesforce-primitive-white);
--salesforce-color-text-body: var(--salesforce-color-text);
--salesforce-color-text-h1: var(--salesforce-color-text-heading);
--salesforce-color-bg-body: var(--salesforce-color-bg-page);
--salesforce-border-width-none: 0px;
--salesforce-border-style: none;
--salesforce-border-color: var(--salesforce-color-border);

/* Typography (13) */
--font-size-xs: 16px; /* 2 elements — e.g. p "Reference #18.96a024", p "https://errors.edges" /* mined from computed styles */ */
--font-size-sm: 32px; /* 1 element — e.g. h1 "Access Denied" /* mined from computed styles */ */
--font-weight-regular: 400; /* 2 elements — e.g. p "Reference #18.96a024", p "https://errors.edges" /* mined from computed styles */ */
--font-weight-medium: 700; /* 1 element — e.g. h1 "Access Denied" /* mined from computed styles */ */
--salesforce-font-family-base: "Times New Roman", Times, serif;
--salesforce-font-size-xs: 16px;
--salesforce-font-size-sm: 32px;
--salesforce-font-weight-regular: 400;
--salesforce-font-weight-medium: 700;
--salesforce-type-h1-line-height: normal;
--salesforce-type-h1-letter-spacing: normal;
--salesforce-type-body-line-height: normal;
--salesforce-type-body-letter-spacing: normal;

/* Spacing (14) */
--salesforce-space-xs: 4px;
--salesforce-space-sm: 8px;
--salesforce-space-md: 16px;
--salesforce-space-lg: 24px;
--salesforce-space-xl: 32px;
--salesforce-type-h1-size: 32px;
--salesforce-type-h1-margin: 21.44px 0px;
--salesforce-type-body-size: 16px;
--salesforce-type-body-margin: 16px 0px;
--salesforce-space-base: 16px;
--salesforce-space-2xs: 2px;
--salesforce-space-2xl: 48px;
--salesforce-space-3xl: 64px;
--salesforce-layout-column-gap: var(--salesforce-space-md);

/* Radius (1) */
--salesforce-radius-none: 0px;

/* Effects (4) */
--salesforce-shadow-none: none;
--salesforce-shadow-sm: [TBD];
--salesforce-shadow-md: [TBD];
--salesforce-shadow-lg: [TBD];
```

## Appendix B: Token Source Metadata

```
tokenSource:        reconstructed-from-computed
extractedFrom:      salesforce.com (Access Denied / error page — NOT the marketing site)
confidence:         LOW overall
cssCustomProperties: 0 found natively on the page
curated tokens:     4 (font-size-xs, font-size-sm, font-weight-regular, font-weight-medium)
synthesised tokens: ~40 (all marked /* reconstructed */ in comments)

Clustering method:
  - Colour:   single hue cluster (black/transparent) — no brand palette present
  - Spacing:  16px base unit identified from body margin-top: 16px; grid extrapolated at ×0.25, ×0.5, ×1, ×1.5, ×2, ×3, ×4
  - Radius:   single value (0px) — sharp geometry only
  - Elevation: single value (none) — no shadow system present
  - Typography: 2-level scale (32px/700 for h1, 16px/400 for body)

Confidence by section:
  - Font family:     HIGH — declared in @font-face: "Times New Roman"
  - Font size/weight: HIGH — directly computed from h1 and body elements
  - Colour:          HIGH for this page, LOW for brand intent (error page, not marketing)
  - Spacing:         MODERATE — inferred from 16px body margin, not from a documented grid
  - All other tokens: LOW — inferred, not extracted

Critical limitation:
  The source page was an HTTP-level access denial, returning unstyled browser-default
  HTML with the Times New Roman system font. This file does NOT represent the
  Salesforce Lightning Design System (SLDS) or the salesforce.com marketing site design.

Recommended action:
  1. Re-run extraction against https://www.salesforce.com (authenticated if needed)
  2. Cross-reference with https://www.lightningdesignsystem.com for authoritative SLDS tokens
  3. Replace all [TBD] values before using this file for production code generation
  4. All [TBD] fields: brand blues, action colours, button styles, breakpoints,
     grid columns, shadow scale, motion durations, and interactive state colours
```