Coral is a personal design system built with a single source of truth for color, type, space, and the rules that bind them. Twelve-step color ramps, a 10px modular type scale, and a semantic layer that maps raw primitives to meaning across light and dark themes; all defined in markdown files.
Before designing a single screen, I built the system every screen would draw from. A token-based foundation means a decision gets made once, then reused, themed, and scaled without re-litigating it on every page.
Coral is structured in three layers. Primitives are the raw values: eight color families at twelve steps each, the 10px type scale, a 4px spacing base. A semantic layer maps those primitives to roles, background, surface, text, primary action, etc. so the same component swaps themes cleanly between light and dark. A layer of rules then governs how it all gets used: one primary action per section, WCAG compliant contrast minimums, color never carrying meaning alone, etc. The whole thing lives in DESIGN.md and SKILL.md documents, a token reference and a usage rulebook, so it stays portable and easy to evolve.
Eight color families, each a full 12-step ramp provides enough range for primary, secondary, tertiary, and every functional state.
A 62.5% root so 1rem = 10px. Headers H1–H6 plus large, body, small, and subtext sizes create one predictable ramp from hero to metadata.
Light and dark use the same semantic tokens pointing to different values. Toggle the theme in the nav above and this page re-maps live.
A token reference and a usage rulebook hold the entire system as portable, version-able markdown, free of any one design tool.
Everything below renders from Coral's real tokens, the same values used across this portfolio site.
Every family runs the same twelve steps, light to dark, so contrast pairs are predictable: a step-08 fill against step-01 text, a step-04 border on a tinted surface, and always WCAG compliant where necessary. Hover any chip for its value.
Components never reference a primitive directly. They reference a semantic token, and each theme points that token at a different step so one component definition serves both modes.
| Token | Light | Dark | Role |
|---|---|---|---|
| --bg | #FAFAFA | #050505 | Page background |
| --surface | #FFFFFF | #111111 | Cards, nav, modals |
| --text | #050505 | #FAFAFA | Primary text |
| --c-hi | #CC310B | #FF5D35 | Primary action & accent |
Inter is used throughout, headers are bold 700, sub-headers and eyebrows step down to semibold 600, and body and supporting text are regular 400. The 10px root keeps the math simple: H1 is 3.2rem, body is 1.6rem, etc.
Every gap, pad, and margin is a multiple of 4. Five steps cover the whole system, from tight icon gaps to large section breaks.
Three corner radii plus a pill. Small 4px for inputs and small buttons, standard 8px for buttons and cards, large 16px for containers and modals, and rounded pills for individual use cases.
Primitives only matter once they compose. These are real examples of on-system components including buttons, inputs, controls, and cards built straight from the tokens above. Like everything else here, they re-theme live: toggle light/dark in the nav above and watch them re-map!
A short supporting line describing the project.
Coral isn't a system that lives in a slide. Every page in this portfolio is built from its tokens: the navigation, the case-study layouts, the components above, the light/dark theming you can toggle, among many other aspects.
Building foundations first, then screens, is what kept the work coherent as it scaled across the whole site. Claude AI was used to move through the build faster, but the system is what holds every page to the same predefined rules.
AI brought the build to life faster, gave me full control to make the hard decisions, and allowed me to build this fully functional custom-built portfolio site that strictly follows my design system from the ground up.
A design system's value is recognized when a model or a teammate is able to build against it. Translating Coral to markdown turned it from a static collection of artifacts in Figma into a working infrastructure. The portfolio you are viewing is the product of it.
The craft didn't go away, it was reprioritized. There was less time pushing pixels and more time on the decisions that carry a product: structure, hierarchy, contrast, restraint, and knowing when to course-correct manually.
Have a project or role in mind? I'd love to hear from you.