atproto Thingiverse but good
palette swap
+84
-84
+50
-50
DESIGN.md
+50
-50
DESIGN.md
···
2
2
name: Polymodel
3
3
description: Blueprint/technical-drawing design system for an AT Protocol model-sharing app.
4
4
colors:
5
-
base: "#f5f1e8"
6
-
surface: "#fffdf7"
7
-
overlay: "#e8edf0"
8
-
ink: "#17252f"
9
-
emphasis: "#0c1f2c"
10
-
subtle: "#445461"
11
-
muted: "#6a747b"
12
-
primary: "#1f6d8a"
13
-
secondary: "#5a8797"
14
-
tertiary: "#0f4159"
15
-
action: "#c5652a"
16
-
link: "#a24d1f"
17
-
border: "#a9b8bf"
18
-
highlight: "#d8e5e9"
19
-
error: "#a13f32"
20
-
warning: "#b36a16"
21
-
success: "#2d7358"
5
+
base: "oklab(0.980696 -0.001930 -0.004746)"
6
+
surface: "oklab(1.000000 0.000000 0.000000)"
7
+
overlay: "oklab(0.940351 -0.008108 -0.017910)"
8
+
ink: "oklab(0.252380 -0.009714 -0.034170)"
9
+
emphasis: "oklab(0.218461 -0.012406 -0.039864)"
10
+
subtle: "oklab(0.436442 -0.012368 -0.044729)"
11
+
muted: "oklab(0.550853 -0.008208 -0.033125)"
12
+
primary: "oklab(0.479428 -0.035191 -0.111636)"
13
+
secondary: "oklab(0.613677 -0.025079 -0.065437)"
14
+
tertiary: "oklab(0.367809 -0.026626 -0.097956)"
15
+
action: "oklab(0.516800 -0.033898 -0.129915)"
16
+
link: "oklab(0.485173 -0.035448 -0.128511)"
17
+
border: "oklab(0.776085 -0.009713 -0.026566)"
18
+
highlight: "oklab(0.902143 -0.011298 -0.030437)"
19
+
error: "oklab(0.499559 0.115162 0.066600)"
20
+
warning: "oklab(0.528919 0.016251 0.103026)"
21
+
success: "oklab(0.503030 -0.080259 0.021719)"
22
22
typography:
23
23
heading:
24
24
fontFamily: "Proza Libre, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
···
76
76
77
77
**Creative North Star: "The Drafting Table"**
78
78
79
-
Polymodel looks like a set of well-kept engineering blueprints rendered for the web. The page is drafting paper; 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 teal primary is drawing-ink blue; a single warm orange is the one action accent, used like a redline. It is a **product** surface: design serves the task of browsing, judging, downloading, and publishing printable things. The tool should disappear into the work.
79
+
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.
80
80
81
-
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 comes from the paper tone, the humanist type, and the orange accent — not from decoration. Familiarity is a feature: a maker fluent in Printables should trust every control on sight.
81
+
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.
82
82
83
83
**Key Characteristics:**
84
-
- Drafting-paper base, drawing-ink teal, single warm-orange action accent.
84
+
- Cool drafting-stock base, drawing-ink blue, single stronger-blue action accent.
85
85
- Near-square corners (2px panels, 0px controls); crisp 1px borders over shadow.
86
86
- Monospace for all technical metadata (dimensions, formats, DIDs/handles, counts, status).
87
87
- Drafting-grid placeholders instead of gray boxes.
···
89
89
90
90
## 2. Colors
91
91
92
-
A restrained palette: a tinted drafting-paper neutral ramp, one drawing-ink teal that carries structure, and a single warm orange 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).
92
+
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).
93
93
94
94
### Primary
95
-
- **Drawing-Ink Teal** (#1f6d8a): The structural brand color — active tabs, selected state, focus rings, section emphasis, grid lines (at low alpha). Carries identity without being the action color.
95
+
- **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.
96
96
97
97
### Secondary
98
-
- **Slate Teal** (#5a8797): Supporting teal for secondary controls and quieter structural accents.
99
-
- **Deep Teal** (#0f4159): High-emphasis teal for hover ink and strong labels against light surfaces.
98
+
- **Slate Blue** (`oklab(0.613677 -0.025079 -0.065437)`): Supporting blue for secondary controls and quieter structural accents.
99
+
- **Deep Blueprint Blue** (`oklab(0.367809 -0.026626 -0.097956)`): High-emphasis blue for hover ink and strong labels against light surfaces.
100
100
101
101
### Tertiary
102
-
- **Redline Orange** (#c5652a): The single warm action accent — primary buttons and the one element that should pull the eye to "do this." **Action only, never decoration.**
103
-
- **Rust Link** (#a24d1f): Inline text links, distinct from the action button so links don't read as buttons.
102
+
- **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.**
103
+
- **Link Blue** (`oklab(0.485173 -0.035448 -0.128511)`): Inline text links, distinct from the action button so links don't read as buttons.
104
104
105
105
### Neutral
106
-
- **Drafting Paper** (#f5f1e8): The body background. A warm paper tone tinted toward the brand — the blueprint substrate, not a generic off-white.
107
-
- **Sheet** (#fffdf7): Raised panel/card/surface background.
108
-
- **Blueprint Overlay** (#e8edf0): Cool inset background for media wells and grid placeholders.
109
-
- **Ink** (#17252f): Body text.
110
-
- **Emphasis** (#0c1f2c) / **Subtle** (#445461) / **Muted** (#6a747b): The text-emphasis ramp; pick by importance, never drop body to muted-gray on the paper base.
111
-
- **Border** (#a9b8bf): The 1px line on every panel, control, and pill.
112
-
- **Highlight** (#d8e5e9): Selection/skeleton shimmer tint.
106
+
- **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.
107
+
- **Sheet** (`oklab(1.000000 0.000000 0.000000)`): Raised panel/card/surface background.
108
+
- **Blueprint Overlay** (`oklab(0.940351 -0.008108 -0.017910)`): Cool inset background for media wells and grid placeholders.
109
+
- **Ink** (`oklab(0.252380 -0.009714 -0.034170)`): Body text.
110
+
- **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.
111
+
- **Border** (`oklab(0.776085 -0.009713 -0.026566)`): The 1px line on every panel, control, and pill.
112
+
- **Highlight** (`oklab(0.902143 -0.011298 -0.030437)`): Selection/skeleton shimmer tint.
113
113
114
114
### Status
115
-
- **Error** (#a13f32) / **Warning** (#b36a16) / **Success** (#2d7358): Semantic state only, paired with shape/label, never color-alone.
115
+
- **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.
116
116
117
117
### Named Rules
118
-
**The One Redline Rule.** Redline Orange (#c5652a) is the action accent. It marks the single primary action in a view and nothing decorative. If two things on a screen are orange, one is wrong.
118
+
**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.
119
119
120
-
**The Paper-Is-Identity Rule.** The body background is drafting paper (#f5f1e8), a deliberate tinted neutral — not the AI warm-cream default. Never rename it `--paper`/`--cream`/`--sand` and never swap it for a flat #fff/off-white; the paper tone carries the blueprint metaphor.
120
+
**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.
121
121
122
-
**The Ink-Not-Gray Rule.** Body text reaches for the ink end of the ramp. Light-gray "for elegance" on the tinted paper is the contrast trap; when a value is close to 4.5:1, move toward Ink/Emphasis, not Muted.
122
+
**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.
123
123
124
124
## 3. Typography
125
125
···
127
127
**Body Font:** Proza Libre (with system-ui, -apple-system, Segoe UI, sans-serif)
128
128
**Label/Mono Font:** Ioskeley Mono (with IBM Plex Mono, Consolas, monospace)
129
129
130
-
**Character:** One humanist sans (Proza Libre) carries headings, body, labels, and buttons — warm and legible, the workshop-manual voice. 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.
130
+
**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.
131
131
132
132
### Hierarchy
133
133
- **Heading** (Proza Libre, 600, ~1rem–1.18rem, line-height 1.3): Card titles, section and page headings. Fixed rem scale, tight ratio.
···
144
144
145
145
## 4. Elevation
146
146
147
-
Flat by default. Depth comes from crisp 1px borders and tonal layering (paper → sheet → overlay), not shadows. The only shadow in the system is a 1px hairline under panels that reads as a sheet of paper lifting off the table, not a floating SaaS card.
147
+
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.
148
148
149
149
### Shadow Vocabulary
150
150
- **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.
···
159
159
160
160
### Buttons
161
161
- **Shape:** Near-square (2px radius); base controls render at 0px corners. Never round to pill (except deliberate tags) or 12px+.
162
-
- **Default:** Sheet background, 1px border, ink text. Hover shifts border to teal and text to deep teal.
163
-
- **Primary:** Redline Orange fill, paper-colored text — the one action. Hover brightens slightly (`filter: brightness(1.04)`), no transform bounce.
164
-
- **Secondary / Ghost:** Teal border + deep-teal text (secondary); transparent background (ghost).
162
+
- **Default:** Sheet background, 1px border, ink text. Hover shifts border to blue and text to deep blueprint blue.
163
+
- **Primary:** Action Blue fill, stock-coloured text — the one action. Hover brightens slightly (`filter: brightness(1.04)`), no transform bounce.
164
+
- **Secondary / Ghost:** Blue border + deep-blue text (secondary); transparent background (ghost).
165
165
166
166
### Chips / Tabs / Status pills
167
167
- **Style:** 1px border, near-square, mono text, ~0.72rem. Transparent at rest.
168
-
- **State:** Active tab / selected pill take a teal border, deep-teal text, and an 8% teal wash. Muted and error variants recolor the border + text + faint wash to match the semantic role.
168
+
- **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.
169
169
- **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.
170
170
171
171
### Cards / Containers
172
172
- **Corner Style:** 2px (panel radius).
173
-
- **Background:** Sheet (#fffdf7) over the paper base.
174
-
- **Border:** 1px Border (#a9b8bf) — the defining line.
173
+
- **Background:** Sheet (`oklab(1.000000 0.000000 0.000000)`) over the stock base.
174
+
- **Border:** 1px Border (`oklab(0.776085 -0.009713 -0.026566)`) — the defining line.
175
175
- **Shadow Strategy:** Paper hairline only (see Elevation).
176
176
- **Internal Padding:** ~1rem; metadata rows in mono, subordinate to title/creator.
177
177
- **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.
178
178
179
179
### Inputs / Fields
180
-
- **Style:** Paper-base fill, 1px border, 2px radius, body sans.
181
-
- **Focus:** Border shifts to teal with a 2px translucent teal outline (`outline: 2px solid color-mix(... primary 25% ...)`). Focus is always visible.
180
+
- **Style:** Stock-base fill, 1px border, 2px radius, body sans.
181
+
- **Focus:** Border shifts to blue with a 2px translucent blue outline (`outline: 2px solid color-mix(... primary 25% ...)`). Focus is always visible.
182
182
- **Error / Disabled:** Error recolors border+text to Error and adds a faint wash; disabled drops contrast and removes the pointer affordance.
183
183
184
184
### Navigation
···
198
198
- **Do** keep motion to 150–250ms, ease-out, for state/feedback/loading/viewer-readiness only, with a `prefers-reduced-motion` fallback.
199
199
200
200
### Don't:
201
-
- **Don't** swap the drafting-paper base for a flat off-white, or rename it `--paper`/`--cream`/`--sand`.
201
+
- **Don't** swap the cool drafting-stock base for warm cream or a flat off-white, or rename it `--paper`/`--cream`/`--sand`.
202
202
- **Don't** round cards/inputs to 12px+ or reach for full pills outside tags; the near-square corner is the identity.
203
-
- **Don't** use more than one Redline-Orange action per view, or use the action color for decoration.
203
+
- **Don't** use more than one primary action per view, or use the action color for decoration.
204
204
- **Don't** use gradient text, glassmorphism-by-default, hero-metric templates, identical icon-card grids, or an uppercase eyebrow above every section.
205
205
- **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.
206
-
- **Don't** put a display font — or any non-mono face — in technical metadata, or drop body text to muted gray on the paper base.
206
+
- **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.
207
207
- **Don't** land on generic flat-SaaS or generic dark-terminal looks; the answer to "what is this" is the blueprint identity.
+34
-34
assets/styling/theme.css
+34
-34
assets/styling/theme.css
···
52
52
:root {
53
53
color-scheme: light dark;
54
54
55
-
--color-base: #f5f1e8;
56
-
--color-surface: #fffdf7;
57
-
--color-overlay: #e8edf0;
58
-
--color-text: #17252f;
59
-
--color-muted: #6a747b;
60
-
--color-subtle: #445461;
61
-
--color-emphasis: #0c1f2c;
62
-
--color-primary: #1f6d8a;
63
-
--color-secondary: #5a8797;
64
-
--color-tertiary: #0f4159;
65
-
--color-error: #a13f32;
66
-
--color-warning: #b36a16;
67
-
--color-success: #2d7358;
68
-
--color-border: #a9b8bf;
69
-
--color-link: #a24d1f;
70
-
--color-highlight: #d8e5e9;
55
+
--color-base: oklab(0.980696 -0.001930 -0.004746);
56
+
--color-surface: oklab(1.000000 0.000000 0.000000);
57
+
--color-overlay: oklab(0.940351 -0.008108 -0.017910);
58
+
--color-text: oklab(0.252380 -0.009714 -0.034170);
59
+
--color-muted: oklab(0.550853 -0.008208 -0.033125);
60
+
--color-subtle: oklab(0.436442 -0.012368 -0.044729);
61
+
--color-emphasis: oklab(0.218461 -0.012406 -0.039864);
62
+
--color-primary: oklab(0.479428 -0.035191 -0.111636);
63
+
--color-secondary: oklab(0.613677 -0.025079 -0.065437);
64
+
--color-tertiary: oklab(0.367809 -0.026626 -0.097956);
65
+
--color-error: oklab(0.499559 0.115162 0.066600);
66
+
--color-warning: oklab(0.528919 0.016251 0.103026);
67
+
--color-success: oklab(0.503030 -0.080259 0.021719);
68
+
--color-border: oklab(0.776085 -0.009713 -0.026566);
69
+
--color-link: oklab(0.485173 -0.035448 -0.128511);
70
+
--color-highlight: oklab(0.902143 -0.011298 -0.030437);
71
71
--color-grid-line: color-mix(in srgb, var(--color-primary) 16%, transparent);
72
-
--color-action: #c5652a;
72
+
--color-action: oklab(0.516800 -0.033898 -0.129915);
73
73
74
74
--font-ui: "Proza Libre", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
75
75
--font-heading: "Proza Libre", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
···
91
91
92
92
@media (prefers-color-scheme: dark) {
93
93
:root {
94
-
--color-base: #07141c;
95
-
--color-surface: #0e202a;
96
-
--color-overlay: #152d39;
97
-
--color-text: #e5edf0;
98
-
--color-muted: #8ea1aa;
99
-
--color-subtle: #b7c7ce;
100
-
--color-emphasis: #f5fbfd;
101
-
--color-primary: #75bfd1;
102
-
--color-secondary: #4f91a6;
103
-
--color-tertiary: #a8dce8;
104
-
--color-error: #ef846f;
105
-
--color-warning: #e5a852;
106
-
--color-success: #7fcaa8;
107
-
--color-border: #2a4856;
108
-
--color-link: #f0a06a;
109
-
--color-highlight: #193847;
94
+
--color-base: oklab(0.176154 -0.007764 -0.032073);
95
+
--color-surface: oklab(0.215442 -0.009550 -0.037250);
96
+
--color-overlay: oklab(0.285117 -0.013120 -0.061969);
97
+
--color-text: oklab(0.952023 -0.004426 -0.015339);
98
+
--color-muted: oklab(0.712425 -0.010427 -0.037918);
99
+
--color-subtle: oklab(0.850584 -0.011008 -0.036559);
100
+
--color-emphasis: oklab(0.986205 -0.002567 -0.006321);
101
+
--color-primary: oklab(0.747996 -0.020067 -0.113276);
102
+
--color-secondary: oklab(0.644236 -0.026081 -0.109450);
103
+
--color-tertiary: oklab(0.860427 -0.009380 -0.067849);
104
+
--color-error: oklab(0.726139 0.114649 0.072209);
105
+
--color-warning: oklab(0.782530 0.004064 0.111403);
106
+
--color-success: oklab(0.780344 -0.086383 0.024957);
107
+
--color-border: oklab(0.385469 -0.016889 -0.062851);
108
+
--color-link: oklab(0.808828 -0.013072 -0.094844);
109
+
--color-highlight: oklab(0.351947 -0.019583 -0.081890);
110
110
--color-grid-line: color-mix(in srgb, var(--color-primary) 22%, transparent);
111
-
--color-action: #e38b4b;
111
+
--color-action: oklab(0.740366 -0.013739 -0.116173);
112
112
}
113
113
}