Design

Executes and critiques visual design with quantified rules for hierarchy, spacing, type scale, color, and layout. Use when designing UI screens, landing pages, slides, posters, social graphics, emails, charts, or PDFs, when a design looks off, cluttered, amateur, or flat and the user cannot say why, when nothing stands out or text is hard to read, when choosing fonts, pairing typefaces, or building a palette without a design system, when adapting a screen to dark mode or mobile, or when reviewing generated HTML/CSS before delivery. Not for design tokens and component libraries (design-system) or brand strategy (branding).

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.