Skip to content

v0.3.0: design-system depth and audit discipline

Latest
Latest

Choose a tag to compare

View all tags
@leofinito leofinito released this 24 Apr 16:56
v0.3.0
4489ae3

Aligns the repo with the v2 update pack of the companion article (The 10 Marketing Assets Every Small Business Needs to Future-Proof Their Marketing in the AI Era) so both tell the same story with the same spine.

Highlights

Marketing Assets as Code

A new framing, borrowed (with attribution) from Hardik Pandya, applied across all 10 assets: every file is machine-readable, single-source-of-truth, version-controlled, and auditable. Treat every asset as code.

Asset 4 depth: three-layer tokens + spec hierarchy + audit script

Previously DESIGN.md + theme.json. Now also:

  • tokens.css: three-layer CSS variable file (upstream tokens → project aliases → components reference aliases only).
  • COMPONENT-SPEC-TEMPLATE.md: canonical 8-section template every component spec uses.
  • REFERENCES.md: AI-ready design systems worth studying (Atlassian, IBM Carbon, CMS, Nordhealth) plus primary sources.
  • specs/: foundations (color, typography, spacing, motion), tokens master map, worked atoms (button, input), scaffolded tiers (molecules, organisms, patterns) with contributor READMEs.
  • DESIGN.md 1.1.0 with new sections on the four AI-ready requirements, three-layer architecture, and the spec hierarchy.

Audit discipline across all 10 assets

  • AUDITS.md at repo root: per-asset audit matrix, cadence, and shipped tooling for every folder.
  • scripts/token-audit.sh: pure-bash check for raw hex, raw oklch, raw px in spacing/radius/font-size/gap, and direct Layer 1 references. Report-only by default, STRICT=1 for blocking.
  • CI gains a token-audit job (report-only).

FigmaLint integration

03-visual/VISUAL-BRAND.md now introduces FigmaLint as the Figma-side counterpart to scripts/token-audit.sh. Same pattern, different surface.

Upgrading

Pull the changes. Nothing you filled in previously moved or was renamed. The new files are additive: adopt the spec hierarchy and token-audit workflow when you are ready, or keep using just DESIGN.md + theme.json if that is enough for your product.

Coming next (v0.4)

Real worked examples (examples/bakery/, examples/b2b-services/) and additional audit scripts (voice-audit, orphan-check). See ROADMAP notes.

Thanks

Thanks to Hardik Pandya for the teardown that informed the design-system half of this release, and to TJ Pitre for FigmaLint.

Assets 2
Loading