Jamey Greenwood
974d91ce33
Typography Presets (research-backed pairings): - clean: Manrope + Inter (minimal, modern) - editorial: Playfair Display + Raleway (fashion, lifestyle) - modern: Space Grotesk + Inter (tech, futuristic) - classic: Cormorant Garamond + Source Serif 4 (luxury, elegant) - friendly: Fraunces + Work Sans (playful, quirky) - minimal: DM Sans + Source Serif 4 (design-forward) - impulse: Raleway + Inter (wellness, beauty) Type Scale & Line Heights: - Major Third (1.25) ratio for mathematical harmony - H1: line-height 1.1, letter-spacing -0.025em - H2: line-height 1.15, letter-spacing -0.02em - H3: line-height 1.2, letter-spacing -0.015em - Body: line-height 1.5 (WCAG compliant) - Small text: letter-spacing +0.01em for readability Fluid Typography: - Headings use clamp() for smooth mobile→desktop scaling - Display: 36px→48px, XL: 30px→40px, LG: 24px→32px Performance: - Variable font loading where available (Inter, Manrope, etc.) - Removed unused fonts (Libre Baskerville, Nunito, Source Sans) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
95 lines
2.6 KiB
CSS
95 lines
2.6 KiB
CSS
/* ========================================
|
||
THEME PRIMITIVES - Layer 1
|
||
Fixed CSS custom properties
|
||
======================================== */
|
||
|
||
:root {
|
||
/* Spacing scale */
|
||
--p-space-1: 0.25rem;
|
||
--p-space-2: 0.5rem;
|
||
--p-space-3: 0.75rem;
|
||
--p-space-4: 1rem;
|
||
--p-space-6: 1.5rem;
|
||
--p-space-8: 2rem;
|
||
--p-space-12: 3rem;
|
||
--p-space-16: 4rem;
|
||
--p-space-24: 6rem;
|
||
|
||
/* Border radius scale */
|
||
--p-radius-none: 0;
|
||
--p-radius-sm: 0.25rem;
|
||
--p-radius-md: 0.5rem;
|
||
--p-radius-lg: 0.75rem;
|
||
--p-radius-xl: 1rem;
|
||
--p-radius-full: 9999px;
|
||
|
||
/* Font families - Curated pairings based on research */
|
||
/* Sans-serif */
|
||
--p-font-inter: 'Inter', system-ui, sans-serif;
|
||
--p-font-manrope: 'Manrope', system-ui, sans-serif;
|
||
--p-font-work-sans: 'Work Sans', system-ui, sans-serif;
|
||
--p-font-dm-sans: 'DM Sans', system-ui, sans-serif;
|
||
--p-font-raleway: 'Raleway', system-ui, sans-serif;
|
||
--p-font-space: 'Space Grotesk', system-ui, sans-serif;
|
||
--p-font-outfit: 'Outfit', system-ui, sans-serif;
|
||
|
||
/* Serif */
|
||
--p-font-fraunces: 'Fraunces', Georgia, serif;
|
||
--p-font-cormorant: 'Cormorant Garamond', Georgia, serif;
|
||
--p-font-playfair: 'Playfair Display', Georgia, serif;
|
||
--p-font-source-serif: 'Source Serif 4', Georgia, serif;
|
||
|
||
/* Major Third (1.25) Type Scale with line-heights and letter-spacing */
|
||
/* Body text: 1.5 line-height (WCAG compliant) */
|
||
--p-text-xs: 0.75rem; /* 12px */
|
||
--p-lh-xs: 1.5;
|
||
--p-ls-xs: 0.02em; /* Wider for small text */
|
||
|
||
--p-text-sm: 0.875rem; /* 14px */
|
||
--p-lh-sm: 1.5;
|
||
--p-ls-sm: 0.01em;
|
||
|
||
--p-text-base: 1rem; /* 16px - browser default, accessible minimum */
|
||
--p-lh-base: 1.5;
|
||
--p-ls-base: 0;
|
||
|
||
--p-text-lg: 1.125rem; /* 18px */
|
||
--p-lh-lg: 1.5;
|
||
--p-ls-lg: 0;
|
||
|
||
/* Subheadings: 1.2-1.3 line-height */
|
||
--p-text-xl: 1.25rem; /* 20px = 16 × 1.25 */
|
||
--p-lh-xl: 1.35;
|
||
--p-ls-xl: -0.01em;
|
||
|
||
--p-text-2xl: 1.5rem; /* 24px = 20 × 1.25 */
|
||
--p-lh-2xl: 1.3;
|
||
--p-ls-2xl: -0.01em;
|
||
|
||
/* Headings: 1.1-1.2 line-height, tighter tracking */
|
||
--p-text-3xl: 1.875rem; /* 30px = 24 × 1.25 */
|
||
--p-lh-3xl: 1.2;
|
||
--p-ls-3xl: -0.02em;
|
||
|
||
--p-text-4xl: 2.25rem; /* 36px */
|
||
--p-lh-4xl: 1.15;
|
||
--p-ls-4xl: -0.02em;
|
||
|
||
--p-text-5xl: 3rem; /* 48px */
|
||
--p-lh-5xl: 1.1;
|
||
--p-ls-5xl: -0.025em;
|
||
|
||
/* Animation durations */
|
||
--p-duration-fast: 0.1s;
|
||
--p-duration-normal: 0.2s;
|
||
--p-duration-slow: 0.35s;
|
||
|
||
/* Easing functions */
|
||
--p-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
--p-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
|
||
/* Shadow base */
|
||
--p-shadow-color: 0 0% 0%;
|
||
--p-shadow-strength: 0.06;
|
||
}
|