Hub
allenmccarty.ca

Design System

The visual foundation for all tools hosted on allenmccarty.ca.

01. Color Palette

Brand Sky

sky-600 (#0284c7)

Primary Text

slate-900 (#0f172a)

Background

slate-50 (#f8fafc)

Card Surface

white (#ffffff)

02. Typography

Display Header

Inter Black (900) / Tracking Tight

Body text is clean and legible using the Inter typeface, balanced with ample line height for focus.

Inter Regular (400) / Leading Relaxed

const developerMode = true;

JetBrains Mono / For data and code results

03. Component Boilerplate

The Tool Card

Example Tool

Clean card surface with slate-200 border.

<div class="bg-white border border-slate-200 rounded-3xl p-8 shadow-sm"> ... </div>

Primary Button

<button class="bg-sky-600 hover:bg-sky-700 text-white font-bold py-4 px-8 rounded-xl transition-all shadow-lg shadow-sky-600/10 active:scale-95"> Text </button>

Secondary Action

<button class="border-2 border-slate-200 text-slate-600 hover:border-sky-600 hover:text-sky-600 font-bold py-4 px-8 rounded-xl transition-all"> Text </button>

Form Inputs

<input type="text" class="w-full p-4 border border-slate-200 rounded-xl bg-slate-50 focus:outline-none focus:border-sky-600 focus:ring-4 focus:ring-sky-600/5 transition-all">

04. Design Principles

Generous Spacing

Use p-8 to p-12 for containers. Avoid crowding elements; let the layout breathe.

Soft Corners

Main cards use rounded-3xl. Interactive elements like buttons and inputs use rounded-xl.

Browser First

Prioritize client-side logic. Keep everything in a single HTML file for instant portability.