# Sharp — Construction Instructions & AI Prompting Guide
> Version 1.0 · Complete decision framework for building with the Sharp system

---

## Table of Contents

1. [Design Philosophy & Core Rules](#1-design-philosophy--core-rules)
2. [The Two-Font Law](#2-the-two-font-law)
3. [Color Application Rules](#3-color-application-rules)
4. [Border Radius Decision Framework](#4-border-radius-decision-framework)
5. [Background & Surface Rules](#5-background--surface-rules)
6. [Shadow & Elevation Rules](#6-shadow--elevation-rules)
7. [The Heavy Border — When and How](#7-the-heavy-border--when-and-how)
8. [Typography Application Rules](#8-typography-application-rules)
9. [Spacing Construction Rules](#9-spacing-construction-rules)
10. [Component Construction Guides](#10-component-construction-guides)
11. [Interactive States — Full Decision Guide](#11-interactive-states--full-decision-guide)
12. [Layout Construction Rules](#12-layout-construction-rules)
13. [Animation Rules](#13-animation-rules)
14. [What Never to Do — Anti-Pattern List](#14-what-never-to-do--anti-pattern-list)
15. [AI Prompting Instructions](#15-ai-prompting-instructions)
16. [New Project Checklist](#16-new-project-checklist)
17. [Component Pattern Library](#17-component-pattern-library)
18. [Responsive Construction Rules](#18-responsive-construction-rules)
19. [Accessibility Guidelines](#19-accessibility-guidelines)
20. [Common Scenarios — Decision Trees](#20-common-scenarios--decision-trees)

---

## 1. Design Philosophy & Core Rules

### The Fundamental Premise

The Sharp system is built on a single conviction: **the absence of decoration is the decoration.** Every removal of a border-radius, every hard edge, every flat inkblack shadow communicates that this product is direct, technical, and uninterested in performing softness. It does not round its corners to seem friendly — it trusts the user to understand directness.

This is not minimalism. It is the visual language of technical precision — the aesthetic of a well-typeset technical manual, a code editor, a terminal interface elevated to a UI system. The off-white background, the zero-radius edges, the mono section labels — they signal: *this is a tool, and tools do their job without decoration.*

---

### The 10 Commandments of This System

**1. No border-radius. None. Zero.**
Every button, input, card, modal, badge, and container has `border-radius: 0px`. This is the single most important rule. Do not add even 2px "just to soften it."

**2. Off-white, not pure white, for the page background.**
Use `#f5f5f0` for the page. Pure white `#ffffff` is reserved for surface cards and inputs only. The slight warmth prevents clinical sterility.

**3. Black is the only accent.**
`#1a1a1a` is the accent, the button color, the focus border, and the shadow color. There is no secondary accent hue. No blue, no teal, no brand color. Ink black only.

**4. DM Sans everywhere; Space Mono for structure only.**
DM Sans is used for all headings, body, buttons, navigation, descriptions — everything the user reads. Space Mono is used only for structural metadata: section labels, field labels, badges, code, counters.

**5. Hard-edge shadows define elevation.**
The depth system is an offset box-shadow with zero blur: `4px 4px 0 #1a1a1a` for panels, `8px 8px 0 #1a1a1a` for modals. This is the brutalist elevation signature. Never use soft Gaussian shadows in this system.

**6. Borders are 1.5px, not 1px.**
All input and button borders are `1.5px`. This weight difference is intentional — it gives the sharp system its precise, mechanical feel. 1px borders look accidental. 1.5px borders look deliberate.

**7. Section labels use Space Mono with a bottom border.**
Every section of content begins with a Space Mono label (`font-size: 11px, uppercase, tracking 0.12em`) that has a bottom border in `#d4d4d0`. This creates the "manual" structure that defines the system's personality.

**8. Table headers are inverted — dark background, light text.**
In the Sharp system, `<thead>` uses `background: #1a1a1a` with white mono text. This creates the authoritative data-grid feel that separates the system from conventional SaaS.

**9. Hover on outline buttons is a full fill invert.**
When a user hovers an outline button (transparent bg, dark border), the hover state completely inverts: dark background, white text. This binary state change — not a soft tint — is consistent with the system's direct personality.

**10. The off-canvas side-shadow on dropdowns is mandatory.**
Every dropdown and modal has the `4px 4px 0 #1a1a1a` or `8px 8px 0 #1a1a1a` offset shadow. This is what makes the Sharp system instantly recognizable. Never replace it with a soft shadow.

---

## 2. The Two-Font Law

The Sharp system uses only two fonts. Every piece of text belongs to one of two categories.

### Category 1: DM Sans — Everything the User Reads
**Assignment question: Is this text content, navigation, a button label, a heading, or a description?**

If yes → DM Sans.

- Page title: YES → DM Sans, weight 700
- Modal title: YES → DM Sans, weight 700
- Card heading: YES → DM Sans, weight 600
- Body paragraph: YES → DM Sans, weight 400
- Button text: YES → DM Sans, weight 600
- Navigation item: YES → DM Sans, weight 500
- Error message: YES → DM Sans, weight 400
- Description: YES → DM Sans, weight 300–400

---

### Category 2: Space Mono — Structure and Metadata
**Assignment question: Is this text a label, badge, counter, timestamp, code, section header, or any data identifier?**

If yes → Space Mono.

- Section title (e.g. "Buttons", "Typography"): YES → Space Mono, uppercase, border-bottom
- Field label (`TEXT INPUT`, `EMAIL`): YES → Space Mono, uppercase
- Badge text (`ACTIVE`, `DRAFT`): YES → Space Mono, uppercase
- Character counter: YES → Space Mono
- Timestamp: YES → Space Mono
- Code block: YES → Space Mono
- Keyboard shortcut: YES → Space Mono

---

### Font Decision Flowchart

```
Is it a section label, field label, badge, counter, or code? ──YES──► Space Mono
        │ NO
        ▼
Is it any other text (heading, body, button, nav, description)? ──YES──► DM Sans
        │ NO
        ▼
Default to DM Sans
```

---

## 3. Color Application Rules

### 3.1 Background Selection Rules

| Surface | Color | Why |
|---------|-------|-----|
| Page body | `#f5f5f0` | Off-white base — slightly warm, not clinical |
| Cards / panels | `#ffffff` | Clear surface separation from page |
| Input fields | `#ffffff` | Matches card surface — inputs are elevated within cards |
| Code blocks | `#f0f0eb` | Slightly deeper than page — inset feel |
| Table headers | `#1a1a1a` | Inverted — black header, white mono text |
| Table rows | `#ffffff` | Clean data surface |
| Table row hover | `#f0f0eb` | Subtle secondary tint |
| Disabled inputs | `#f0f0eb` | Darker than active to signal non-editable |

**Rule:** The Sharp system has three background tones: `#f5f5f0` (page), `#ffffff` (surface), and `#f0f0eb` (sunken/secondary). Use them in that order of elevation. Cards float above the page. Code blocks and secondary areas are sunken.

---

### 3.2 Ink Usage Rules

Black (`#1a1a1a`) is the single accent. It appears in:

1. **All primary buttons** — background `#1a1a1a`, text `#ffffff`
2. **Focus borders** — input `border-color: #1a1a1a` on `:focus`
3. **Table headers** — background
4. **Hard-edge shadows** — `4px 4px 0 #1a1a1a`
5. **Heavy section underlines** — `border-bottom: 3px solid #1a1a1a` on page headers
6. **Outline button borders** — and the fill-invert on hover

**Never:**
- Use a color other than black as a "brand" accent
- Use blue, teal, purple, or any hue-based accent color
- Apply `#1a1a1a` as a background on full page sections (only on table headers and button fills)
- Use gradient fills anywhere in the system

---

### 3.3 Text Color Assignment

| Priority | Color | Examples |
|----------|-------|---------| 
| Highest | `#1a1a1a` | Headings, button text on secondary bg |
| High | `#3a3a3a` | Section headings, subheadings |
| Medium | `#4a4a4a` | Subheadings, supplementary, body in some contexts |
| Low | `#6b6b6b` | Labels, captions, hints, timestamps, mono text |
| Disabled | `#9a9a9a` | Non-interactive elements only |
| On dark bg | `#ffffff` | Button text on primary button |

---

### 3.4 Semantic Color Rules

For success, warning, error, and info states, always apply all three together:
- Tinted background
- Semantic text color
- No semantic border on badges (the badge bg + text is sufficient)
- Never use black (`#1a1a1a`) as a semantic color — that role belongs to the primary accent

---

## 4. Border Radius Decision Framework

This is the only decision framework needed for this system, because there is only one correct answer.

**Every element: `border-radius: 0px`**

The complete decision tree:

```
Is this element interactive (button, input, select)?
→ border-radius: 0px

Is this element a container (card, modal, panel)?
→ border-radius: 0px

Is this element a badge or tag?
→ border-radius: 0px

Is this element a dropdown menu or tooltip?
→ border-radius: 0px

Is this a status dot indicator (circle, 6–8px diameter)?
→ border-radius: 9999px (the only exception — for circular dots only)
```

### Quick Reference Table

| Element | Radius |
|---------|--------|
| Button (all sizes) | 0px |
| Text input | 0px |
| Textarea | 0px |
| Select dropdown | 0px |
| Badge / chip (all types) | 0px |
| Card | 0px |
| Modal | 0px |
| Tooltip | 0px |
| Dropdown panel | 0px |
| Table container | 0px |
| Table cell | 0px |
| Navigation bar | 0px |
| Accent line / hr | 0px |
| Status dot (circular indicator) | 9999px |
| Code block | 0px |
| Progress bar track | 0px |
| Progress bar fill | 0px |

---

## 5. Background & Surface Rules

### 5.1 The Layering Model

```
Layer 4 (highest): Modals, Tooltips       → #ffffff + hard-edge shadow 8px 8px 0 #1a1a1a
Layer 3:           Dropdowns, Popovers    → #ffffff + hard-edge shadow 4px 4px 0 #1a1a1a
Layer 2:           Cards, Panels         → #ffffff + border 1px #d4d4d0
Layer 1 (lowest):  Page Background       → #f5f5f0
```

**Key insight:** Elevation in this system is communicated entirely by the hard-edge offset shadow, not by background color changes. Cards and modals both use `#ffffff` — their elevation levels are defined by shadow size.

---

### 5.2 Input Background Rule

Inputs always use `#ffffff` (same as cards). This creates clarity — the input looks like a surface ready for typing. When an input is disabled, change its background to `#f0f0eb` to signal non-editability.

---

### 5.3 No Soft Shadows

The Sharp system uses zero soft shadows (`box-shadow: 0 4px 12px rgba(...)`). All shadows are hard-edge offset:
- `1px 1px 0 #d4d4d0` — barely-there level
- `2px 2px 0 #1a1a1a` — subtle elevated level
- `4px 4px 0 #1a1a1a` — dropdown, focused card
- `8px 8px 0 #1a1a1a` — modal signature

If you find yourself writing a Gaussian shadow, you are building the wrong system.

---

### 5.4 Backdrop Blur

Modals may use `backdrop-filter: blur(4px)` on the overlay. The overlay background is `rgba(245, 245, 240, 0.90)` — same off-white family as the page. Do not use a dark overlay (`rgba(0,0,0,...)`).

---

## 6. Shadow & Elevation Rules

### 6.1 The Hard-Edge Rule

Every shadow in this system is an **offset hard-edge shadow with zero blur and zero spread.** The format is always:

```css
box-shadow: [x-offset]px [y-offset]px 0 [color];
```

Where x-offset and y-offset are always equal and always positive (bottom-right direction).

---

### 6.2 Elevation and Shadow Pairing

| What You're Building | Shadow to Use |
|---------------------|---------------|
| Flat card on page | `border: 1px solid #d4d4d0` (no shadow) |
| Featured/hover card | `2px 2px 0 #1a1a1a` |
| Dropdown / select | `4px 4px 0 #1a1a1a` |
| Modal | `8px 8px 0 #1a1a1a` |
| Tooltip | `2px 2px 0 #d4d4d0` |

---

### 6.3 Shadow Direction

Shadows always go bottom-right. Never top-left, never symmetric. The convention of `8px 8px 0` (positive X, positive Y) creates the print-press feel — as if the element is casting a shadow on a surface below-right of it.

---

### 6.4 Do Not Mix Shadow Systems

Never apply both a hard-edge shadow AND a soft Gaussian shadow to the same element. Pick one per the elevation table. Exception: table rows never get shadows at all.

---

## 7. The Heavy Border — When and How

In the Sharp system, the equivalent of the Luxury Editorial gold accent line is the **heavy ink border.** This is used on the page header section, not on every card.

### When to Use the Heavy Border

| Use It | Don't Use It |
|--------|-------------|
| Page header bottom divider | Card tops (use plain 1px border) |
| Section title underlines (3px) | Input fields |
| Key stat / hero number dividers | Dropdown items |
| Active nav underline | Badges |

### How to Implement

```css
/* Page header heavy rule */
.page-header {
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 24px;
  margin-bottom: 40px;
}

/* Section title — Space Mono + 1px border under */
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-medium);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
```

---

## 8. Typography Application Rules

### 8.0 Component showcase — font names are mandatory

The live component showcase opens with a **Typography** section that must:

1. List every font role (`display`, `body`, `label`, and optional `accent`) in an explicit card grid with **family name + usage** — sourced from `design-systems.json`, never left implicit.
2. Render the full type scale at actual sizes: Display/Hero (48px), page title (32px), section heading (24px), body large (18px), body base (15px), caption (13px), and a label/eyebrow sample.

For Sharp: **DM Sans** carries display, body, and UI; **Space Mono** carries labels, eyebrows, and structural metadata only.

### 8.1 The Section Label Pattern

Every content section begins with a Space Mono label. This is the most important typographic pattern in the system:

```
TYPOGRAPHY               ← Space Mono, 11px, uppercase, muted (#6b6b6b), tracking 0.12em
─────────────────────    ← 1px border-bottom #d4d4d0
                         ← 20px gap
[Content...]
```

The section label with border-bottom is the structural skeleton of every page in this system. Never start a content section without one.

---

### 8.2 The Page Header Pattern

```
Theme 01                 ← Space Mono, 11px, uppercase, muted
                         ← 8px gap
SHARP                    ← DM Sans, 56px+, weight 700, tracking -0.04em
Design System            ← DM Sans, same size, color #6b6b6b
─────────────────────    ← 3px border-bottom #1a1a1a (heavy rule)
                         ← 40px gap
[First section]
```

The heavy 3px rule under the page hero is the only place a 3px border appears at the page level. It communicates: everything below this line is inside the document.

---

### 8.3 Weight Hierarchy

DM Sans weight assignment:
- 700 — Page and section H1–H2 titles
- 600 — Card titles, H3, button text
- 500 — Navigation, subheadings, H4
- 400 — Body copy, descriptions, input values
- 300 — Captions, helper text

Never use 300 for anything the user needs to act on. Never use 700 for body copy.

---

### 8.4 Letter Spacing Rules

| Context | Spacing |
|---------|---------|
| Large DM Sans headlines (52px+) | `-0.04em` — very tight |
| Medium DM Sans headings (24–36px) | `-0.02em` to `-0.01em` |
| Body DM Sans | `0em` — never touch |
| Button DM Sans (uppercase) | `0.02em` |
| Space Mono labels (uppercase) | `0.12em` to `0.15em` |
| Space Mono badges (uppercase) | `0.05em` to `0.06em` |
| Space Mono code/counters | `0em` to `0.04em` |

---

### 8.5 Code Block Pattern

```css
.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-bg-sunken);   /* #f0f0eb */
  padding: 12px 16px;
  border-left: 3px solid var(--color-primary);  /* Signature left-accent */
  line-height: 1.6;
}
```

The left 3px border on code blocks is the system's code signature — a visual echo of the heavy page header rule.

---

## 9. Spacing Construction Rules

### 9.1 The Padding Budget

| Component | Padding |
|-----------|---------| 
| Badge | 3px vertical, 8px horizontal |
| Input (single line) | 10px vertical, 14px horizontal |
| Button small | 7px vertical, 14px horizontal |
| Button base | 10px vertical, 20px horizontal |
| Button large | 12px vertical, 28px horizontal |
| Card base | 24px all sides |
| Modal | 32px all sides |
| Page section | 40px vertical, varies |
| Table cell | 12px vertical, 16px horizontal |

---

### 9.2 Vertical Rhythm in Forms

```
[Field Label — Space Mono]
         ↕ 6px
[Input or Textarea]
         ↕ 5px
[Helper Text]
         ↕ 20px (between field groups)
[Next Field Label]
```

---

### 9.3 Section Label → Content Sequence

```
[Section Label — Space Mono, border-bottom]
    ↕ 20px (margin-bottom on section label)
[Content — cards, forms, tables]
    ↕ 48px (between major sections)
[Next Section Label]
```

---

### 9.4 Button Group Spacing

Two buttons together: gap is always `12px`. Cancel (flex:1) + Submit (flex:2).

```css
.btn-group { display: flex; gap: 12px; }
```

---

## 10. Component Construction Guides

### 10.1 How to Build a Modal — Step by Step

**Step 1: Backdrop**
- Position fixed, full viewport
- Background: `rgba(245, 245, 240, 0.90)` + `backdrop-filter: blur(4px)`
- Z-index: 400

**Step 2: Modal container**
- Background: `#ffffff`
- Border: `1.5px solid #1a1a1a`
- Border-radius: `0px`
- Padding: `32px`
- Max-width: `480px`
- Box-shadow: `8px 8px 0 #1a1a1a`
- No `overflow: hidden` needed (no pseudo-element accent line)

**Step 3: Modal header row**
- Flex row: eyebrow/title on left, close button (×) on right
- Close button: no background, no border, just the × at 18px DM Sans, color `#9a9a9a`

**Step 4: Title**
- DM Sans, weight 700, `1.25rem`–`1.5rem`, color `#1a1a1a`
- Margin-bottom: `16px`

**Step 5: Horizontal rule**
- `border-top: 1px solid #d4d4d0`
- Margin: `0 0 12px`

**Step 6: Description**
- DM Sans, `0.875rem`, weight 400
- Color: `#3a3a3a`
- Line-height: `1.6`
- Margin-bottom: `20px`

**Step 7: Field label**
- Space Mono, `11px`, uppercase, tracking `0.06em`
- Color: `#6b6b6b`
- Margin-bottom: `6px`

**Step 8: Input/Textarea**
- Background: `#ffffff`
- Border: `1.5px solid #d4d4d0`, border-radius: `0px`
- Focus: `border-color: #1a1a1a`

**Step 9: Button row**
- Flex, gap `12px`
- Cancel: `flex:1`, secondary style
- Submit: `flex:2`, primary style (dark bg, white text)

**Step 10: Entry animation**
- Starts at `translateY(12px)` + opacity 0
- Transitions to `translateY(0)` + opacity 1
- Duration: 300ms standard, opacity 150ms out

---

### 10.2 How to Build a Card — Step by Step

**Step 1: Container**
- Background: `#ffffff`
- Border: `1px solid #d4d4d0`
- Border-radius: `0px`
- Padding: `24px`

**Step 2: Featured card (optional)**
- Add `border-top: 3px solid #1a1a1a` for a primary/featured card only
- Not all cards need this — reserve for hero/primary calls to action

**Step 3: Section label**
- Space Mono, uppercase, border-bottom `1px solid #d4d4d0`

**Step 4: Content**
- DM Sans body, `14px`, color `#3a3a3a`

**Step 5: Card footer (if needed)**
- Border-top: `1px solid #d4d4d0`
- Padding: `16px 24px`

---

### 10.3 How to Build a Data Table — Step by Step

**Step 1: Table (no wrapper border needed)**
- `border-collapse: collapse`

**Step 2: Table header**
- Background: `#1a1a1a` (inverted — black)
- Text color: `#ffffff`
- Column headers: Space Mono, 11px, uppercase, tracking `0.08em`, weight 400
- Padding: `12px 16px`

**Step 3: Table rows**
- Background: `#ffffff` (clean)
- Cell text: DM Sans, 14px, color `#1a1a1a` to `#3a3a3a`
- Border-bottom: `1px solid #d4d4d0`
- Padding: `12px 16px`

**Step 4: Hover state**
- Background: `#f0f0eb`
- Transition: `background 100ms`

**Step 5: Status cells**
- Use badge components (Space Mono, 0px radius)

---

## 11. Interactive States — Full Decision Guide

### 11.1 Hover States

| Element | What Changes | Duration |
|---------|-------------|---------|
| Primary button | Background: `#1a1a1a` → `#333333` | 150ms |
| Secondary button | Background: `#f0f0eb` → `#e8e8e3` | 150ms |
| Outline button | Full invert: transparent + dark border → `#1a1a1a` bg + white text | 150ms |
| Card | No shadow → `2px 2px 0 #1a1a1a` | 150ms |
| Table row | `#ffffff` → `#f0f0eb` | 100ms |
| Input | border `#d4d4d0` → `#b0b0aa` | 150ms |
| Dropdown item | `transparent` → `#f0f0eb` | 100ms |

---

### 11.2 Focus States

```css
input:focus, textarea:focus, select:focus {
  border-color: #1a1a1a;    /* Full-ink border on focus */
  outline: none;
}

button:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}
```

No box-shadow on focus. The border-color change from grey to black is sufficient and keeps the hard-edge aesthetic.

---

### 11.3 Active / Press States

```css
button:active {
  transform: scale(0.98);
  transition: transform 50ms;
}
```

Snaps back immediately (50ms return). Never more than `scale(0.98)`.

---

### 11.4 Disabled States

```css
.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
```

Inputs: add `background: #f0f0eb`.

---

### 11.5 Error States

1. Border: `1.5px solid #c0392b`
2. Background: `#f8d7da` (subtle tint)
3. Error message: DM Sans, 12px, `#c0392b`, appears below input

---

## 12. Layout Construction Rules

### 12.1 Page Structure Pattern

```
[Fixed Nav — 56px, border-bottom 1px #d4d4d0]
[Page body — flex or grid]
   [Optional Sidebar — 260px, border-right 1px #d4d4d0]
   [Main content area — flex 1]
      [Page header — Space Mono eyebrow + DM Sans bold title + 3px border-bottom]
      [Section label + content sections]
[Optional Footer]
```

---

### 12.2 Sidebar Rules

In the Sharp system, sidebars do not have backgrounds different from the page. They are separated only by a `border-right: 1px solid #d4d4d0`. The sidebar is part of the same visual plane as the page.

---

### 12.3 Line Width

Body text lines: never exceed 680px. Data tables: full container width is fine.

---

## 13. Animation Rules

### 13.1 What Gets Animated

| Element | Animation | Trigger |
|---------|-----------|---------| 
| Modal | translateY(12px → 0) + fade | Open |
| Modal | Fade out only | Close |
| Dropdown | No animation — snap open | Open |
| Button hover | bg color change | Hover |
| Input focus | border color change | Focus |
| Table row hover | background tint | Hover |

### 13.2 What Never Gets Animated

- Border-radius changes (there are none)
- Shadow changes (they appear/disappear instantly)
- Font size changes
- Width/height changes

### 13.3 Performance Rule

Only animate: `transform`, `opacity`, `background-color`, `border-color`, `color`.

---

## 14. What Never to Do — Anti-Pattern List

### Shape Anti-Patterns
- ❌ Any border-radius above 0px on any element (except status dot)
- ❌ Pill-shaped buttons
- ❌ Rounded inputs
- ❌ Rounded card corners
- ❌ "Just 2px to soften it a little"

### Shadow Anti-Patterns
- ❌ Soft Gaussian shadows (`0 4px 12px rgba(...)`)
- ❌ Centered symmetric shadows (`0 4px 8px 0 ...`)
- ❌ Top-left offset shadows (always bottom-right)
- ❌ Using `rgba(0,0,0,0.1)` soft shadows alongside hard-edge elements
- ❌ No shadow at all on modals (the `8px 8px 0 #1a1a1a` is mandatory)

### Color Anti-Patterns
- ❌ Adding a hue-based brand accent (blue, teal, etc.)
- ❌ Using pure white `#ffffff` for the page background
- ❌ Gradient fills anywhere in the system
- ❌ Gold or colored accent lines (this system uses black)
- ❌ Soft colored focus rings (only pure `#1a1a1a` for focus)

### Typography Anti-Patterns
- ❌ Using Space Mono for headings or body copy
- ❌ Using DM Sans for code blocks or field labels
- ❌ Italic DM Sans on display text (this is not an editorial serif system)
- ❌ Mixing letter-spacing values not from the token sheet
- ❌ Setting line-height below 1.5 for body copy

### Spacing Anti-Patterns
- ❌ Padding below 10px vertical in any button
- ❌ Padding below 10px vertical in any input
- ❌ Gap below 12px between cancel and submit buttons
- ❌ No margin between section label and content
- ❌ Inconsistent odd-pixel spacing not from the token scale

---

## 15. AI Prompting Instructions

### 15.1 System Context Block

Include this at the start of any AI conversation about building UI:

```
You are building using the Sharp design system. Key rules:
- TWO fonts only: DM Sans (all headings, body, buttons) + Space Mono (all labels, badges, counters, code)
- border-radius: 0px on EVERYTHING (zero exceptions except circular status dots)
- Page background: #f5f5f0 (off-white); cards/surfaces: #ffffff; sunken/secondary: #f0f0eb
- Primary accent: #1a1a1a (ink black) — no other accent color
- Shadows: hard-edge offset ONLY — 4px 4px 0 #1a1a1a (dropdown), 8px 8px 0 #1a1a1a (modal)
- NEVER use soft Gaussian shadows (rgba blur shadows)
- Borders: 1.5px on inputs and buttons; 1px on cards and dividers
- Table headers: background #1a1a1a, text #ffffff, Space Mono uppercase
- Section labels: Space Mono, 11px, uppercase, tracking 0.12em, border-bottom 1px #d4d4d0
- Buttons: all inputs/buttons border-radius 0px; primary = dark bg white text; outline = full-invert on hover
```

---

### 15.2 Component Prompt Templates

**For a new form:**
```
Build a [form name] form using the Sharp design system.
- Container: max-width 480px, padding 32px, border-radius 0px, white bg #fff, border 1.5px solid #1a1a1a, box-shadow 8px 8px 0 #1a1a1a
- Title: DM Sans, weight 700, 20px, color #1a1a1a
- Horizontal rule: 1px solid #d4d4d0
- Field labels: Space Mono, 11px, uppercase, tracking 0.06em, color #6b6b6b
- Inputs: white bg, 1.5px border #d4d4d0, border-radius 0px, padding 10px 14px
- Focus: border-color #1a1a1a only (no shadow)
- Buttons: Cancel (secondary) + Submit (primary: bg #1a1a1a, text #fff), gap 12px, border-radius 0px
```

**For a new card:**
```
Build a [card name] card using the Sharp design system.
- Background: #ffffff, border 1px #d4d4d0, border-radius 0px, padding 24px
- Optional featured card: border-top 3px solid #1a1a1a
- Section label: Space Mono, 11px, uppercase, border-bottom 1px #d4d4d0
- Card title: DM Sans, weight 600–700, color #1a1a1a
- Body text: DM Sans, 14px, color #3a3a3a, line-height 1.6
```

**For a data table:**
```
Build a data table using the Sharp design system.
- Table: border-collapse collapse, no outer border needed
- Header: background #1a1a1a, text #ffffff
- Column headers: Space Mono, 11px, uppercase, tracking 0.08em, weight 400
- Row cells: DM Sans, 14px, color #1a1a1a, padding 12px 16px
- Row divider: 1px solid #d4d4d0
- Row hover: background #f0f0eb
- border-radius: 0px everywhere
```

---

### 15.3 Debugging Prompts

**If shadows are soft/blurry:**
```
Replace all box-shadow values with hard-edge offset shadows:
- Dropdown: box-shadow: 4px 4px 0 #1a1a1a
- Modal: box-shadow: 8px 8px 0 #1a1a1a
Remove any rgba soft shadows entirely.
```

**If border-radius is not zero:**
```
Set border-radius: 0px on ALL elements without exception.
Remove any rounded, pill, or circular button styles.
```

**If a color accent (blue, teal, etc.) appears:**
```
Remove all hue-based accent colors. Replace with #1a1a1a (ink black) for all accents.
The only colors allowed are the greyscale/off-white scale plus semantic success/warning/error/info backgrounds.
```

**If table headers look standard:**
```
Change table header background to #1a1a1a with text color #ffffff.
Column header font: Space Mono, 11px, uppercase, letter-spacing 0.08em, weight 400.
```

---

## 16. New Project Checklist

### Setup Phase
- [ ] Google Fonts: DM Sans + Space Mono imported
- [ ] CSS reset applied
- [ ] Body background: `#f5f5f0`
- [ ] Body font-family: `'DM Sans', sans-serif`
- [ ] Body color: `#3a3a3a`
- [ ] All heading styles: DM Sans, weight 700, tight letter-spacing
- [ ] All `border-radius` globally set to `0` as default
- [ ] Base input style: `border-radius: 0`, `border: 1.5px solid #d4d4d0`
- [ ] Base button reset defined

### Component Phase
- [ ] Font assignment: DM Sans for content, Space Mono for structure only
- [ ] border-radius: 0px on every component
- [ ] Shadows: hard-edge offset (no soft blur)
- [ ] Modal shadow: `8px 8px 0 #1a1a1a`
- [ ] Dropdown shadow: `4px 4px 0 #1a1a1a`
- [ ] Table header: inverted dark bg + white Space Mono text
- [ ] Section labels: Space Mono + border-bottom present
- [ ] Focus states: `border-color: #1a1a1a`
- [ ] Disabled: opacity 0.4, cursor not-allowed
- [ ] Error states: border + bg tint + message below

### Review Phase
- [ ] No border-radius anywhere except status dots
- [ ] No soft shadows anywhere
- [ ] No hue-based accent colors
- [ ] All section content preceded by Space Mono label with border-bottom
- [ ] Table headers dark-inverted
- [ ] Hard-edge modal shadow present
- [ ] All transitions within system range (50ms–300ms)

---

## 17. Component Pattern Library

### Pattern 1: Page Header
```
[Space Mono eyebrow — 11px, uppercase, muted]
         ↕ 8px
[DM Sans hero title — 52px+, weight 700, tracking -0.04em]
[DM Sans secondary — same size, color #6b6b6b]
─────────────────────────────  ← 3px border-bottom #1a1a1a
         ↕ 40px
[First section content]
```

### Pattern 2: Content Section
```
[Space Mono section label — uppercase, border-bottom 1px #d4d4d0]
         ↕ 20px
[Cards / table / form content]
         ↕ 48px
[Next section label]
```

### Pattern 3: Notification / Alert
```
[Container — border 1px semantic, bg tint, border-radius 0px, padding 16px 20px]
[Icon 16px + Title (DM Sans semibold) + Message (DM Sans regular)]
[Optional dismiss ×]
```

### Pattern 4: Navigation
```
[Nav bar — white #fff, border-bottom 1px #d4d4d0, height 56px, padding 0 24px]
[Logo — left, DM Sans bold or Space Mono brand mark]
[Nav items — DM Sans medium 14px, color #1a1a1a]
[Active item — border-bottom 2px solid #1a1a1a]
[Actions — right]
```

### Pattern 5: Empty State
```
[Center-aligned, max-width 360px, margin auto]
[Icon — 40px, stroke, muted]
[Title — DM Sans, weight 700, color #1a1a1a]
[Description — DM Sans, secondary color]
[CTA — primary button, border-radius 0px]
```

### Pattern 6: Code Block
```
[Container — bg #f0f0eb, border-left 3px solid #1a1a1a, padding 12px 16px]
[Space Mono, 13px, color #6b6b6b, line-height 1.6]
```

---

## 18. Responsive Construction Rules

### 18.1 Breakpoint Behavior

**Below 480px:**
- Modal padding: 32px → 16px
- Card padding: 24px → 16px
- Hero title: reduce 2 sizes
- Sidebar: collapses to off-canvas
- Table: horizontal scroll

**480px–767px:**
- Modal fills screen with 16px margin
- Two-column layouts collapse to one
- Nav collapses to hamburger
- Button group: stacked column

**768px–1023px:**
- 2-column card grids
- Sidebar at 220px
- Full type scale

**1024px+:**
- Full system as designed

---

### 18.2 Typography Scaling

| Element | Desktop | Tablet | Mobile |
|---------|---------|--------|--------|
| Hero H1 | 56px | 40px | 32px |
| Page H1 | 48px | 36px | 28px |
| Section H2 | 36px | 28px | 24px |
| Card/Modal H3 | 24px | 20px | 18px |
| H4 | 18px | 16px | 16px |
| Body | 14px | 14px | 15px |

---

## 19. Accessibility Guidelines

### 19.1 Color Contrast Requirements

| Pairing | Contrast | WCAG Level |
|---------|----------|-----------| 
| `#1a1a1a` on `#f5f5f0` | 17.2:1 | AAA ✓ |
| `#3a3a3a` on `#f5f5f0` | 10.4:1 | AAA ✓ |
| `#6b6b6b` on `#f5f5f0` | 5.1:1 | AA ✓ |
| `#ffffff` on `#1a1a1a` | 17.2:1 | AAA ✓ |
| `#9a9a9a` on `#f5f5f0` | 2.8:1 | ✗ Disabled only |

---

### 19.2 Focus Management

- All interactive elements: `:focus-visible` with `outline: 2px solid #1a1a1a; outline-offset: 2px`
- Never `outline: none` without alternative
- Modal: trap focus within, return on close

---

### 19.3 ARIA Requirements

```html
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Confirm deletion</h2>
</div>

<label for="name-input">Full Name</label>
<input id="name-input" aria-describedby="name-error">
<div id="name-error" role="alert">Required field</div>
```

---

## 20. Common Scenarios — Decision Trees

### Scenario: "Should I add a border-radius?"

```
Is this element in the Sharp design system? ──YES──► border-radius: 0px. Always.
        │
        ▼
Is this a circular status dot indicator (6–8px)? ──YES──► border-radius: 9999px
```

### Scenario: "What kind of shadow should I use?"

```
Soft Gaussian shadow? ──NEVER──► Replace with hard-edge offset shadow

Is this a modal?    ──YES──► 8px 8px 0 #1a1a1a
Is this a dropdown? ──YES──► 4px 4px 0 #1a1a1a
Is this a flat card?──YES──► No shadow — use border 1px #d4d4d0 only
Is this a tooltip?  ──YES──► 2px 2px 0 #d4d4d0
```

### Scenario: "Should I use Space Mono here?"

```
Is this a section title, field label, badge, counter, code, or timestamp? ──YES──► Space Mono
        │ NO
        ▼
DM Sans
```

### Scenario: "What background should this element have?"

```
Page body? ──YES──► #f5f5f0
Card or surface? ──YES──► #ffffff
Input? ──YES──► #ffffff
Code block or secondary bg? ──YES──► #f0f0eb
Table header? ──YES──► #1a1a1a (inverted)
Modal? ──YES──► #ffffff
Overlay backdrop? ──YES──► rgba(245, 245, 240, 0.90)
```

---

*End of Instructions — Sharp v1.0*
*Design System Document: theme-01-sharp-design-system.md*
*Instructions Document: theme-01-sharp-instructions.md*