Typography And Layout
Typography with intent and composition with rhythm — type pairing, modular scale systems, grids (and when to break them), negative space, and visual hierarchy. Use this skill whenever setting ANY text styles or arranging ANY elements on a surface: choosing fonts, sizing headings, building a landing page or app screen layout, laying out a slide, spacing a dashboard, composing a poster or chart, or…
Install
$ agentstack add skill-jangles-byte-atelier-typography-and-layout ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-jangles-byte-atelier-typography-and-layout) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
Typography & Layout
Typography is most of design: get type and spacing right and a screen looks designed before it has any color or decoration. The failure mode is timidity — small scale jumps, default tracking, uniform spacing — not bad taste.
Workflow
- Read the design philosophy (
design-direction); the type voice comes from there. - Choose faces and pairings with
[references/type-pairing.md](references/type-pairing.md) — contrast on exactly one axis, two families maximum.
- Build a modular scale and spacing system with
[references/scale-and-space.md](references/scale-and-space.md) — sizes, line heights, measure, and the spacing ladder, as tokens.
- Compose with [references/composition.md](references/composition.md) — grid,
hierarchy channels, negative space, and the sanctioned ways to break the grid.
- Render at real size and run the
critiqueskill. Type that looks right in code
is routinely wrong on screen.
Which reference to load
| Situation | Load | |---|---| | Picking fonts, pairing display + text faces, font features | references/type-pairing.md | | Setting sizes, line-height, measure, spacing ladder | references/scale-and-space.md | | Arranging a page/screen/slide, hierarchy problems, grids | references/composition.md |
Non-negotiables
- Two font families maximum (a third only for code/data, and it counts if decorative).
- A real scale ratio, and at least one jump ≥ 3× body size somewhere in display
contexts (heroes, slides, posters); interfaces cap lower but still need contrast.
- Body measure 45–75 characters; line-height inversely proportional to size.
- Spacing from a ladder (4/8-based), applied asymmetrically: space groups, not
elements — more space between sections than inside them, always.
- Tabular numerals (
font-variant-numeric: tabular-numsor a mono) for any column
of numbers that can change.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: jangles-byte
- Source: jangles-byte/atelier
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.