Alejandro Ha

Overview

Alejandro Ha's design system embodies 'Minimalist Clarity'—a philosophy that prioritizes uncluttered, centered composition and rapid visual feedback over decorative flourishes. The brand serves professionals and creative practitioners who value directness and accessibility. The aesthetic is deliberately austere: a pure white canvas (rgb(255, 255, 255)) with a single indigo accent (#6366f1) that draws the eye to interactive elements and status indicators. The UI evokes a sense of calm efficiency, as if every pixel has been justified and every interaction has been considered. Voice: direct, precise, and human. The brand speaks without jargon, using short sentences and concrete language. Example: 'Checking your browser before accessing alejandroha.com—please wait for up to 5 seconds.'

Colors

The color palette is deliberately restrained, anchored by a pure white surface (#ffffff) and a single, vibrant primary accent—indigo (#6366f1)—that appears on spinners, focus states, and interactive elements. This primary is paired with its container variant (#e5e4ff), a very light lavender used for backgrounds and disabled states. Secondary grays (#666666 for body text, #6c757d for muted labels, #505050 for disabled text) provide tonal hierarchy without competing for attention. The outline color (#d0d0d0) defines subtle borders on dropdowns and form elements. Surface variants (#f0f9fa, #e9ecef) create minimal depth in hover and selected states. The error color (#d32f2f) is reserved for validation and critical feedback. Primary (#6366f1) is used exclusively for the spinner's active border,

Typography

The type system uses DM Sans exclusively—a geometric, humanist sans-serif that balances technical precision with approachability. Display (56px, 600 weight, -0.02em letter-spacing) is reserved for hero statements; headline-md (24px, 600 weight) for section titles and primary headings; body-md (16px, 400 weight) for body copy and descriptions; label-md (14px, 600 weight, 0.01em letter-spacing) for UI labels and secondary text. The system enforces a consistent line-height ratio (1.4–1.5) to ensure readability in both desktop and mobile viewports. On small labels over busy backgrounds, apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased to prevent rendering artifacts. Font weights are limited to 400 (regular) and 600 (semibold) to reduce cognitive load and file si

Layout

The layout is single-column and centered, with a maximum container width of 600px—wide enough for comfortable reading but narrow enough to maintain focus. The page uses flexbox (display: flex; justify-content: center; align-items: center; min-height: 100vh) to vertically and horizontally center the primary content block. Spacing follows an 8px unit grid: the spinner sits 32px above the heading (margin: 0 auto 32px), the heading sits 16px above the body text (margin-bottom: 16px), and the entire container has 20px padding on all sides (padding: 20px) to ensure breathing room on mobile. The gutter spacing (20px) is applied consistently to prevent content from touching viewport edges. At breakpoints (768px and below), the spinner shrinks to 56px and margins compress to 28px; at 480px and belo

Elevation & Depth

Depth is conveyed through subtle shadows and discrete color shifts rather than layered blur effects. The primary shadow (0 3px 8px rgba(0, 0, 0, 0.15)) is applied to dropdown panels and elevated surfaces, creating a soft separation from the background without visual heaviness. The spinner uses no shadow—it floats on the pure white surface via its indigo border color alone, relying on chromatic contrast rather than depth. Hover states are indicated by background-color shifts (e.g., #f0f9fa for select options) rather than shadow elevation, keeping the interface flat and predictable. The system a

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used sparingly and only where they serve a functional purpose. The spinner uses border-radius: 50% (a perfect circle) to emphasize its rotational animation and draw the eye. Dropdown panels and select options use border-radius: 4px (0.25rem), a subtle rounding that softens hard edges without introducing visual noise. Buttons and interactive elements would use border-radius: 1rem (16px) if present, creating a slightly more approachable feel. The system avoids fully rounded corners (border-radius: 9999px) except on badges or pill-

Components

Feedback & Status The spinner-circle component (width: 64px, height: 64px, border: 4px solid #e5e4ff, border-top-color: #6366f1, border-radius: 50%, animation: spin 1s linear infinite) is the primary loading indicator. It uses a two-tone border technique: the full circle is light lavender (#e5e4ff), while the top arc is indigo (#6366f1), creating a visual cue that the element is rotating. On smaller viewports (480px and below), the spinner scales to 48px with a 3px border, maintaining visual prominence without overwhelming the layout.

Text & Hierarchy The heading-primary component (font-size: 24px, font-weight: 600, line-height: 1.4, color: #1a1a1a, margin-bottom: 16px) uses DM Sans at 600 weight to establish visual dominance. The domain name within the heading uses the same weigh

Do's and Don'ts

**Do**

• Do use the indigo primary (#6366f1) exclusively for interactive elements, focus states, and loading indicators—never for body text or backgrounds.
• Do maintain the 8px spacing grid throughout; use multiples of 8px (8px, 16px, 24px, 32px, 40px) for margins, padding, and gaps.
• Do apply DM Sans at 600 weight for all headings and labels; reserve 400 weight for body text and descriptions.
• Do center content vertically and horizontally on full-viewport layouts using flexbox; constrain max-width to 600px.
• Do provide visual feedback on hover and focus states using background-color shifts (e.g., #f0f9fa) rather than shadow elevation.
• Do test all interactive elements at 480px and 768px breakpoints; scale the spinner and adjust padding accordingly.

**Don't**

• Don't use colors outside the defined palette; avoid custom hex values or RGB values not listed in the color token system.
• Don't apply multiple shadows to a single element; use at most one shadow value (0 3px 8px rgba(0, 0, 0, 0.15)) for elevation.
• Don't mix font families; DM Sans is the only typeface in this system—never substitute system fonts or serif faces.
• Don't use border-radius values outside the defined scale (sm: 0.25rem, DEFAULT: 0.5rem, md: 0.75rem, lg: 1rem, xl: 1.5rem, full: 9999px).
• Don't apply animations other than the spin keyframe (0% { transform: rotate(0) } to 100% { transform: rotate(360deg) }) without explicit approval.
• Don't exceed a container max-width of 600px on desktop; maintain focus and readability by constraining content width.