mitul.ca — Design System Reference

1. Visual Theme & Atmosphere

Mitul Shah’s personal site (“Photographer, design engineer, and a bit more”) is a quiet, single-column portfolio held together by one decision: a saturated ultramarine blue, rgb(2, 16, 147), set against an otherwise neutral page. Nearly everything is small — 14px text on 21px leading — and the only large moment is a 24px name heading. The page is set entirely in a custom face named chico, in weights 400 and 500, so the personality comes from the letterforms rather than from scale or decoration. The footer flips to a solid blue block with near-white text, which turns the end of the page into a deliberate colour stamp. The tone is understated, precise, and a little playful (“doing what I can’t”).

2. Color Palette & Roles

Foundation

• rgb(0, 0, 0) — body text; the body background is transparent, so the browser canvas shows through
• rgb(217, 217, 217) — neutral gray surface used on flex blocks (placeholders, cards)

Accent (the brand colour)

• rgb(2, 16, 147) — deep ultramarine: nav text, outlined link text, footer background, filled button background
• rgb(252, 252, 252) — soft white: text and borders on top of the blue

Focus

• rgb(16, 16, 16) — the 1px auto focus outline

The system is effectively one hue. Blue appears either as text on the page or as a filled surface with near-white text; there is no second accent.

3. Typography Rules

One typeface, chico (with a chico Fallback), carries every element.

Principles

• Hierarchy is made with weight (400 vs 500) and a single size jump (14px to 24px), always on a 1.5 line-height.
• Section headings are the same size as body; only weight separates them.
• No uppercase transforms, no letter-spacing, no OpenType features.

4. Component Stylings

Filled pills / buttons (Email, Public Archive, Guestbook)

• Background rgb(2, 16, 147), text and border rgb(252, 252, 252)
• Text-weight 500, 14px
• Focus adds a rgb(16, 16, 16) auto outline at 1px; hover capture showed no change

Outlined / ghost links (nav, role link, “doing what I can’t”)

• Transparent background, text and border rgb(2, 16, 147)

Border radius

• 2px and 4px only — small, nearly square corners.

Shadows

• Two stacks exist: a layered raised shadow (rgba(8, 8, 8, 0.08) 0px 4px 4px, rgba(8, 8, 8, 0.2) 0px 1px 2px, plus white inset highlights rgba(255, 255, 255, 0.12) 0px 6px 12px inset and rgba(255, 255, 255, 0.2) 0px 1px 1px inset) giving a tactile, pressed-glass feel, and a standard Tailwind small shadow (rgba(0, 0, 0, 0.1) 0px 1px 3px).

5. Layout Principles

• Single narrow column; no detected breakpoints in the extracted CSS.
• Body and section padding/margin are all 0 — spacing is handled by inner elements.
• The footer has 96px 0px vertical padding, the largest spacing value found; it gives the closing blue block real weight.
• Built on Next.js and Tailwind CSS (utility classes such as flex, bg-accent).

6. Depth & Elevation

Mostly flat. Depth comes from two sources: the rgb(217, 217, 217) gray blocks (luminance 0.851) against the page, and the inset-highlight shadow stack, which makes certain elements look like small physical keys. The footer (luminance 0.105) is the only large dark plane.

7. Do’s and Don’ts

Do

• Use rgb(2, 16, 147) as the single accent, as text or as a filled surface.
• Put rgb(252, 252, 252) text on blue, not pure white.
• Keep text at 14px/21px and use weight 500 for emphasis.
• Keep radii at 2px or 4px.
• Give the footer generous (96px) vertical padding.

Don’t

• Don’t add a second accent colour.
• Don’t swap the custom face for a generic system sans.
• Don’t use uppercase, wide tracking, or heavy weights.
• Don’t use large corner radii.

8. Responsive Behavior

No breakpoints were detected, which fits a single fluid column built with Tailwind utilities. Because text is small and set on a 1.5 ratio, the layout reads the same at any width; the blue footer block is the element that anchors the bottom of the page on every screen size.

9. Agent Prompt Guide

Build a UI that matches mitul.ca’s design language.

Use a single custom sans (chico, or the closest geometric-humanist substitute) for everything: 14px/21px body at weight 400, 14px/21px links and headings at weight 500, and one 24px/36px weight-500 name heading. Text is black on the default canvas. The only colour is ultramarine rgb(2, 16, 147): use it for nav and ghost-link text, for filled pill buttons with rgb(252, 252, 252) text and border, and for a full-width footer block with 96px 0 padding. Use rgb(217, 217, 217) for neutral blocks. Corners are 2px or 4px. For tactile controls, use the layered shadow rgba(8, 8, 8, 0.08) 0 4px 4px, rgba(8, 8, 8, 0.2) 0 1px 2px with white inset highlights. Focus is a 1px rgb(16, 16, 16) auto outline. Keep everything in one narrow column and let the type and the one blue do the work.

Generated by Sparkbites — extracted from live CSS analysis