New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Hierarchy Typographic

by hashgraph-online in hashgraph-online/awesome-codex-plugins

A skill your agent uses when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the…

Apache-2.0Auto-check passedFrontend & Design

Install Hierarchy Typographic

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill hierarchy-typographic -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins hierarchy-typographic --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/hierarchy-typographic .claude/skills/hierarchy-typographic && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
hierarchy-typographic
GitHub stars
1.3k
Token cost
~2.3k tokens
SKILL.md length
884 words
Files
2 (incl. references)
Skills in repo
714
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the…

  • Works in 3 steps: Print-test. Print the page in grayscale… → Three-rank squint. Squint until detail… → The body-only test. Hide all headings;…
  • The question is specifically about how to construct visual hierarchy through typography — picking a type scale
  • SKILL.md covers When this is the decisive…, Core ideas, Worked example: a complete… and Anti-patterns, plus 2 more sections
  • Calls black

What it does

Hierarchy Typographic is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type. Trigger when designing type systems, choosing fonts, picking heading sizes, defining a design system's typographic tokens, fixing a "no clear focal point in the headline area" issue, or reviewing why a long-form page feels like a wall of text. Sub-aspect of the broader…

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/type-scale-and-history.md`).

It sits in Frontend & Design, covering Typography. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.

When your agent uses it

  • The question is specifically about how to construct visual hierarchy through typography — picking a type scale
  • Ladders of weight
  • Line-height steps
  • The relationships between display

Example prompts

  • “s typographic tokens, fixing a”
  • “/hierarchy-typographic”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Print-test. Print the page in grayscale on regular paper. Hierarchy that survives this test is robust. Hierarchy that requires color or…
  2. Three-rank squint. Squint until detail blurs. You should still see a primary tier, a secondary tier, and a recessive tier. If everything…
  3. The body-only test. Hide all headings; the body should still feel like prose, not a wall. If it feels like a wall, your max-width or…

What it can do on your machine

Read from SKILL.md and the folder at commit 9e7b281. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • black

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Hierarchy Typographic loads about 2.3k tokens when it runs, and up to ~3.9k if it reads all its reference files. Until then it costs about 149 tokens; SKILL.md has 884 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~149
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hashgraph-online/awesome-codex-plugins at commit 9e7b281, republished under its Apache-2.0 licence (© hashgraph-online). 884 words, ~2,295 tokens.

Download SKILL.mdSave it as .claude/skills/hierarchy-typographic/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
hierarchy-typographic
description
Use this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type. Trigger when designing type systems, choosing fonts, picking heading sizes, defining a design system's typographic tokens, fixing a "no clear focal point in the headline area" issue, or reviewing why a long-form page feels like a wall of text. Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

Hierarchy through typography

Typography alone can carry a complete hierarchy without color, color alone, or layout tricks. A well-constructed type system gives you 4–6 distinct ranks of importance using nothing but size, weight, and (sometimes) tracking and tone. This skill covers how to build that system.

When this is the decisive sub-aspect

  • You're picking the type tokens for a new design system (display, h1, h2, h3, h4, body-lg, body, body-sm, caption, micro).
  • You're working in a constrained color palette (monochrome, a single brand color) and need hierarchy without leaning on hue.
  • The page is text-heavy (docs, articles, settings descriptions, emails) and feels like a wall.
  • You're reviewing a layout where headings, sub-heads, and body text don't read as distinct ranks.

Core ideas

Pick a type scale, not arbitrary sizes

A type scale is a multiplicative ratio applied to a base size to generate a series of harmonious sizes. Common scales:

  • 1.125 (Major Second) — very subtle. Good for dense application UI where step changes between sizes shouldn't shout.
  • 1.2 (Minor Third) — gentle, common in software UI.
  • 1.25 (Major Third) — a solid default for general web; what Tailwind's default scale approximates.
  • 1.333 (Perfect Fourth) — feels editorial; good for content sites.
  • 1.414 (Augmented Fourth, √2) — common in print.
  • 1.5 (Perfect Fifth) — bold, feels like a magazine layout.
  • 1.618 (Golden Ratio) — dramatic, marketing/hero scale.

Pick one ratio per project. Mixing ratios across sizes destroys the rhythm.

A worked scale at base 16px and ratio 1.25:

caption  10.24 px   (16 / 1.25 / 1.25)
body-sm  12.80 px   (16 / 1.25)
body     16.00 px   (base)
body-lg  20.00 px   (16 * 1.25)
h4       25.00 px   (16 * 1.25^2)
h3       31.25 px   (16 * 1.25^3)
h2       39.06 px   (16 * 1.25^4)
h1       48.83 px   (16 * 1.25^5)
display  61.04 px   (16 * 1.25^6)

Rounded to friendly numbers (10, 13, 16, 20, 25, 31, 39, 49, 61), this gives you a 9-step ladder with consistent visual jumps between any two adjacent steps.

Use weight as a second axis

Size alone is enough for hierarchy in body-vs.-heading contexts but is a blunt tool when you need fine distinctions. Weight gives you a second axis. A useful weight ladder:

hairline / thin    100   — display only, never body
light              300   — large display sizes; never small
regular            400   — body
medium             500   — UI labels, buttons
semibold           600   — headings, emphasis
bold               700   — strong emphasis, heavy display
black              900   — display only

Most software UIs need only three weights: regular (400), medium (500), and semibold (600). Reach for bolder weights only at display sizes; bold at body size is hard to read.

Combine size and weight, don't trade them

A common mistake is treating size or weight as the hierarchy signal. They compound:

  • A 24px-semibold heading reads as much higher in the hierarchy than a 24px-regular heading, even though the size is identical.
  • A 16px-regular body paragraph and a 16px-medium label are perceived as different ranks despite identical size.

When constructing a step in your hierarchy, both dial up: bigger headings should also be bolder. The exception is display type (very large), which often decreases in weight at the largest sizes (light or regular at 60px+ reads as elegant; black at 60px+ reads as shouting).

Line height (leading) is part of the system

Tighter leading (1.1–1.25) suits display and headings. Looser leading (1.5–1.75) suits body. Mismatch a heading with body leading (1.5) and the heading feels droopy; mismatch a body with display leading (1.2) and reading becomes hard.

A workable mapping:

display, h1, h2:   line-height 1.1–1.25
h3, h4:            line-height 1.25–1.4
body, body-lg:     line-height 1.5–1.75
body-sm, caption:  line-height 1.4–1.6
Line length (measure)

For sustained reading, constrain body text to roughly 45–75 characters per line (≈ 65ch is a common default). Longer lines fatigue eye-tracking; shorter lines fragment thought. Headings can be wider; captions and labels can be tighter.

css
.body-text { max-width: 65ch; }
Show full SKILL.md (363 more words)Show less
Tracking (letter-spacing)

Generally leave tracking alone. Two cases where it earns adjustment:

  • All-caps labels and small caps: add ~0.04–0.08em of tracking; they read tightly otherwise.
  • Very large display type: subtract a small amount (-0.01 to -0.02em); large type looks loose without it.

Worked example: a complete typographic hierarchy in CSS

css
:root {
  /* Type scale at ratio 1.25, base 16px */
  --text-caption: 0.64rem;   /* 10.24 */
  --text-sm:      0.80rem;   /* 12.80 */
  --text-base:    1.00rem;   /* 16.00 */
  --text-lg:      1.25rem;   /* 20.00 */
  --text-xl:      1.563rem;  /* 25.00 */
  --text-2xl:     1.953rem;  /* 31.25 */
  --text-3xl:     2.441rem;  /* 39.06 */
  --text-4xl:     3.052rem;  /* 48.83 */
  --text-display: 3.815rem;  /* 61.04 */

  /* Weight ladder */
  --weight-body:     400;
  --weight-label:    500;
  --weight-emphasis: 600;
  --weight-display:  700;

  /* Leading */
  --leading-display: 1.1;
  --leading-heading: 1.25;
  --leading-body:    1.6;
  --leading-tight:   1.4;
}

.display {
  font-size: var(--text-display);
  font-weight: 400;          /* display gets lighter weight, paradoxically */
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}
h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-emphasis);
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-emphasis);
  line-height: var(--leading-heading);
}
h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-emphasis);
  line-height: var(--leading-heading);
}
h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-label);
  line-height: var(--leading-heading);
}
body, p {
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  max-width: 65ch;
}
.label, button, .ui-control {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  line-height: var(--leading-tight);
}
.caption, small, .micro {
  font-size: var(--text-caption);
  font-weight: var(--weight-body);
  line-height: var(--leading-tight);
  color: rgb(0 0 0 / 0.55);   /* tone reduction adds tertiary recession */
}

Eight clear ranks, all derived from one ratio, three weights, three leading values, and one tone reduction at the very bottom. This is enough hierarchy to handle any UI or content surface.

Anti-patterns

  • Random sizing. "Make this 18px" / "this 19px" / "this 22px" — close-but-not-equal sizes look like accidents. If two things should be the same rank, give them the same size; if different ranks, make the difference clear.
  • Bold everything. When every label, every heading, and every value is bold, none of them read as emphasized. Reserve bold for one or two roles.
  • Gigantic body type. Body text larger than ~18–20px starts to feel like a slide deck. Reserve large type for headings; keep body in the 14–18px range.
  • Tiny captions. Below 11px, anti-aliasing destroys legibility. If you find yourself reaching for 9px or 10px, you have too much content for the space — cut content rather than shrink type.
  • Inconsistent weight per role. "Card titles are semibold here, medium there." Decide once per role.

Heuristics

  1. Print-test. Print the page in grayscale on regular paper. Hierarchy that survives this test is robust. Hierarchy that requires color or screen brightness is fragile.
  2. Three-rank squint. Squint until detail blurs. You should still see a primary tier, a secondary tier, and a recessive tier. If everything is one tone of grey, hierarchy is too flat.
  3. The body-only test. Hide all headings; the body should still feel like prose, not a wall. If it feels like a wall, your max-width or leading is wrong.
  • hierarchy — the parent skill. Read it for the full framing.
  • hierarchy-spatial — when type alone isn't enough, spatial hierarchy carries the rest.
  • hierarchy-color-and-tone — color and tone as a third axis on top of size+weight.
  • legibility and readability — the typeface- and layout-side of typography that hierarchy depends on.
  • signal-to-noise-ratio — too many active ranks reduces SNR; restraint multiplies the effect of each rank.

© hashgraph-online, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/hierarchy-typographic of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/type-scale-and-history.md

Open the folder on GitHubat commit 9e7b281

Compare with similar skills

Hierarchy Typographic next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Hierarchy Typographic compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Hierarchy Typographic this skillhashgraph-online/awesome-codex-plugins1.3k—~2.3kAutomated safety check: PassApache-2.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons18618 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    186 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.5k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 714 skills in this repo

  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.3k GitHub stars~922 tokensUpdated yesterday
    Auto-check passed

  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.3k GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.3k GitHub stars~1.7k tokensUpdated yesterday
    Auto-check passed

  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.3k GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed

  • Calle

    hashgraph-online/awesome-codex-plugins

    Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.3k GitHub stars~2.9k tokensUpdated yesterday
    Auto-check passed

  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.3k GitHub stars~618 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Hierarchy Typographic

What does Hierarchy Typographic do?

A skill your agent uses when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the…. Hierarchy Typographic is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type.

When should I use Hierarchy Typographic?

Hierarchy Typographic fits situations like: the question is specifically about how to construct visual hierarchy through typography — picking a type scale; ladders of weight; line-height steps; the relationships between display.

How do I install Hierarchy Typographic in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill hierarchy-typographic -a claude-code`. Or copy the skill folder (plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/hierarchy-typographic in hashgraph-online/awesome-codex-plugins) into .claude/skills/hierarchy-typographic in your project. Claude Code loads it when a task matches its description.

How do I install Hierarchy Typographic in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill hierarchy-typographic -a codex`. Or copy the skill folder (plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/hierarchy-typographic in hashgraph-online/awesome-codex-plugins) into .agents/skills/hierarchy-typographic in your project. Codex loads it when a task matches its description.

Can I use Hierarchy Typographic in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill hierarchy-typographic -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hierarchy-typographic, .gemini/skills/hierarchy-typographic, .github/skills/hierarchy-typographic and .opencode/skills/hierarchy-typographic in your project.

What does Hierarchy Typographic need to run?

Going by SKILL.md and its folder, Hierarchy Typographic needs the command-line tools its instructions call (black).

Does Hierarchy Typographic access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Hierarchy Typographic safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Hierarchy Typographic use?

Hierarchy Typographic is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Hierarchy Typographic use?

About 2.3k tokens (SKILL.md is roughly 9.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.6k tokens, read only when the agent opens those files.

What are the alternatives to Hierarchy Typographic?

Skills that share tags, products or a category with Hierarchy Typographic: Impeccable (bestofjs/bestofjs, 3.1k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Design System (Ohh-889/skyroc, 795 stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hierarchy Typographic?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,255 GitHub stars. The repository holds 714 skills in this directory. The repository was last updated on October 9, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.