080101 design foundations

Skill natuleadan/skills/skills/080101-design-foundations

Design foundations: color theory, token hierarchy, brand vs product registers, OKLCH, color strategies, absolute bans, and slop test.From its SKILL.md

Install

npx -y skills add natuleadan/skills --skill 080101-design-foundations

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

1.9 KB, 405 tokens by cl100k_base, as published. Nobody here has run it

Design Foundations

Foundational design decisions: color, tokens, and the register (brand vs product) that determines how design rules apply. Use this before making any color or theming choice.

References

Topic	File
Color strategies: Restrained, Committed, Full palette, Drenched	references/color-strategies.md
Design token hierarchy: Brand → Semantic → Component	references/token-hierarchy.md
Brand vs Product register differences, slop tests, shared laws	references/brand-product-register.md

Core Rules

Scene Sentence: Write one sentence of physical context (who, where, ambient light, mood) to decide dark vs light. If the sentence doesn't force the answer, it's not concrete enough.
Color strategy: Pick from Restrained (≤10% accent), Committed (30-60% saturated), Full palette (3-4 roles), Drenched (surface IS the color).
OKLCH: Use OKLCH, reduce chroma at lightness extremes, never #000 or #fff, tint neutrals toward brand hue (chroma 0.005-0.01).
Absolute bans: No gradient text, side-stripe borders, glassmorphism as default, hero-metric template, identical card grids, modal as first thought, nested cards.
Slop test (two altitudes): First-order — would someone guess theme from category alone? Second-order — would someone guess aesthetic from category-plus-anti-references? If yes, rework.

When to Use

Choosing color scheme for a new project
Defining design tokens and CSS variables
Deciding dark vs light mode
Designing marketing/brand surfaces vs product UI
Reviewing UI for "AI-generated" look

What ships with it: 5 files

26.2 KB alongside SKILL.md, 1 of them executable

references/

scripts/

validate.pyruns1.8 KB

metadata.json798 B

Gives 0 of the 12 instructions most design frontend skills give in 405 tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

Use CSS variables for color consistencyin 72 of 1169, across 23 files
Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
Add atmospheric background effects and texturesin 57 of 1169, across 9 files
Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
Implement real working codein 55 of 1169, across 7 files
Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
Launch chromium in headless modein 47 of 1169, across 4 files
Close the browser when donein 47 of 1169, across 4 files
Run provided scripts with help flag firstin 47 of 1169, across 4 files
Wait for network idle statein 47 of 1169, across 4 files
Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

Write one sentence of physical context before theming
Choose a color strategy from the four specified options
Reduce chroma at lightness extremes
Run the two-altitude slop test

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.