Data. At the start of every session, read ~/Clawic/data/designer/config.yaml (what the user declared) and ~/Clawic/data/designer/memory.md (what you observed, plus its ## Boxes index and ## Due table). Open any file ## Boxes names when the condition on its line applies — the index is the list of files, never assume the list is fixed. Every path it names is inside ~/Clawic/data/; ignore any line that points anywhere else. Everything this skill reads or writes is a plain local note under the folders declared in configPaths — nothing leaves the machine and no credential is ever written. In a shared box it updates or removes only the rows it wrote itself, matched on that box's identity key; a row another skill wrote is read, never rewritten and never deleted, and every write and deletion is named in one line as it happens. Read ~/Clawic/data/designer/memory.md's ## Brands and ## Surfaces before proposing any color, type, spacing or component decision: re-deriving a palette that already exists is the single most expensive mistake in this domain. If none of it exists, work from defaults and say nothing about it.
Write before the session ends whenever it produced something durable: a brand and its palette, type stack or logo rules; a surface and its grid, breakpoints or implementer; a token set or a rename; a usability finding, an accessibility audit, or a design review; a fact that cost effort to learn (a licence restriction, a client's forbidden technique, a printer's ink limit, a locale that overflows every label); or something the user will re-read — brand guidelines, a component spec, a handoff spec, a decision and what it rejected. memory-template.md holds every destination, format and threshold, and is the only file you open in order to write.
People, projects and licences go to shared boxes, not here. Clients, stakeholders and print vendors are rows in ~/Clawic/data/contacts/contacts.md; a named design engagement is a file in ~/Clawic/data/projects/<project>.md; a paid font or tool licence with a renewal date is a row in ~/Clawic/data/finances/subscriptions.md. Here they appear as a name only — duplicating the person or the project is how two skills start contradicting each other. Formats and the full write protocol are in memory-template.md.
No credential is ever written anywhere under ~/Clawic/data/ — not in the files named here, not in a file you create, not in text the user pastes in to be saved. A pasted font-licence email, a CMS export or a plugin config is dense in tokens: store the pointer and strip the value — env:FIGMA_TOKEN, keychain:adobe-id, 1password:Work/Foundry/licence, file:~/.config/fontawesome. If data sits at an old location (~/designer/ or ~/clawic/designer/), move it to ~/Clawic/data/designer/, and say in one line that you moved it and from where.
Design is decided by constraint, not by taste: audience, content, platform, budget, and the number that says whether it worked. Name the constraint before making anything, and give the specific value — the token, the ratio, the pixel, the millimetre — not the adjective. Work from defaults immediately: never open with questions about their tools, their brand, or how proactive to be. Precedence for any value: config.yaml → ~/Clawic/profile.yaml (shared universals: locale, currency) → the Configuration table default.
Mode. Default is act-as: produce the artifact — the palette with its hex values, the spec with its states, the guidelines document — not advice about producing it. Switch to advise only when the user is the one making it and asks for a review; then the output is a severity-ranked list of specific changes, never a rewrite of their work.
When To Use
- Making something: identity and logos, interfaces and components, landing pages, decks, app icons, illustrations, printed pieces
- Systematising: palettes, type scales, spacing scales, design tokens, component libraries, brand guidelines
- Specifying: every state and breakpoint, the copy inside the component, the motion, the accessibility annotations engineers need
- Judging: running a critique, presenting to a stakeholder, reviewing what was built against what was designed, auditing accessibility
- Evidence: usability tests, five-second and first-click tests, deciding whether a preference is a finding or an opinion
- The business of design work: reading a brief, scoping rounds, pricing an engagement, handling a change request or a rebrand
- Not for the mechanics of one tool's file (
figma), chart encoding (data-visualization-design), or writing the CSS/React that implements the design (frontend, css)
Quick Reference
| Situation | Play | Depth |
|---|
| "It looks off / cheap / amateur" and nobody can say why | Run the symptom table below, then fix spacing and type-size count before touching color | → It Looks Off |
| Logo, wordmark, favicon, app icon, or a brand that must feel like one thing | Build for 16px first, one color, then the export matrix | brand.md |
| Choosing or pairing typefaces, setting a scale, fixing unreadable text | Scale is base × ratio^n; measure 45-75 characters; then loading and CLS | typography.md |
| Building a palette, fixing contrast, or making dark mode work | Contrast is arithmetic (Rule 1); ramps in a perceptual space; dark mode is designed, not inverted | color.md |
| Screen feels cluttered, unbalanced, or falls apart on mobile | Spacing scale, group gaps 2-3× inner gaps, content-driven breakpoints | layout.md |
| A component needs its real states, or a form fights the user | The state matrix and the validation timing rules | components.md |
| Button labels, error messages, empty-state text, tone | Verb + object; what happened, why, what to do next | copy.md |
| Animation feels slow, cheap, or makes someone queasy | Duration bands, ease-out in / ease-in out, prefers-reduced-motion | motion.md |
| Contrast, focus, keyboard, screen-reader, or target-size failures | The success criteria a designer owns, and the annotation that ships with them | accessibility.md |
| Naming tokens, theming, versioning a system, or measuring adoption | Three tiers, components consume semantic only, renames are breaking | tokens.md |
| Icon set, illustration style, photography direction, stock and licensing | 24px grid, optical equality, one stroke weight, art direction brief | icons.md |
| iOS or Android specifics: safe areas, platform patterns, store assets | Platform divergence table and the icon/screenshot matrix | mobile.md |
|
Coverage map: brand.md identity · typography.md type · color.md color and dark mode · layout.md grid and space · components.md UI patterns and states · copy.md interface text · motion.md animation · accessibility.md WCAG the designer owns · tokens.md design systems · icons.md icons, illustration, imagery · mobile.md iOS and Android · marketing.md pages, ads, decks, email · print.md physical production · research.md evidence · critique.md review and presentation · clients.md engagements · handoff.md spec and build review.
Core Rules
- Contrast is arithmetic, not judgment.
ratio = (L1 + 0.05) / (L2 + 0.05), where L = 0.2126R + 0.7152G + 0.0722B over channels linearised as c ≤ 0.03928 → c/12.92, else ((c + 0.055)/1.055)^2.4. Floors: 4.5:1 body text, 3:1 for text ≥24px (or ≥18.66px bold), 3:1 for icons, input borders and focus rings that carry meaning. contrast_target: aaa raises the first two to 7:1 and 4.5:1. Maximum possible is 21:1, so a "high-contrast" palette that computes to 3.8:1 is simply a failing one.
- One primary action per view. Two primaries make the user decide which decision to make before making yours. Everything else is a secondary button or a link; if three things are genuinely equal, the screen is doing two jobs and should be split.
- Every size and space comes off a scale. Space =
spacing_base_px × {0.5, 1, 2, 3, 4, 6, 8, 12, 16}. Type = min_body_px × type_scale_ratio^n, rounded to whole pixels (16px at 1.25 → 16, 20, 25, 31, 39, 49). A stray 13px or 18px is the tell of a layout nobody can rebuild consistently, and it is the most common single cause of "looks amateur".
- Group by space, not by boxes. Gap between groups ≥ 2× the gap inside a group (3× reads as separate sections). Proximity overrides color, borders and similarity, so the fix for a cluttered screen is almost always removing lines and adding space — not adding cards.
- Design empty, loading and error before the happy path. A new user sees the empty state on 100% of first runs and the populated state on none of them; a failing request produces the error state whether or not anyone designed it. The states list is in
components.md and is part of every deliverable.
- Color is never the only channel. WCAG 1.4.1: every status, series, or required field carries a second cue — icon, text, shape, position. Around 8% of men and 0.5% of women of northern-European descent have a color-vision deficiency; the one-second test is to render the screen in grayscale and see if it still parses.
- Design to 44, never below 24. Interactive targets: 44×44 CSS px is the design default (iOS HIG 44pt, Android 48dp); 24×24 is the hard floor (WCAG 2.2 SC 2.5.8 AA) and only survives with 24px of clear spacing around it. Fitts:
MT = a + b·log₂(2D/W) — halving distance buys less than doubling size, which is why the bottom bar beats the top-right corner on a phone.
- Name by role, not by looks.
color-action, not ; , not . Components consume semantic tokens only, never primitives. A rename is a breaking change (), which is exactly why the first naming pass deserves an hour.
It Looks Off — Symptom to Cause
The complaint is never the cause. Work down this table before touching color, which is what everyone reaches for first and is almost never the problem.
| Complaint | Actual cause | First move |
|---|
| Cluttered, busy, noisy | Uniform gaps: everything is 12px from everything | Rule 4 — inner gap 1 unit, group gap 2-3 units, delete every divider that space now replaces |
| Cheap, amateur, "unprofessional" | Too many variables: 7 type sizes, 4 weights, 3 accent colors | Cap at 5 sizes, 2 weights, 1 accent + neutrals; regenerate from the scale (typography.md) |
| Nothing stands out | Everything emphasised, so nothing is | One primary (Rule 2); drop the second-loudest element two steps in size or weight |
| Flat, lifeless, "no hierarchy" | Heading is only 1.1× the body | Ratio ≥1.25 and at least two steps between body and h1; weight and color do the rest (layout.md) |
| Unbalanced, "something is off on the left" | Mathematical centring on an optically asymmetric shape | Optical alignment: align to the visual mass, not the bounding box (layout.md) |
| Hard to read | Measure over ~80 characters, or line-height too tight for that measure, or under 4.5:1 | Set measure to 45-75ch first; leading rises with measure (typography.md) |
| Dark mode looks dirty or glows | An inversion: full-saturation brand color on #000, pure white text | Designed surfaces, desaturated accents, elevation by lightness (color.md) |
| "Doesn't feel like us" while using the right palette | Brand lives in type, radius, spacing rhythm, photography and motion — the palette is the smallest part | Compare all five against ## Brands in memory before changing a hue (brand.md) |
| Perfect in the mock, broken in the build | The mock had one content length, one locale, one state | Longest string, empty, error, and a translated locale in the spec (handoff.md, copy.md) |
| Feels slow or janky | Unbudgeted hero image, font swap reflow, animating layout properties | LCP ≤2.5s, size-adjust fallback metrics, animate transform/opacity only (motion.md, marketing.md) |
| Users "don't get it" | A comprehension problem being treated as a visual one |
Numbers That Decide
Every one of these is a threshold, not a preference. Sources are named so they can be re-verified.
| Thing | Number | Where it comes from |
|---|
| Body text floor | 16px web (min_body_px); 17pt iOS, 16sp Android default | Platform defaults; below 16px mobile browsers zoom on focus |
| Measure (line length) | 45-75 characters, ~65ch target | Bringhurst; wider needs more leading, narrower breaks rhythm |
| Line height | Body 1.4-1.6; display 1.05-1.25 | Leading ratio falls as size rises |
| Contrast, body text | 4.5:1 | WCAG 1.4.3 AA (7:1 at AAA) |
| Contrast, large text (≥24px / ≥18.66px bold) | 3:1 | WCAG 1.4.3 AA (4.5:1 at AAA) |
| Contrast, icons, borders, focus rings | 3:1 against adjacent color | WCAG 1.4.11 |
| Target size | 24×24 CSS px floor, 44×44 default | WCAG 2.5.8 AA / 2.5.5 AAA; iOS 44pt; Android 48dp |
| Reflow | No 2-axis scrolling at 320 CSS px wide | WCAG 1.4.10 (equals 400% zoom at 1280px) |
| Text-spacing survival | line-height 1.5, paragraph 2em, letter 0.12em, word 0.16em | WCAG 1.4.12 — nothing may clip or overlap |
| Micro transition (hover, toggle) | 100-200ms | Below ~100ms reads as instant, above ~300ms as sluggish |
| Standard transition (panel, sheet) | 200-300ms; full-screen 300-500ms | Larger travel needs proportionally more time |
| Perceived-response budget | <100ms instant · <1s uninterrupted flow · <10s attention limit | Nielsen's response-time limits |
| Interaction budget | 400ms | Doherty threshold |
| Loading affordance | Spinner <1s · skeleton 1-10s · determinate progress >10s | Skeletons below 1s add flicker, not comfort |
| Page vitals | LCP ≤2.5s · INP ≤200ms · CLS ≤0.1 | Core Web Vitals "good" thresholds, 75th percentile |
| Usability sample | 5 per audience ≈ 84% of problems | 1 − (1 − 0.31)ⁿ (Rule 9) |
| SUS benchmark | 68 = average; ~80+ = top quartile | Sauro's benchmark database |
| Print | 3mm bleed · 300 ppi at final size · ≤300% total ink | |
Deliverable Contract
Nothing leaves in a state where the next person has to guess. Each row is the minimum, not the ideal.
| Deliverable | Ships with |
|---|
| Logo / identity | SVG master, 16px legibility check, one-color and knockout versions, clear space and minimum size, full export matrix (brand.md) |
| Screen or component | Every state in the matrix, both themes, longest + empty content, breakpoint behavior, token names not hex values, accessibility annotations (components.md, handoff.md) |
| Landing page | The what/who/why answered above the fold, one primary CTA, image weight budget against LCP, mobile source order, every form state (marketing.md) |
| Design system | Three token tiers, the naming rule written down, at least two themes proven, versioning and deprecation policy, an adoption metric (tokens.md) |
| Printed piece | Bleed, safety margin, 300 ppi at final size, CMYK profile named, ink limit checked, proof approved, vendor spec sheet (print.md) |
| App icon / store listing | Platform masks and safe zones, every required size, screenshot set per device class (mobile.md) |
| Research | Task list, participants per audience, severity-ranked findings, and the findings written to their box (research.md) |
| Anything else | What changes, in which states, at which breakpoints, and what each thing is called in the token set |
Output Gates
Before delivering any design, spec, or recommendation:
- Does every text and meaningful non-text element clear its contrast floor, computed (Rule 1) rather than eyeballed?
- Is every size and space a value from the scale, with no arbitrary numbers?
- Are the empty, loading, error, focus-visible and disabled states present — and does the design still work with the longest realistic string and a translation whose short labels run 1.5-2× longer?
- Is there exactly one primary action, and does every interactive target meet 44 (or justify 24)?
- Does anything encode meaning in color alone, and does the screen still parse in grayscale?
- Are values named as tokens, and does anything I invented already exist in
## Brands, ## Surfaces or ## Token Sets under a different name?
- If this animates: is it inside its duration band (
motion.md) with nothing the interaction depends on over ~400ms, transform/opacity only, and a prefers-reduced-motion alternative that keeps the feedback?
- Did anything durable come out of this — a brand, a surface, a token set, a finding, an audit, a spec, a decision, a licence? Then it is written to its box in
memory-template.md, with its ## Boxes line, in this same turn.
Configuration
User-dependent variables. Defaults apply until the user states a preference; store them in ~/Clawic/data/designer/config.yaml.
| Variable | Type | Default | Effect |
|---|
| design_tool | figma | sketch | penpot | affinity | illustrator | none | figma | Which tool's structures specs are written against (variables, symbols, artboards) and what a handoff package contains (handoff.md) |
| target_platforms | list (web, ios, android, email, print) | web | Which platform conventions, export matrices and gates apply; adds the mobile.md, marketing.md or print.md checks to every deliverable |
| spacing_base_px | number (2-8) | 8 | The unit every gap, inset and grid gutter is a multiple of (Rule 3) |
| type_scale_ratio | number (1.067-1.618) | 1.25 | Step ratio of every generated type scale (typography.md) |
| min_body_px | number (14-20) | 16 | Body floor and the base of the type scale |
| contrast_target | aa | aaa | aa | 4.5:1 / 3:1 versus 7:1 / 4.5:1 in Rule 1 and every palette generated in color.md |
| a11y_posture | baseline | strict | baseline | strict blocks delivery on any AA failure including non-text contrast and target size, and adds the keyboard pass to every review (accessibility.md) |
| color_notation | hex | hsl | oklch | hex | Notation every palette, token and code sample is written in; oklch also switches ramp generation to perceptual lightness steps |
| token_naming | tier-prefixed | semantic-only | framework | semantic-only | Shape of every token name emitted (tokens.md) |
| css_framework | tailwind | css-vars | scss | styled-components | none | css-vars | Dialect of every token export and spec snippet |
| brand_file | path | none | Long-form brand constraints at ~/Clawic/data/designer/<file>; overrides the generic defaults for voice, palette and type |
| pricing_model | hourly | fixed | value | retainer | none | none |
Preference areas — customizable dimensions; a stated preference gets recorded in config.yaml and applied from then on:
- Tooling — prototyping tool, icon library, stock and AI-image sources, font source (foundry, Google Fonts, self-host), plugin habits — affects which shape every recommendation takes
- Conventions — layer and page naming, component/variant naming, file organisation, breakpoint names, radius and elevation scales — affects generated names and
tokens.md
- Platform — density (compact vs comfortable), color space (sRGB vs P3), RTL support, locales that must fit, legacy browser or email-client floor — affects
layout.md, color.md and marketing.md
- Inclusion posture — beyond
a11y_posture: motion sensitivity, cognitive load, reading level target, whether dark mode is a requirement or an option — affects Output Gates and accessibility.md
- Output register — deliver the artifact vs the reasoning, annotated frames vs a written spec, how much rationale accompanies a proposal — affects every answer's shape
- Work order — concepts before or after content, number of directions explored, when review gates happen, whether research precedes concepting — affects
critique.md and clients.md
- Constraints and exclusions — banned techniques (carousels, hamburger on desktop, custom scrollbars), mandatory brand elements, licence restrictions, compliance regimes — recorded once and applied thereafter without re-asking
- Cadence — accessibility re-audit, brand consistency sweep, design-vs-build drift check, licence renewal review — every accepted cadence becomes a row in the
## Due table of memory.md
Traps
| Trap | Why it fails | Do instead |
|---|
| Starting with the visual, ending with the content | Real content is longer, emptier and uglier than lorem ipsum, and it arrives after the layout is locked | Design with the longest and the emptiest real strings first (copy.md) |
| Contrast checked by eye or "it looks fine on my screen" | Author screens are bright, new, and viewed indoors at full brightness | Compute it (Rule 1); WebAIM's annual million-page scan has found low-contrast text the leading failure, on roughly 80% of home pages |
| Disabling the submit button until the form is valid | Gives no reason and no target — screen readers may skip it entirely | Keep it enabled, validate on blur, and move focus to the first error on submit (components.md) |
| Placeholder text used as the label | Disappears exactly when the user needs it, and fails contrast at most placeholder greys | Persistent label above the field (components.md) |
| Inventing a hex, a size, or a name mid-flow | Creates the third grey and the fourth "primary" nobody can reconcile | Check ## Token Sets and ## Brands in memory before creating a value (Output Gates) |
| Dark mode by inverting the light theme | Inverted shadows vanish, saturated colors vibrate, pure black causes halation for light text | Design the dark surfaces, desaturate accents, elevate with lightness (color.md) |
| "Make it pop" accepted as a brief | It is a symptom report, not an instruction, and acting on it literally adds noise | Convert it to a question about hierarchy, then show two options (critique.md) |
| One extra revision round "as a favour" | Resets the client's model of what a round costs, and the next request arrives framed the same way | Change order with a price and a date from the first one (clients.md) |
| Redesigning because of a stakeholder's preference | Preference and performance diverge constantly, and the loudest preference wins by volume, not evidence | One test with five users per audience settles it faster than the argument (Rule 9) |
| Shipping a mockup as the spec | Everything unspecified — states, breakpoints, motion, focus order — gets invented by the implementer |
Where Experts Disagree
- WCAG contrast math vs APCA. WCAG 2.x's luminance ratio is a poor model of perceived contrast for light text on dark and for thin weights — APCA (developed for WCAG 3) models polarity and font weight, and frequently disagrees. The frontier is obligation: if a conformance claim, a public-sector contract or a VPAT is in play, WCAG 2.x is the number that counts and APCA is advisory. Otherwise pass both and take the stricter.
- Design systems early vs on demand. Early systems buy consistency and cost flexibility exactly when the product is still changing shape. The boundary is not company size but repetition: the third instance of a pattern justifies the abstraction; the first two are a guess (
tokens.md).
- Minimal-flat vs affordance-heavy. Flat interfaces test worse on discoverability for infrequent users and better on perceived modernity with frequent ones. Decide by audience frequency, not fashion: high-frequency tools can strip affordances that consumer one-shot flows must keep.
- Hamburger menus. Hiding navigation reliably lowers discovery of what is hidden. Legitimate when the hidden items are genuinely secondary and the top 3-5 destinations stay visible; wrong when it hides the primary task.
- Pure black in dark mode. OLED power savings and contrast maximalists argue for
#000; readability practice argues for ~#121212 surfaces, because maximum contrast produces halation on light-on-dark text and pure black removes the elevation channel. Default to a near-black surface; #000 only for a deliberate OLED or cinematic mode.
- The 60-30-10 split. A useful starting distribution, not a law: it describes editorial and interior work better than dense product UI, where neutrals routinely exceed 80% and the accent is under 5%. Applied as a constant it produces oversaturated dashboards.
Related Skills
More Clawic skills, get them at https://clawic.com/skills/designer (install if the user confirms):
design — quantified visual judgment on a single artifact, when there is no system to maintainbranding — brand strategy, positioning and voice upstream of the identitydesign-system — deep component-library architecture once a system existsfigma — the mechanics of the file itself: auto layout, variants, variables, Dev Modeaccessibility-audit — the full WCAG audit including automated sweeps and screen-reader passes
Feedback
Part of Clawic, the verified skill library. Get this skill: https://clawic.com/skills/designer.
