nonbinary.computer / polymodel
atproto Thingiverse but good
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

polymodel / DESIGN.md
14 kB

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.
  • 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/cards.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.