design

User preferences and memory live in ~/Clawic/data/design/ (see setup.md on first use, memory-template.md for the file format). If you have data at an old location (~/design/ or ~/clawic/design/), move it to ~/Clawic/data/design/.

Configuration

User-dependent variables. Defaults apply until the user states a preference; store them in ~/Clawic/data/design/config.yaml.

Variable	Type	Default	Effect
type_scale_ratio	number (1.125-1.5)	1.25	Regenerates the size ladder in Core Rule 4 (1.25 → 16/20/25/31/39); 1.333 for editorial and marketing pages
base_unit	4 | 8 (px)	8	Every spacing value becomes a multiple of this; 4 for dense pro tools, 8 everywhere else
accessibility_target	AA | AAA	AA	AA floors are 4.5:1 body and 3:1 large text; AAA raises them to 7:1 and 4.5:1 across all checks
platform	web | ios | android | print	web	Switches units (px/pt/dp), touch-target minimums (44pt HIG / 48dp Material), and platform conventions in ui-screens.md and documents.md
brand_file	path	none	Palette, typefaces, and logo rules read from ~/Clawic/data/design/brand.md; overrides the derivation procedures in palettes.md and fonts.md

Preference areas to record as the user reveals them:

• output medium — HTML/CSS vs image render vs written spec; framework in use (Tailwind, vanilla CSS) — affects what the deliverable looks like
• aesthetic register — minimal, dense, editorial, playful — shifts spacing generosity, type choices, and decoration tolerance
• motion posture — full motion vs reduced by default — gates Core Rule 8 and all transition suggestions
• language and script — RTL layouts mirror scan order; CJK needs looser line-height and no italic emphasis — affects layout.md and fonts.md guidance
• critique style — ranked punch-list vs annotated walkthrough — affects how critique.md findings are delivered

When To Use

• Designing any visual artifact from scratch: UI screens, landing pages, slides, social graphics, posters, emails, PDFs.
• Fixing a design that "looks off" when the user cannot articulate why.
• Choosing typography, spacing, or a palette for a project that has no design system yet.
• Reviewing generated HTML/CSS or rendered images before delivery.
• Not for token pipelines and component libraries (design-system) or brand positioning (branding).

Quick Reference

Situation	Play
Design looks cluttered	Delete decoration first, then double the gap between groups; never add boxes to "organize" (→ critique.md)
"Looks off," cause unknown	Run gates in order: grayscale, squint, alignment count (→ Output Gates); full symptom chains in critique.md
Everything looks equally important	Rank all content 1-3; style only rank 1 as prominent, demote the rest to body style
Picking fonts	One family, weights 400/700; add a second family only to split display vs text roles (→ fonts.md)
Picking colors	60-30-10 split; one accent hue; neutrals tinted with 2-5% of the accent's saturation (→ palettes.md)
Text hard to read	Check measure 45-75ch, line-height 1.5, contrast 4.5:1 before blaming the typeface
Mobile layout	44pt/48dp touch targets, 16px minimum body (also prevents iOS input zoom), primary actions in bottom thumb zone
Slide deck	One idea per slide, 24pt text floor, max 6 lines of text per slide (→ slides.md)
Poster, thumbnail, social post	One-glance artifact: single message, readable at 10% zoom (→ graphics.md)
Form, table, or dashboard	Component-level rules in ui-screens.md
Chart or data display	Zero-baseline bars, direct labels, one hue for magnitude (→ data-viz.md)
HTML email	Tables and inline CSS, 600px body, Outlook renders with Word (→ email.md)
Dark mode requested	Not inversion: lighten surfaces to show elevation, desaturate accents 10-20%, white text at ~87% opacity (Material) (→ dark-mode.md)
Contrast, CVD, motion sensitivity	Floors and non-color encodings in accessibility.md
Print or PDF deliverable	300 DPI, bleed, CMYK, margins (→ documents.md)
Any other visual task	Apply Core Rules in order 1-7: hierarchy, then spacing, then type, then color

Depth on demand: critique.md symptom→cause when it looks off · layout.md grids, alignment, responsive · fonts.md choosing, pairing, setting type · palettes.md color without a system · ui-screens.md forms, tables, dashboards, states · landing-pages.md marketing pages and CTAs · slides.md decks · graphics.md posters, social, thumbnails · documents.md PDFs, reports, print · email.md HTML email · data-viz.md charts · dark-mode.md theming · accessibility.md contrast, CVD, motion, focus.

Core Rules

1. Hierarchy is a ranking, not a styling pass. Inventory every element, rank each 1-3 by user importance (1 = must see, 2 = supporting, 3 = metadata). Exactly one rank-1 per view. Check: a grayscale screenshot must reveal the ranking in 3 seconds.
2. Spend one channel per level step. Adjacent hierarchy levels differ by one full step in ONE channel: size x1.25, weight +300 (400 to 700), or a clear lightness jump. Three small tweaks read as noise. Example: 18px/600 next to 16px/400 body is two half-steps and ranks poorly; use 20px/400 or 16px/700 instead.
3. Spacing: base 8, factor 2 between grouping levels. Scale 4/8/16/24/32/48/64 (multiples of base_unit). Between-group gap >= 2x within-group gap: 8px label-to-field, 24px field-to-field, 48px section-to-section. Proximity groups content more cheaply than any border or background box.
4. Type floors: 16px body, 1.5 line-height, 45-75ch measure. Bringhurst's 66ch is the target; under 45ch the eye jumps lines, over 75ch it loses the return sweep. Headings tighten to 1.1-1.3. Ratio type_scale_ratio = 1.25 gives 16/20/25/31/39 and covers most product work; 1.333 for editorial and marketing pages.
5. Color: 60-30-10 with contrast floors. ~60% neutral surface, ~30% secondary, ~10% accent, and the accent marks interactive or state-bearing elements only. WCAG floors: 4.5:1 body text, 3:1 large text (24px+, or 19px bold) and UI component boundaries. Never #000 on #FFF; near-black (#111 to #1a1a1a) cuts edge vibration.
6. Every edge answers to a line. Target <= 3 distinct vertical alignment lines per view; each extra line adds perceived clutter. Center only display text of 1-3 lines; left-align everything longer, because ragged-right gives the eye a fixed return point.
7. Design in grayscale first. Layout, hierarchy, and spacing must work with zero color. Add color last to encode meaning (state, action, brand); color used to rescue hierarchy fails for the ~8% of men with color vision deficiency and fails the grayscale gate.
8. Motion: 150-300ms for UI transitions. Ease-out on entry, ease-in on exit. Over 400ms reads as lag; under 100ms reads as a glitch. Animate only transform and opacity for smooth playback; honor reduced-motion preferences (accessibility.md).

Hierarchy Procedure

1. Content inventory before any styling: list every element the view must contain, including legal text and empty states.
2. Rank each element 1-3. If two elements demand rank 1, split the view or demote one by position (top-left beats bottom-right in LTR scan order).
3. Assign styles top-down from the type scale. Demote rank 3 by lightness (40-60% gray on white), not by shrinking below 13px, where legibility collapses.
4. Place rank 1 in the natural entry point: top-left for documents, visual center for posters and slides.
5. Verify with the Output Gates before delivering.

Spacing and Layout

• Macro before micro: set page margins and section gaps before touching padding inside components.
• Text content containers: 560-600px max width (keeps measure at 70-75ch at 16px, inside the 45-75ch range). Dashboards run full-width with 24px outer margins.
• Space belongs to what it labels: a heading sits closer to the text below it than to the section above (e.g. 8px below, 32px above). Equal gaps destroy grouping.
• Optical beats mathematical: icons, triangles, and play buttons need a 1-3px shift toward their visual weight to look centered. Grid math and column layouts: layout.md.
• Whitespace is the grouping mechanism. Filling "empty" corners with decoration deletes the structure the space was providing.

Type and Color Execution

• Pair typefaces by role contrast (display serif + text sans), never by similarity; two near-identical sans faces read as a rendering mistake. Selection tables and loading: fonts.md.
• Skip adjacent weights: 400 vs 500 is indistinguishable at body sizes. Use 400/600 or 400/700.
• ALL CAPS only for labels of 1-2 words, with +5-10% letterspacing. Never track lowercase body text; it breaks the word shapes readers scan by.
• Palette derivation: pick the accent hue, build a 9-step lightness ramp from it, then tint neutrals with 2-5% of the accent's saturation. Pure grays next to a saturated accent look dirty. Full procedure: palettes.md.
• Semantic color is reserved: red for destructive and error, green for success. A red brand needs error states distinguished by a different shade plus an icon, never by hue alone.
• One radius scale per artifact (e.g. 4/8/16). Mixed radii on sibling elements is the fastest tell of unreviewed generated UI.

Output Gates

Run before delivering any visual artifact:

• Grayscale test: desaturated, is the 1-3 ranking still obvious in 3 seconds?
• Squint test: blurred, do exactly the title and the primary action pop?
• Alignment count: <= 3 vertical alignment lines, and every element sits on one?
• Spacing audit: every gap a multiple of the base unit, between-group >= 2x within-group?
• Contrast check: every text/background pair meets its floor (4.5:1 body, 3:1 large/UI)?
• Single rank-1: exactly one primary action or focal point per view?

Traps

Trap	Why it fails	Do instead
Boxes and borders to separate content	Each border is added noise; proximity groups for free	Remove the box, double the between-group gap
Shrinking text to fit the space	Below 13px legibility collapses; the content problem remains	Cut content, paginate, or widen the container
Centering long text	No fixed return point for the eye, each line restart costs a search	Left-align; center only 1-3 line display text
Emphasizing with bold + bigger + colored at once	Burns all channels on one level; nothing is left to mark the true top rank	One channel per level step (→ Core Rule 2)
Color as the only state signal	Fails grayscale, print, and ~8% of male users	Encode with icon, weight, or position first; color reinforces
Pure gray neutrals beside a saturated accent	Grays pick up a dirty, mismatched cast by contrast	Tint neutrals with 2-5% of the accent hue
Filling every empty area	Whitespace was doing the grouping; filling it flattens hierarchy	Leave it; if it feels empty, the content ranking is wrong, not the space
Restyling before ranking	Polishing elements in place cements a flat hierarchy	Content inventory and 1-3 ranking first (→ Hierarchy Procedure)
Designing only the happy state	Empty, loading, error, and overflow states ship broken	Design the four non-happy states before polishing the happy one (ui-screens.md)
Checking one theme only	A palette tuned in light mode breaks contrast in dark	Run the Output Gates once per theme (dark-mode.md)

Where Experts Disagree

• Pure black (#000) dark backgrounds. OLED-first designers use #000 for power and contrast; Material argues #121212 reduces halation and lets shadows exist. Default #121212; go #000 only when the artifact targets OLED media consumption (video, photo feeds).
• Grid math vs optical judgment. Systematists snap everything to the 8px grid; typographers override math wherever the eye disagrees (icon centering, display-type spacing). Default: grid for layout, optical corrections allowed at component level — never the reverse.
• System fonts vs webfonts. System stacks cost zero load time and feel native; a webfont earns its bytes only when type IS the brand voice (marketing, editorial). Product UI defaults to a system stack or one variable font.
• Minimal vs dense. Consumer surfaces reward whitespace; daily-use pro tools reward density (more data per scroll, base_unit 4). The boundary is usage frequency, not taste: daily expert use → dense wins.

Related Skills

More Clawic skills, get them at https://clawic.com/skills/design (install if the user confirms):

• ui — interface component patterns, interaction states, platform conventions
• typography — deep type work: optical sizes, variable weight axes, print settings
• color — full color systems, tokens, and cross-surface color validation
• design-system — scaling one-off decisions into tokens and component libraries
• accessibility-audit — full WCAG audit with screen-reader passes and remediation report

Feedback

• If useful, star it: https://clawic.com/skills/design
• Latest version: https://clawic.com/skills/design

Part of Clawic, the verified skill library. Get this skill: https://clawic.com/skills/design.