# DESIGN REFERENCE: ego.cx --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://ego.cx analysis_timestamp: 2026-07-10T15:00:00Z design_epoch: 2026 accessibility_level: WCAG 2.1 AA (inferred) mobile_first: true framework_detected: Vanilla (static HTML + minimal CSS) design_system_used: Custom (minimalist landing) core_philosophy: minimalist, direct, trust‑focused ``` --- ## BRAND IDENTITY ### Brand Essence ``` Premium domain marketplace offering .cx branding ecosystem with integrated email and AI tools for professionals and modern brands. ``` ### Visual Hierarchy Principles ``` - Primary weight: Hero headline (largest, high contrast) - Secondary weight: Value proposition sentence (moderate size) - Tertiary weight: Call‑to‑action and additional details - Whitespace is used to create a sense of premium simplicity ``` ### Emotional Tone ``` Primary emotion: Trust Secondary emotion: Ambition Overall mood: Clean, professional, forward‑looking ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family ```yaml name: [Inferred: System UI fonts] fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif weights_used: 400, 600, 700 styles_used: normal usage: Headings, body, navigation ``` ### Secondary Font Family ```yaml name: [None detected] fallback: N/A weights_used: N/A styles_used: N/A usage: N/A ``` ### Typographic Scale ```yaml heading_1: { size: 2.5rem, weight: 700, line-height: 1.2, tracking: -0.02em } heading_2: { size: 1.75rem, weight: 600, line-height: 1.3, tracking: 0 } heading_3: { size: 1.25rem, weight: 600, line-height: 1.4, tracking: 0 } heading_4: { size: 1.125rem, weight: 600, 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: #F8FAFC, rgb: (248,250,252), usage: Page backgrounds } primary_200: { hex: #F1F5F9, rgb: (241,245,249), usage: Card backgrounds, subtle surfaces } primary_300: { hex: #E2E8F0, rgb: (226,232,240), usage: Borders, dividers } primary_400: { hex: #94A3B8, rgb: (148,163,184), usage: Secondary text, icons } primary_500: { hex: #64748B, rgb: (100,116,139), usage: Body text, default icons } primary_600: { hex: #475569, rgb: (71,85,105), usage: High‑emphasis text } primary_700: { hex: #1E293B, rgb: (30,41,59), 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 } warning: { hex: #F59E0B, rgb: (245,158,11), usage: Warning notices } error: { hex: #EF4444, rgb: (239,68,68), usage: Error states } info: { hex: #3B82F6, rgb: (59,130,246), usage: Informational banners } highlight: { hex: #FCD34D, rgb: (252,211,77), usage: Callouts, emphasis } ``` ### Neutral Scale ```yaml white: { hex: #FFFFFF, rgb: (255,255,255), usage: Backgrounds, text on dark } gray_100: { hex: #F8FAFC, rgb: (248,250,252), usage: Section backgrounds } gray_200: { hex: #F1F5F9, rgb: (241,245,249), usage: Card backgrounds } gray_300: { hex: #E2E8F0, rgb: (226,232,240), usage: Dividers, borders } gray_400: { hex: #94A3B8, rgb: (148,163,184), usage: Secondary text, disabled } gray_500: { hex: #64748B, rgb: (100,116,139), usage: Body text } gray_600: { hex: #475569, rgb: (71,85,105), usage: High‑emphasis text } gray_700: { hex: #1E293B, rgb: (30,41,59), usage: Heading text, dark backgrounds } black: { hex: #0F172A, rgb: (15,23,42), usage: Darkest elements, contrast text } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 14.5:1 (white on #1E293B) text_on_secondary: 4.5:1 (#1E293B on #E0F2FE) text_on_light: 6.5:1 (#1E293B on #F8FAFC) text_on_dark: 15.2:1 (white on #0F172A) color_harmony: analogous (slate blue with 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 } spacing_2: { value: 4px, usage: Small paddings } spacing_3: { value: 8px, usage: Element gaps } spacing_4: { value: 16px, usage: Standard spacing } spacing_5: { value: 24px, usage: Medium spacing } spacing_6: { value: 32px, usage: Large spacing } spacing_7: { value: 48px, usage: XL spacing } spacing_8: { value: 64px, usage: Section spacing } spacing_9: { value: 96px, usage: Hero spacing } spacing_10: { value: 128px, usage: Page margins } ``` ### 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 ```yaml narrow: { max_width: 640px, padding: 16px } default: { max_width: 880px, padding: 24px } # premium reading width wide: { max_width: 1120px, padding: 32px } full: { max_width: 100%, padding: 24px } ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Primary Navigation ```yaml type: minimal (single‑level) position: static or sticky top height: 64px background: transparent or white alignment: center or left submenu_style: none ``` ### Button System #### Primary Button ```yaml default: { bg: #0EA5E9, text: #FFFFFF, padding: 12px 28px, radius: 8px } hover: { bg: #0284C7, text: #FFFFFF } active: { bg: #0369A1, text: #FFFFFF } focus: { outline: 2px solid #0EA5E9, offset: 2px } disabled: { bg: #94A3B8, text: #FFFFFF, opacity: 0.6 } ``` #### Secondary Button ```yaml default: { bg: transparent, text: #1E293B, border: 1px solid #E2E8F0, padding: 12px 24px, radius: 8px } hover: { bg: #F1F5F9, text: #0F172A, border: #CBD5E1 } active: { bg: #E2E8F0, text: #0F172A } focus: { outline: 2px solid #0EA5E9, offset: 2px } disabled: { opacity: 0.5 } ``` #### Button Sizes ```yaml small: { padding: 8px 16px, font_size: 0.875rem, height: 36px } medium: { padding: 12px 28px, font_size: 1rem, height: 48px } large: { padding: 16px 36px, font_size: 1.125rem, height: 56px } ``` ### Cards ```yaml default: { bg: #FFFFFF, border: 1px solid #F1F5F9, radius: 12px, shadow: 0 2px 8px rgba(0,0,0,0.05), padding: 24px } hover: { shadow: 0 8px 30px rgba(0,0,0,0.08), transform: translateY(-2px) } variants: - feature: { bg: #F8FAFC, border: none, shadow: none, padding: 32px } - pricing: { bg: #FFFFFF, border: 2px solid #0EA5E9, radius: 16px, padding: 28px } ``` ### Forms ```yaml input: { bg: #FFFFFF, border: 1px solid #E2E8F0, radius: 8px, padding: 12px 16px } input_focus: { border: 2px solid #0EA5E9, shadow: 0 0 0 3px rgba(14,165,233,0.2) } label: { size: 0.875rem, weight: 500, color: #475569 } ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml landing_page: - hero_section: { position: top, size: full‑width, content_type: headline + subhead + CTA } - features: { columns: 3 (desktop), spacing: 32px } - pricing: { cards: 3, featured: middle } - cta_section: { position: before footer, style: centered with accent background } - footer: { columns: 3 (desktop), content: nav links + social + copyright } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: center } ``` ### Section Patterns ```yaml hero: { height: auto (min 50vh), alignment: center, bg: white with subtle gradient } features: { columns: 3, icons: true, alignment: center } pricing: { cards: 3, featured: middle } cta: { layout: centered, bg: #0EA5E9 with white text } ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 150ms fast: 200ms default: 300ms slow: 500ms macro: 750ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) ``` ### Hover States ```yaml scale: { value: 1.03, duration: 150ms } lift: { value: -4px, duration: 150ms } color_shift: { speed: 150ms } ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [hero headline, CTA, features, pricing, footer] tablet_priority: [hero, features, pricing, footer] desktop_priority: [hero, features, pricing, CTA, footer] ``` ### Collapse Points ```yaml multi_column_layout: 768px (3 cols → 2 cols → 1 col) ``` ### Touch Targets ```yaml minimum_size: 44x44px spacing_between: 12px ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,
,