---
name: Polymodel
description: Blueprint/technical-drawing design system for an AT Protocol model-sharing app.
colors:
  base: "oklab(0.980696 -0.001930 -0.004746)"
  surface: "oklab(1.000000 0.000000 0.000000)"
  overlay: "oklab(0.940351 -0.008108 -0.017910)"
  ink: "oklab(0.252380 -0.009714 -0.034170)"
  emphasis: "oklab(0.218461 -0.012406 -0.039864)"
  subtle: "oklab(0.436442 -0.012368 -0.044729)"
  muted: "oklab(0.550853 -0.008208 -0.033125)"
  primary: "oklab(0.479428 -0.035191 -0.111636)"
  secondary: "oklab(0.613677 -0.025079 -0.065437)"
  tertiary: "oklab(0.367809 -0.026626 -0.097956)"
  action: "oklab(0.516800 -0.033898 -0.129915)"
  link: "oklab(0.485173 -0.035448 -0.128511)"
  border: "oklab(0.776085 -0.009713 -0.026566)"
  highlight: "oklab(0.902143 -0.011298 -0.030437)"
  error: "oklab(0.499559 0.115162 0.066600)"
  warning: "oklab(0.528919 0.016251 0.103026)"
  success: "oklab(0.503030 -0.080259 0.021719)"
typography:
  heading:
    fontFamily: "Proza Libre, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontWeight: 600
    lineHeight: 1.3
  body:
    fontFamily: "Proza Libre, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontWeight: 400
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "Ioskeley Mono, IBM Plex Mono, Consolas, monospace"
    fontSize: "0.72rem"
    letterSpacing: "0.04em"
rounded:
  panel: "2px"
  square: "0px"
  pill: "999px"
spacing:
  base: "16px"
components:
  button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.panel}"
    padding: "0.55rem 0.8rem"
  button-primary:
    backgroundColor: "{colors.action}"
    textColor: "{colors.base}"
    rounded: "{rounded.panel}"
    padding: "0.55rem 0.8rem"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.panel}"
  input:
    backgroundColor: "{colors.base}"
    textColor: "{colors.ink}"
    rounded: "{rounded.panel}"
    padding: "0.75rem 0.85rem"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.panel}"
  status-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.subtle}"
    rounded: "{rounded.panel}"
    typography: "{typography.mono}"
---

# Design System: Polymodel

## 1. Overview

**Creative North Star: "The Drafting Table"**

Polymodel looks like a set of well-kept engineering blueprints rendered for the web. The page is cool drafting stock; content sits on crisp bordered panels with near-square corners; technical metadata is set in monospace the way a drawing carries its measurements; empty media reads as a faint drafting grid awaiting geometry. The primary is drawing-ink blue; the action accent is a stronger blue, used like the one marked-up instruction on the sheet. It is a **product** surface: design serves the task of browsing, judging, downloading, and publishing printable things. The tool should disappear into the work.

This system explicitly rejects the flat-SaaS dashboard look (rounded cards everywhere, purple/blue gradients, soft shadows, Inter-for-everything) and the reflexive dark-terminal "developer tool" aesthetic. Warmth is minimal and functional — mostly semantic warning/error states — while the product identity comes from cool stock, blue ink, humanist type, and crisp linework. Familiarity is a feature: a maker fluent in Printables should trust every control on sight.

**Key Characteristics:**
- Cool drafting-stock base, drawing-ink blue, single stronger-blue action accent.
- Near-square corners (2px panels, 0px controls); crisp 1px borders over shadow.
- Monospace for all technical metadata (dimensions, formats, DIDs/handles, counts, status).
- Drafting-grid placeholders instead of gray boxes.
- First-class light **and** dark schemes; restrained, state-driven color and motion.

## 2. Colors

A restrained palette: a cool drafting-stock neutral ramp, one drawing-ink blue that carries structure, and a single stronger blue reserved for action. Every token has a dark-scheme value (see `assets/styling/theme.css`; tonal/dark values live in the `.impeccable/design.json` sidecar).

### Primary
- **Drawing-Ink Blue** (`oklab(0.479428 -0.035191 -0.111636)`): The structural brand color — active tabs, selected state, focus rings, section emphasis, grid lines (at low alpha). Carries identity without being the action color.

### Secondary
- **Slate Blue** (`oklab(0.613677 -0.025079 -0.065437)`): Supporting blue for secondary controls and quieter structural accents.
- **Deep Blueprint Blue** (`oklab(0.367809 -0.026626 -0.097956)`): High-emphasis blue for hover ink and strong labels against light surfaces.

### Tertiary
- **Action Blue** (`oklab(0.516800 -0.033898 -0.129915)`): The single action accent — primary buttons and the one element that should pull the eye to "do this." **Action only, never decoration.**
- **Link Blue** (`oklab(0.485173 -0.035448 -0.128511)`): Inline text links, distinct from the action button so links don't read as buttons.

### Neutral
- **Drafting Stock** (`oklab(0.980696 -0.001930 -0.004746)`): The body background. A cool blue-white substrate — blueprint-adjacent without drifting into warm cream or flat SaaS white.
- **Sheet** (`oklab(1.000000 0.000000 0.000000)`): Raised panel/card/surface background.
- **Blueprint Overlay** (`oklab(0.940351 -0.008108 -0.017910)`): Cool inset background for media wells and grid placeholders.
- **Ink** (`oklab(0.252380 -0.009714 -0.034170)`): Body text.
- **Emphasis** (`oklab(0.218461 -0.012406 -0.039864)`) / **Subtle** (`oklab(0.436442 -0.012368 -0.044729)`) / **Muted** (`oklab(0.550853 -0.008208 -0.033125)`): The text-emphasis ramp; pick by importance, never drop body to low-contrast gray on the stock base.
- **Border** (`oklab(0.776085 -0.009713 -0.026566)`): The 1px line on every panel, control, and pill.
- **Highlight** (`oklab(0.902143 -0.011298 -0.030437)`): Selection/skeleton shimmer tint.

### Status
- **Error** (`oklab(0.499559 0.115162 0.066600)`) / **Warning** (`oklab(0.528919 0.016251 0.103026)`) / **Success** (`oklab(0.503030 -0.080259 0.021719)`): Semantic state only, paired with shape/label, never color-alone.

### Named Rules
**The One Action Rule.** Action Blue (`oklab(0.516800 -0.033898 -0.129915)`) is the action accent. It marks the single primary action in a view and nothing decorative. If two elements compete as primary action, one is wrong.

**The Stock-Is-Identity Rule.** The body background is cool drafting stock (`oklab(0.980696 -0.001930 -0.004746)`), a deliberate blue-white neutral — not warm cream and not flat SaaS white. Never rename it `--paper`/`--cream`/`--sand`; the cool stock tone carries the blueprint metaphor.

**The Ink-Not-Gray Rule.** Body text reaches for the ink end of the ramp. Light-gray "for elegance" on the cool stock is the contrast trap; when a value is close to 4.5:1, move toward Ink/Emphasis, not Muted.

## 3. Typography

**Heading Font:** Proza Libre (with system-ui, -apple-system, Segoe UI, sans-serif)
**Body Font:** Proza Libre (with system-ui, -apple-system, Segoe UI, sans-serif)
**Label/Mono Font:** Ioskeley Mono (with IBM Plex Mono, Consolas, monospace)

**Character:** One humanist sans (Proza Libre) carries headings, body, labels, and buttons — legible and workshop-manual direct. A distinctive monospace (Ioskeley Mono) carries everything technical, like dimensions stamped on a drawing. The contrast axis is sans-vs-mono, not two near-identical sans faces.

### Hierarchy
- **Heading** (Proza Libre, 600, ~1rem–1.18rem, line-height 1.3): Card titles, section and page headings. Fixed rem scale, tight ratio.
- **Body** (Proza Libre, 400, 16px, line-height 1.55): Paragraphs and descriptions; cap prose at 65–75ch.
- **Title (card)** (Proza Libre, 600, clamp(1rem, 1.8vw, 1.18rem)): The one tolerated small fluid step, for thing-card titles in a fluid grid.
- **Meta/Label** (Ioskeley Mono, ~0.72rem, letter-spacing 0.04–0.08em, often uppercase): Dimensions, file formats, DIDs/handles, counts, status pills, eyebrows/kickers.

### Named Rules
**The Mono-Is-Metadata Rule.** Monospace is reserved for technical metadata (measurements, formats, identifiers, counts, status). Prose and UI labels are never mono; metadata is never set in the body sans.

**The Fixed-Scale Rule.** Product headings use a fixed rem scale, not fluid `clamp()` — a heading that shrinks inside a panel looks worse, not designed. The card-title clamp is the only sanctioned exception.

**The One-Eyebrow Rule.** The uppercase tracked mono kicker (`.eyebrow`/`.product-kicker`) is part of the voice for *deliberate, occasional* use — never an eyebrow stacked above every section.

## 4. Elevation

Flat by default. Depth comes from crisp 1px borders and tonal layering (stock → sheet → overlay), not shadows. The only shadow in the system is a 1px hairline under panels that reads as a sheet lifting off the table, not a floating SaaS card.

### Shadow Vocabulary
- **Paper hairline** (`box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent)`): The single resting elevation on cards/panels. Borders do the structural work; this only seats the sheet.

### Overlay tokens
- Scheme-independent lighting overlays for the 3D viewer stage and SVG preview live as tokens (`--overlay-highlight-soft`, `--overlay-highlight`, `--overlay-shadow`). They are pure white/black at low alpha (highlight/shadow) and read correctly in both schemes; call sites use the token, never an inline `rgb(...)`.

### Named Rules
**The Border-Over-Shadow Rule.** Structure is drawn with 1px borders and background-tone steps, never with soft drop shadows. Never pair a 1px border with a wide (≥16px) soft shadow on the same element (the ghost-card tell).

## 5. Components

### Buttons
- **Shape:** Near-square (2px radius); base controls render at 0px corners. Never round to pill (except deliberate tags) or 12px+.
- **Default:** Sheet background, 1px border, ink text. Hover shifts border to blue and text to deep blueprint blue.
- **Primary:** Action Blue fill, stock-coloured text — the one action. Hover brightens slightly (`filter: brightness(1.04)`), no transform bounce.
- **Secondary / Ghost:** Blue border + deep-blue text (secondary); transparent background (ghost).

### Chips / Tabs / Status pills
- **Style:** 1px border, near-square, mono text, ~0.72rem. Transparent at rest.
- **State:** Active tab / selected pill take a blue border, deep-blue text, and an 8% blue wash. Muted and error variants recolor the border + text + faint wash to match the semantic role.
- **Pill radius:** `--radius-pill` (999px) is reserved for genuinely round badges — the circular part-index marker and deliberate tag chips — never for cards, inputs, or buttons.

### Cards / Containers
- **Corner Style:** 2px (panel radius).
- **Background:** Sheet (`oklab(1.000000 0.000000 0.000000)`) over the stock base.
- **Border:** 1px Border (`oklab(0.776085 -0.009713 -0.026566)`) — the defining line.
- **Shadow Strategy:** Paper hairline only (see Elevation).
- **Internal Padding:** ~1rem; metadata rows in mono, subordinate to title/creator.
- **Media:** Drafting-grid background (20px grid, grid-line color) for previews and placeholders — never a flat gray box; missing media draws nested registration rectangles, not fake content.

### Inputs / Fields
- **Style:** Stock-base fill, 1px border, 2px radius, body sans.
- **Focus:** Border shifts to blue with a 2px translucent blue outline (`outline: 2px solid color-mix(... primary 25% ...)`). Focus is always visible.
- **Error / Disabled:** Error recolors border+text to Error and adds a faint wash; disabled drops contrast and removes the pointer affordance.

### Navigation
- Product nav (wordmark, Browse, Search, Publish, session control), not demo/workflow copy. Standard top-bar pattern; active state uses the tab treatment. Reachable search globally.

### Signature: the blueprint preview / skeleton
The drafting-grid media well (`.blueprint-media`) and the shimmer skeletons (`.skeleton-*`, `blueprint-skeleton` keyframes) are the system's signature. Content loads through skeletons over a stable grid, never a centered spinner.

## 6. Do's and Don'ts

### Do:
- **Do** reuse the tokens in `assets/styling/theme.css` and the component vocabulary in `base.css`/`primitives.css`; extend, don't fork.
- **Do** set all technical metadata (dimensions, formats, DIDs/handles, counts, status) in Ioskeley Mono.
- **Do** keep body/placeholder contrast ≥ 4.5:1 in both schemes; move text toward Ink, not Muted, when close.
- **Do** ship every interactive state — default, hover, focus, active, disabled, loading, error — with visible keyboard focus.
- **Do** use drafting-grid placeholders and skeletons for loading/empty media; write empty states that teach (publish-your-first-thing).
- **Do** keep motion to 150–250ms, ease-out, for state/feedback/loading/viewer-readiness only, with a `prefers-reduced-motion` fallback.

### Don't:
- **Don't** swap the cool drafting-stock base for warm cream or a flat off-white, or rename it `--paper`/`--cream`/`--sand`.
- **Don't** round cards/inputs to 12px+ or reach for full pills outside tags; the near-square corner is the identity.
- **Don't** use more than one primary action per view, or use the action color for decoration.
- **Don't** use gradient text, glassmorphism-by-default, hero-metric templates, identical icon-card grids, or an uppercase eyebrow above every section.
- **Don't** pair a 1px border with a wide soft drop shadow (ghost-card), use `border-left` >1px as a colored stripe, or animate `<img>` on hover.
- **Don't** put a display font — or any non-mono face — in technical metadata, or drop body text to muted gray on the stock base.
- **Don't** land on generic flat-SaaS or generic dark-terminal looks; the answer to "what is this" is the blueprint identity.