Reference
Design System
Colors, typography, spacing, and component patterns used across francescoronel.com. Built with Tailwind CSS 4.
Tokens
Colors
Navy (Primary)
Dark blues used for text, backgrounds, and elevated surfaces.
navy-50
#f0f1f5
navy-100
#d9dce6
navy-200
#b3b9cd
navy-300
#8d96b4
navy-400
#67739b
navy-500
#4a5578
navy-600
#3b4461
navy-700
#2c334a
navy-800
#1e2233
navy-900
#141726
navy-950
#0b0d17
Horchata (Accent)
Warm beige and tan tones for accents, highlights, and interactive elements.
horchata-50
#fdf8f3
horchata-100
#f9ede0
horchata-200
#f3dbc1
horchata-300
#ecc9a2
horchata-400
#e5b783
horchata-500
#dfa564
horchata-600
#c98e4e
horchata-700
#a6743f
horchata-800
#835b31
horchata-900
#604223
horchata-950
#3d2a16
Semantic Usage
Light Background
horchata-50 / navy-900
Dark Section
navy-900 / navy-950
Accent
horchata-400 (#e5b783)
Tokens
Typography
Latina Essential (All Text)
Latina Essential
Primary typeface — used for all text across the site including headings, body, labels, and UI elements. Loaded locally via next/font/local. Designed by Latinotype.
Light (300): The quick brown fox jumps over the lazy dog
Medium (500): The quick brown fox jumps over the lazy dog
Bold (700): The quick brown fox jumps over the lazy dog
Heavy (900): The quick brown fox jumps over the lazy dog
Cabin (Fallback)
Cabin
Fallback typeface — available as a secondary option via next/font/google. Previously used as the body font.
Regular (400): The quick brown fox jumps over the lazy dog
Medium (500): The quick brown fox jumps over the lazy dog
Semibold (600): The quick brown fox jumps over the lazy dog
Bold (700): The quick brown fox jumps over the lazy dog
Type Scale
20px minimum baseline enforced for accessibility. Aggressive heading scale creates strong visual hierarchy.
text-xs
20px (1.25rem)
LH: 28px
Aa
Dates, meta, badges (floor)
text-sm
20px (1.25rem)
LH: 28px
Aa
Card body, captions (floor)
text-base
22px (1.375rem)
LH: 32px
Aa
Standard body text
text-lg
28px (1.75rem)
LH: 36px
Aa
Card titles, sub-headings
text-xl
32px (2rem)
LH: 40px
Aa
Section titles
text-2xl
38px (2.375rem)
LH: 46px
Aa
Page sub-headings
text-3xl
46px (2.875rem)
LH: 54px
Aa
Page titles
text-4xl
56px (3.5rem)
LH: 64px
Aa
Hero headings
text-5xl
68px (4.25rem)
LH: 76px
Aa
Large hero text
Layout
Spacing & Layout
Container Max Width
1200px
var(--container-max) with px-6 padding
Section Padding
py-16 md:py-20
64px mobile, 80px desktop
Card Radius
rounded-2xl (16px)
Used on all cards, modals, and elevated surfaces
Components
Buttons & Interactive
Buttons
Links
Badges
Inputs
Components
Cards
Standard Card
Used for blog posts, testimonials, portfolio items, and general content containers.
rounded-2xl border border-horchata-200 bg-white
Interactive Card
Cards that are links get hover states with border changes, shadow, and text color shifts.
Hover me →
Dark Card
Used in dark sections (experience, contact form, help topics).
rounded-2xl border border-navy-700 bg-navy-800
Tokens
Shadows
shadow-sm
Subtle elevation
shadow-md
Default card shadow
shadow-lg
Hover state shadow
A11y
Accessibility
Focus Ring
All interactive elements show a 2px horchata-500 outline with 2px offset on :focus-visible.
Minimum Font Size
20px enforced across the entire site via Tailwind theme overrides. Aggressive floor ensures readability at all breakpoints and prevents iOS Safari zoom on input focus.
text-xs = text-sm = 20px (1.25rem)
Dark Mode
Defaults to system preference via next-themes. Users can manually toggle between light and dark mode using the sun/moon button in the header. Class-based switching via Tailwind v4 custom variant.
Semantic HTML
Proper heading hierarchy (h1 → h6), landmarks (section, nav, main), aria labels on decorative images.
Patterns
Section Patterns
Label
Section Heading
Sections use a small uppercase label above the main heading. Label is always horchata-500.
Background Alternation
Pages alternate between light (horchata-50), white, dark (navy-900), and accent (horchata-100) backgrounds to create visual rhythm.