# DESIGN REFERENCE: soy.cx --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://soy.cx analysis_timestamp: 2026-07-10T14:30:00Z design_epoch: 2025/Summer accessibility_level: WCAG 2.1 AA mobile_first: true framework_detected: Vanilla (custom CSS + minimal JS) design_system_used: Custom (atomic-ish, utility-first) core_philosophy: minimalist, content‑first, with subtle personality ``` --- ## BRAND IDENTITY ### Brand Essence ``` Personal portfolio and blog – clean, reflective, and quietly confident. ``` ### Visual Hierarchy Principles ``` - Primary weight: Hero headline and featured work (largest typography, high contrast) - Secondary weight: Section titles and card headings (moderate size, distinct color) - Tertiary weight: Body text, meta data, and navigation (smallest, neutral) - Whitespace is used generously to direct focus to key content ``` ### Emotional Tone ``` Primary emotion: Calm Secondary emotion: Trust Overall mood: Contemplative, understated elegance ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family ```yaml name: Inter fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 300, 400, 500, 600, 700 styles_used: normal, italic (rare) usage: Headings, body, navigation, UI elements ``` ### Secondary Font Family ```yaml name: JetBrains Mono (for code snippets and technical highlights) fallback: "Cascadia Code", "Fira Code", monospace weights_used: 400, 500 styles_used: normal usage: Inline code, preformatted blocks, technical labels ``` ### Typographic Scale ```yaml heading_1: { size: 3.5rem, weight: 600, line-height: 1.1, tracking: -0.02em } heading_2: { size: 2.5rem, weight: 600, line-height: 1.2, tracking: -0.01em } heading_3: { size: 1.75rem, weight: 500, line-height: 1.3, tracking: 0 } heading_4: { size: 1.25rem, weight: 500, line-height: 1.4, tracking: 0 } body_large: { size: 1.125rem, weight: 400, line-height: 1.6, tracking: 0 } body_default: { size: 1rem, weight: 400, line-height: 1.6, tracking: 0 } body_small: { size: 0.875rem, weight: 400, line-height: 1.5, tracking: 0 } caption: { size: 0.75rem, weight: 400, line-height: 1.4, tracking: 0.02em } ``` ### Letter Spacing Classes ```yaml tight: -0.02em normal: 0 wide: 0.05em ``` --- ## COLOR ARCHITECTURE ### Primary Palette ```yaml primary_100: { hex: #F9FAFB, rgb: (249,250,251), usage: Page backgrounds, light surfaces } primary_200: { hex: #F3F4F6, rgb: (243,244,246), usage: Card backgrounds, section dividers } primary_300: { hex: #E5E7EB, rgb: (229,231,235), usage: Borders, subtle separators } primary_400: { hex: #9CA3AF, rgb: (156,163,175), usage: Secondary text, icons, placeholders } primary_500: { hex: #6B7280, rgb: (107,114,128), usage: Body text, default icons } primary_600: { hex: #4B5563, rgb: (75,85,99), usage: High‑emphasis text, headings } primary_700: { hex: #1F2937, rgb: (31,41,55), usage: Primary headings, dark UI elements } ``` ### Secondary Palette (Accent) ```yaml secondary_100: { hex: #E0F2FE, rgb: (224,242,254), usage: Accent backgrounds (light) } secondary_200: { hex: #BAE6FD, rgb: (186,230,253), usage: Hover states for accent } secondary_300: { hex: #7DD3FC, rgb: (125,211,252), usage: Borders for accent elements } secondary_400: { hex: #38BDF8, rgb: (56,189,248), usage: Accent text, links } secondary_500: { hex: #0EA5E9, rgb: (14,165,233), usage: Primary accent (buttons, active states) } ``` ### Accent Colors ```yaml success: { hex: #10B981, rgb: (16,185,129), usage: Success messages, form validation } warning: { hex: #F59E0B, rgb: (245,158,11), usage: Warning notices } error: { hex: #EF4444, rgb: (239,68,68), usage: Error states, destructive actions } info: { hex: #3B82F6, rgb: (59,130,246), usage: Informational banners } highlight: { hex: #FCD34D, rgb: (252,211,77), usage: Pull quotes, special callouts } ``` ### Neutral Scale ```yaml white: { hex: #FFFFFF, rgb: (255,255,255), usage: Backgrounds, text on dark } gray_100: { hex: #F9FAFB, rgb: (249,250,251), usage: Section backgrounds } gray_200: { hex: #F3F4F6, rgb: (243,244,246), usage: Card backgrounds } gray_300: { hex: #E5E7EB, rgb: (229,231,235), usage: Dividers, borders } gray_400: { hex: #9CA3AF, rgb: (156,163,175), usage: Secondary text, disabled } gray_500: { hex: #6B7280, rgb: (107,114,128), usage: Body text } gray_600: { hex: #4B5563, rgb: (75,85,99), usage: High‑emphasis text } gray_700: { hex: #1F2937, rgb: (31,41,55), usage: Heading text, dark backgrounds } black: { hex: #111827, rgb: (17,24,39), usage: Darkest elements, contrast text } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 12.6:1 (white on #1F2937) text_on_secondary: 4.5:1 (#1F2937 on #E0F2FE) text_on_light: 4.8:1 (#1F2937 on #F9FAFB) text_on_dark: 14.5:1 (white on #111827) color_harmony: analogous (blue‑gray base with warm blue accent) accessibility_compliance: fully_compliant ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 8px scaling_factor: 1.5 ``` ### Spacing Scale ```yaml spacing_0: { value: 0px, usage: No spacing } spacing_1: { value: 2px, usage: Tiny gaps (icons near text) } spacing_2: { value: 4px, usage: Small paddings (badges) } spacing_3: { value: 8px, usage: Element gaps (between icon and label) } spacing_4: { value: 16px, usage: Standard spacing (card padding, list gaps) } spacing_5: { value: 24px, usage: Medium spacing (section internal) } spacing_6: { value: 32px, usage: Large spacing (between sections) } spacing_7: { value: 48px, usage: XL spacing (page padding) } spacing_8: { value: 64px, usage: Section spacing (hero to content) } spacing_9: { value: 96px, usage: Hero spacing (top/bottom margins) } spacing_10: { value: 128px, usage: Page margins (wide screens) } ``` ### Breakpoints ```yaml mobile_portrait: { min: 0px, max: 480px, columns: 4, gutter: 16px } mobile_landscape: { min: 481px, max: 768px, columns: 6, gutter: 24px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 32px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 32px } widescreen: { min: 1441px, max: 1920px, columns: 12, gutter: 40px } ultrawide: { min: 1921px, columns: 16, gutter: 48px } ``` ### Container Widths (Modified for Character) ```yaml narrow: { max_width: 640px, padding: 16px } # Used for blog posts, prose default: { max_width: 880px, padding: 24px } # Primary content width – reduced from 1200px for a more refined reading experience wide: { max_width: 1120px, padding: 32px } # Occasional full‑width sections full: { max_width: 100%, padding: 24px } # Hero, footer, full‑bleed ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Primary Navigation ```yaml type: horizontal (desktop) / hamburger (mobile) position: sticky (top, with backdrop blur) height: 64px background: rgba(255,255,255,0.85) with backdrop-filter: blur(12px) alignment: left (logo) / right (links) submenu_style: none (single‑level) ``` #### Secondary Navigation ```yaml type: breadcrumb (on blog posts) & pagination (on archive) position: below hero, above content style: minimal, with subtle separators ``` ### Button System #### Primary Button ```yaml default: { bg: #0EA5E9, text: #FFFFFF, padding: 12px 24px, radius: 8px } hover: { bg: #0284C7, text: #FFFFFF } # transition: 150ms (faster) active: { bg: #0369A1, text: #FFFFFF } focus: { outline: 2px solid #0EA5E9, offset: 2px } disabled: { bg: #9CA3AF, text: #FFFFFF, opacity: 0.6 } ``` #### Secondary Button ```yaml default: { bg: transparent, text: #1F2937, border: 1px solid #E5E7EB, padding: 12px 24px, radius: 8px } hover: { bg: #F3F4F6, text: #111827, border: #D1D5DB } # 150ms active: { bg: #E5E7EB, text: #111827 } focus: { outline: 2px solid #0EA5E9, offset: 2px } disabled: { opacity: 0.5 } ``` #### Tertiary/Text Button ```yaml default: { bg: transparent, text: #0EA5E9, padding: 4px 8px } hover: { bg: transparent, text: #0284C7, text-decoration: underline } # 150ms active: { text: #0369A1 } focus: { outline: 2px solid #0EA5E9, offset: 2px } disabled: { opacity: 0.4 } ``` #### Button Sizes ```yaml small: { padding: 8px 16px, font_size: 0.875rem, height: 36px } medium: { padding: 12px 24px, font_size: 1rem, height: 48px } # default large: { padding: 16px 32px, font_size: 1.125rem, height: 56px } ``` ### Form Elements #### Input Fields ```yaml default: { bg: #FFFFFF, border: 1px solid #E5E7EB, radius: 8px, padding: 12px 16px } focus: { border: 2px solid #0EA5E9, shadow: 0 0 0 3px rgba(14,165,233,0.2) } error: { border: 2px solid #EF4444, icon: true } success: { border: 2px solid #10B981, icon: true } disabled: { bg: #F3F4F6, opacity: 0.7 } ``` #### Select Menus ```yaml default: { bg: #FFFFFF, border: 1px solid #E5E7EB, radius: 8px, padding: 12px 40px 12px 16px } focus: { border: 2px solid #0EA5E9, shadow: 0 0 0 3px rgba(14,165,233,0.2) } error: { border: 2px solid #EF4444 } disabled: { bg: #F3F4F6, opacity: 0.7 } ``` #### Checkboxes & Radios ```yaml default: { size: 20px, border: 2px solid #D1D5DB, radius: 4px (checkbox) / 50% (radio) } checked: { bg: #0EA5E9, border: #0EA5E9 } focus: { outline: 2px solid #0EA5E9, offset: 2px } disabled: { opacity: 0.5 } ``` ### Cards ```yaml default: { bg: #FFFFFF, border: 1px solid #F3F4F6, radius: 12px, shadow: 0 1px 3px rgba(0,0,0,0.06), padding: 24px } hover: { shadow: 0 8px 30px rgba(0,0,0,0.08), transform: translateY(-2px) } # 150ms variants: - feature: { bg: #F9FAFB, border: none, shadow: none, padding: 32px } - product: { bg: #FFFFFF, border: 1px solid #E5E7EB, radius: 16px, padding: 20px } - testimonial: { bg: #F3F4F6, border: none, radius: 12px, padding: 28px } - blog: { bg: #FFFFFF, border: none, shadow: 0 2px 8px rgba(0,0,0,0.05), padding: 20px } ``` ### Modals/Dialogs ```yaml overlay: { bg: rgba(17,24,39,0.5), opacity: 1, backdrop_blur: 4px } container: { max_width: 560px, bg: #FFFFFF, radius: 16px, padding: 32px, shadow: 0 25px 50px rgba(0,0,0,0.25) } animation: { open: opacity 200ms ease, scale 200ms ease; exit: opacity 150ms ease, scale 150ms ease } ``` ### Tables ```yaml header: { bg: #F3F4F6, text: #1F2937, weight: 600 } row_striping: { even: #F9FAFB, odd: #FFFFFF } borders: { type: separated, width: 1px, color: #E5E7EB } hover: { bg: #F3F4F6 } ``` ### Alerts & Notifications ```yaml success: { bg: #D1FAE5, border: 1px solid #6EE7B7, text: #065F46, icon: check-circle } warning: { bg: #FEF3C7, border: 1px solid #FCD34D, text: #92400E, icon: exclamation-triangle } error: { bg: #FEE2E2, border: 1px solid #FCA5A5, text: #991B1B, icon: x-circle } info: { bg: #E0F2FE, border: 1px solid #7DD3FC, text: #075985, icon: info-circle } position: fixed (bottom‑right), dismissible: true ``` ### Tooltips ```yaml trigger: hover position: top bg: #1F2937, text: #FFFFFF arrow: true delay: 200ms animation: fade 150ms ease ``` ### Progress Indicators ```yaml linear: { height: 4px, bg: #E5E7EB, fill: #0EA5E9, radius: 2px } circular: { size: 40px, stroke: 4px, color: #0EA5E9, bg: #E5E7EB } skeleton: { bg: #E5E7EB, animation: pulse (1.5s ease-in-out infinite) } ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml homepage: - hero_section: { position: top, size: full‑width with 64px padding, content_type: headline + subhead + CTA } - feature_grid: { columns: 3 (desktop), spacing: 32px, card_type: feature } - latest_blog: { columns: 2 (desktop), card_type: blog } - testimonials: { layout: carousel, card_variant: testimonial } - cta_section: { position: before footer, style: centered with accent background } - footer: { columns: 3 (desktop), content: nav links + social + copyright } blog_list: - header: { height: 80px, alignment: left, navigation: primary } - main_content: { width: default container, sidebar: none } - pagination: { centered, numbered } blog_post: - hero: { height: auto, alignment: center, bg: white } - content: { width: narrow container (640px), typography: body_default, with prose styling } - footer: { columns: 3, content: about author + share + comments } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: start } masonry: { columns: 3 (desktop), gap: 24px, order: fixed } # used in portfolio grid dashboard: not used ``` ### Section Patterns ```yaml hero: { height: auto (min 60vh), alignment: center, bg: white with subtle gradient } features: { columns: 3, icons: true, alignment: center } testimonials: { layout: carousel, quote_style: block with attribution } pricing: { cards: 3, featured: middle, toggle: monthly/yearly (static) } faq: { accordion: true, columns: 1 } cta: { layout: centered, bg: #0EA5E9 with white text } ``` ### Content Hierarchy ```yaml reading_pattern: F‑pattern (blog) / Z‑pattern (landing) content_weight_distribution: headline_to_body_ratio: 1:2 image_to_text_ratio: 1:1.5 whitespace_density: generous (30‑40% whitespace) ``` --- ## MOTION & INTERACTION (Optimized for Speed) ### Transition Durations (Reduced from original) ```yaml instant: 30ms # barely perceptible micro: 80ms # hover effects, tooltips fast: 150ms # button states, card hovers – used as primary default: 200ms # page transitions, modal fades slow: 300ms # complex animations, loading macro: 500ms # hero reveal, page load ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_in: cubic-bezier(0.42, 0, 1, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) smooth: cubic-bezier(0.34, 1.56, 0.64, 1) # used sparingly for playful bounces ``` ### Animation Types ```yaml fade: { enter: opacity 200ms ease, exit: opacity 150ms ease } slide: { enter: transform 200ms ease-out, exit: transform 150ms ease-in } scale: { enter: scale 200ms ease-out, exit: scale 150ms ease-in } stagger: { child_delay: 50ms, parent_duration: 300ms } # for lists parallax: { speed: 0.2, direction: vertical } # subtle ``` ### Hover States (All set to 150ms) ```yaml scale: { value: 1.03, duration: 150ms } # cards, buttons lift: { value: -4px, duration: 150ms } # cards underline: { style: solid, duration: 150ms } # links glow: { value: 0 4px 20px rgba(14,165,233,0.3), duration: 150ms } # primary buttons color_shift: { speed: 150ms } # text links ``` ### Scroll Interactions ```yaml reveal: { trigger: on_view, animation: fade + slide-up (200ms) } sticky_nav: { position: sticky, offset: 0 } parallax_sections: { speed: [0.1, 0.05, 0.1] } # hero, mid, footer scroll_progress: { indicator: bar, position: top (thin line) } infinite_scroll: { trigger: load_more (button) } ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: FontAwesome (free) + custom SVG icons style: solid (for UI), outline (for decorative) size: small: 16px, medium: 20px, large: 28px, xl: 40px color: inherit (uses currentColor) stroke_width: 1.5px (for outline icons) corner_style: rounded ``` ### Image Treatment ```yaml default_ratio: 16:9 (blog), 1:1 (portfolio thumbnails), 3:2 (hero) rounded_corners: medium (8px) for cards, large (12px) for hero object_fit: cover (for thumbnails), contain (for diagrams) overlay: { gradient: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4)), opacity: 1 } shadow: { type: drop, value: 0 4px 12px rgba(0,0,0,0.08) } filter: { type: none } # images are naturally sharp ``` ### Video Components ```yaml aspect_ratio: 16:9 controls: standard autoplay: false loop: false muted: false poster: { style: image (first frame) } play_button: { style: circle with accent, position: center } ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [logo, hamburger, hero headline, CTA, content, footer] tablet_priority: [logo, nav links, hero, content, sidebar (if any), footer] desktop_priority: [logo, full nav, hero, featured work, blog, testimonials, footer] ``` ### Collapse Points ```yaml navigation: 768px (hamburger appears) sidebar: none (no sidebar on this site) multi_column_layout: 768px (3 cols → 2 cols → 1 col) accordion_conversion: 480px (FAQ items become accordion) ``` ### Touch Targets ```yaml minimum_size: 44x44px (all interactive elements) spacing_between: 12px tap_feedback: ripple (on buttons), highlight (on cards) ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,