HCC Design System & Build Philosophy

• Clarity over cleverness. If a visitor has to think, we've failed.
• Content first. Design serves the content, not the reverse.
• Mobile-first, always. Every decision is validated at 375px before it earns a desktop review.
• Performance is design. A slow page is a bad page, no matter how beautiful.
• Consistency compounds. Small repeated decisions build trust more than any single flourish.

One display face for headings, one body face for reading, and a monospace face for technical accents. Preloaded, self-hosted, subset to the characters we actually use. Type scale follows a modular ratio — nothing arbitrary.

Semantic tokens, not raw hex. Every project defines a small set of roles — background, foreground, accent, muted, border, destructive — and every component references the role, not the value. That is what makes a design system survive a rebrand.

Contrast is non-negotiable: 4.5:1 for body, 3:1 for large text and UI. Any pairing that fails is not shipped.

An eight-point grid. Every margin, padding, and gap is a multiple of 8px (with 4px allowed for tight component internals). Consistent spacing is the invisible reason a page feels professional.

A small library of reusable components — button, input, card, dialog, breadcrumb, callout — each built once, styled by tokens, accessible by default. Pages are composed from components, not from ad-hoc markup.

WCAG 2.2 AA is the baseline, not the ceiling. Every component ships with correct roles, keyboard support, focus indicators, and screen reader labels. Accessibility is a design constraint, not a compliance chore.

Motion is meaning. It confirms an action, links a cause to an effect, or draws attention to a change. Anything else is decoration and gets cut. Every animation respects prefers-reduced-motion.

Design the mobile experience completely before you touch a desktop mockup. The constraints — narrow width, tap targets, one-thumb reach, slow networks — make you make better decisions.

Internal linking is design. Every page has an obvious next step. Every deep page links back to its pillar. Every service links to its service areas and every service area links back to its services. This is how a site becomes navigable to both humans and AI.

The same button style, the same spacing, the same voice, everywhere. Consistency is the design equivalent of compound interest. Break it only when you have a real reason.

• Every action confirms its result within 100ms.
• Every error message explains what happened and what to do next.
• Every form remembers what the user typed if the submit fails.
• Every destructive action requires confirmation.
• Every long operation shows progress.