Skip to main content
Designhashgraph-online

form-follows-function-as-axiom

Use this skill when applying the descriptive form-follows-function interpretation — functional clarity as a source of aesthetic quality. Trigger when designing tools, dashboards, or instrumental surfaces where every element should earn its presence. Sub-aspect of `form-follows-function`; read that first.

Stars
336
Source
hashgraph-online/awesome-codex-plugins
Updated
2026-05-27
Slug
hashgraph-online--awesome-codex-plugins--form-follows-function-as-axiom
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/hashgraph-online/awesome-codex-plugins/HEAD/plugins/HDeibler/universal-design-principles/plugins/aesthetics-and-emotion-principles/skills/form-follows-function-as-axiom/SKILL.md -o .claude/skills/form-follows-function-as-axiom.md

Drops the SKILL.md into .claude/skills/form-follows-function-as-axiom.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Form follows function as descriptive axiom

The descriptive interpretation: beautiful design tends to result from purity of function. Every visible element has a purpose; nothing decorative without function. The result tends to be coherent, timeless, and pleasing without being explicitly "designed for beauty."

When the descriptive interpretation applies cleanly

  • Industrial tools (Leatherman, Dyson, Snap-on) — function-derived form is what users want.
  • Information design (Tufte-style charts, transit maps) — every mark earns its place.
  • Working software UI (IDEs, dashboards, admin panels) — clarity dominates.
  • Type design (Helvetica, Inter, IBM Plex) — function (legibility) drives the form.
  • Architecture for utility (warehouses, factories, infrastructure) — pure function reads as visually honest.

In these contexts, the rule "strip what doesn't serve function" usually improves the result.

How to apply

  1. Identify function clearly. What does this design do? What's its primary purpose?
  2. Audit each visible element. Does it serve the function? If not, it's a candidate to cut.
  3. Trust the result. Function-derived form tends to be visually compelling without explicit decoration.

Worked examples

A monitoring dashboard

Function: rapid comprehension of system state.

Form-follows-function moves:

  • Strip decorative borders.
  • Use a minimal color palette; reserve color for status semantics.
  • Place key metrics in dominant positions.
  • Remove ornamental icons that don't aid comprehension.

Result: a dashboard that feels designed even though no decoration was added.

A typeface

Function: legibility at small sizes; durability across rendering environments.

Form-follows-function moves:

  • Open counters (the spaces inside letters).
  • Distinctive characters (clear distinction between l, 1, I).
  • Optical adjustment for size (different shapes at different sizes).

Result: a typeface like Inter or IBM Plex Sans that's beautiful precisely because every letter is shaped for reading.

When to depart from the descriptive interpretation

  • Brand surfaces where personality matters as much as function.
  • Marketing materials where attention is the function.
  • Consumer products competing on appeal.

In these contexts, "strip what doesn't serve narrow function" loses to "include what serves broader function (including engagement and brand)."

Related sub-skills

  • form-follows-function (parent).
  • form-follows-function-success-criteria — defining what counts as function.
  • signal-to-noise-ratio — the operational version.
  • ockhams-razor — preferring simpler solutions.