Higinio Design Systems

Two complete brand systems—Celeste Clásica and Nocturna Eléctrica—with tokens, components, documentation, packages and an MCP server.

Visit website ↗

Homepage for the Higinio Sosa design systems — The homepage introduces both brand directions and the MCP server integration.

The challenge

Consistency across web products, dashboards and AI-generated tools requires more than a palette: it needs verifiable rules, documented components and assets that different stacks can consume.

My contribution

I defined both brand systems, their semantic tokens, 35 components per system, opposite themes, interactive guides, CSS packages and an MCP server for querying rules, generating snippets and validating implementations.

Key decisions

Use semantic tokens exclusively so components stay decoupled from hex values and themes remain easy to switch.
Publish CSS, Tailwind and JSON formats compatible with design-token pipelines.
Share one architecture between a light-first and a dark-first brand without diluting their personalities.
Bring design, motion, accessibility and quality rules into MCP tools and command-line validators.

The product in use

Screenshots captured while running the project or reviewing its published version.

Celeste Clásica style guide with navigation, principles and components — Celeste Clásica documents foundations, tokens and components for clear professional products.

Nocturna Eléctrica style guide with high-contrast principles and tokens — Nocturna Eléctrica applies the same semantic architecture to a technical dark-first direction.

Outcomes

Both systems provide navigable documentation and assets ready for product integration.
The CSS package and MCP server expose the same source of truth to applications and IDEs.
Validation turns brand and accessibility judgment into repeatable controls, not just recommendations.

Tech stack

Design tokensCSSTypeScriptMCPZodDockerWCAG 2.2