# DESIGN REFERENCE: EgoCX Design System Collection --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://ego.cx/collection/design analysis_timestamp: 2026-07-10T19:00:00Z design_epoch: 2026 accessibility_level: WCAG 2.1 AA mobile_first: true framework_detected: ProcessWire CMS + Custom Frontend design_system_used: EgoCX Design System (custom) core_philosophy: curated collection, reference library, design excellence — a definitive resource for industry-leading interface design systems ``` --- ## BRAND IDENTITY ### Brand Essence ``` A curated collection of production‑grade design.md files documenting the world's most influential interface design systems. Positioned as a definitive reference library for design teams, developers, and AI‑powered interface generation — part of the EgoCX ecosystem. ``` ### Visual Hierarchy Principles ``` - Primary weight: Collection title and system names (largest typography, high contrast) - Secondary weight: Feature highlights and benefits (icons + brief descriptors) - Tertiary weight: System descriptions and metadata (supporting context) - The interface is minimal and editorial — the content is the hero - Trust through curation, precision, and institutional tone ``` ### Emotional Tone ``` Primary emotion: Trust Secondary emotion: Authority Overall mood: Curatorial, precise, institutional — communicates expertise and commitment to design excellence ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family ```yaml name: Inter fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 400, 500, 600, 700 styles_used: normal usage: All text — headings, body, navigation, UI ``` ### Typographic Scale ```yaml display_lg: { size: 3rem, weight: 700, line-height: 1.1, tracking: -0.02em } # 48px display_md: { size: 2.25rem, weight: 700, line-height: 1.15, tracking: -0.01em } # 36px display_sm: { size: 1.75rem, weight: 700, line-height: 1.2, tracking: 0 } # 28px heading: { size: 1.5rem, weight: 600, line-height: 1.3, tracking: 0 } # 24px title: { size: 1.125rem, weight: 600, line-height: 1.4, tracking: 0 } # 18px body: { size: 1rem, weight: 400, line-height: 1.6, tracking: 0 } # 16px body_small: { size: 0.875rem, weight: 400, line-height: 1.5, tracking: 0 } # 14px caption: { size: 0.75rem, weight: 500, line-height: 1.4, tracking: 0.02em } # 12px ``` ### Letter Spacing Classes ```yaml tight: -0.02em to 0 normal: 0 wide: 0.02em ``` --- ## COLOR ARCHITECTURE ### Primary Palette ```yaml primary: { hex: #000000, rgb: (0,0,0), usage: Primary CTAs, headings, brand anchor } primary_active: { hex: #1A1A1A, rgb: (26,26,26), usage: Hover states } primary_disabled: { hex: #CCCCCC, rgb: (204,204,204), usage: Disabled states } ``` ### Canvas & Surfaces ```yaml canvas: { hex: #FFFFFF, rgb: (255,255,255), usage: Default page background } surface_soft: { hex: #F8F9FA, rgb: (248,249,250), usage: Subtle surfaces, cards } surface_card: { hex: #FFFFFF, rgb: (255,255,255), usage: Cards with border } hairline: { hex: #E5E7EB, rgb: (229,231,235), usage: Borders, dividers } ``` ### Text Colors ```yaml ink: { hex: #000000, rgb: (0,0,0), usage: Primary text, headings } body: { hex: #374151, rgb: (55,65,81), usage: Body text } muted: { hex: #6B7280, rgb: (107,114,128), usage: Secondary text, metadata } muted_soft: { hex: #9CA3AF, rgb: (156,163,175), usage: Disabled text, fine print } on_primary: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on primary buttons } ``` ### Accent Color ```yaml accent_blue: { hex: #3B82F6, rgb: (59,130,246), usage: Links, highlights, subtle accents } accent_blue_hover: { hex: #2563EB, rgb: (37,99,235), usage: Hover states for links } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 15.4:1 (white on #000000) text_on_canvas: 15.4:1 (#000000 on #FFFFFF) text_on_surface: 12.1:1 (#000000 on #F8F9FA) color_harmony: monochromatic (black + white with single blue accent) accessibility_compliance: fully_compliant ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 4px scaling_factor: 1.25 ``` ### Spacing Scale ```yaml spacing_xs: { value: 4px, usage: Tiny gaps } spacing_sm: { value: 8px, usage: Small paddings } spacing_md: { value: 12px, usage: Element gaps } spacing_lg: { value: 16px, usage: Standard spacing } spacing_xl: { value: 20px, usage: Medium spacing } spacing_xxl: { value: 24px, usage: Large spacing } spacing_xxxl: { value: 32px, usage: Section spacing } spacing_section: { value: 64px, usage: Major section spacing } ``` ### Breakpoints ```yaml mobile: { min: 0px, max: 768px, columns: 4, gutter: 16px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 20px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 24px } wide: { min: 1441px, max: 1920px, columns: 12, gutter: 32px } ``` ### Container Widths ```yaml default: { max_width: 1280px, padding: 24px } narrow: { max_width: 800px, padding: 24px } full: { max_width: 100%, padding: 0 } ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Page Header ```yaml type: horizontal position: static height: 64px background: #FFFFFF alignment: left (logo + brand) / right (actions) components: - logo: { size: 32px, link to home } - actions: [Search, Menu] ``` ### Cards & Containers #### System Card ```yaml background: #FFFFFF (surface_card) border: 1px solid #E5E7EB (hairline) rounded: 12px padding: 20px components: - name: { typography: title, weight: 600 } - description: { typography: body_small } - metadata: { typography: caption, color: muted } ``` #### Feature Block ```yaml background: transparent padding: 16px 0 components: - icon: { size: 24px } - title: { typography: heading } - description: { typography: body } ``` ### Footer ```yaml background: #F8F9FA (surface_soft) text: #6B7280 (muted) padding: 48px vertical components: - copyright: { typography: caption } - links: [social, about, contact] ``` --- ## LAYOUT PATTERNS ### Page Structure ```yaml collection_page: - header: { logo + brand, actions } - hero: { display_md, subhead, centered } - features: { 3-column grid, feature blocks } - about: { brief description, call to action } - footer: { copyright, legal, links } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: center } feature_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 24px } ``` ### Section Patterns ```yaml hero: { height: auto, alignment: center, bg: #FFFFFF } features: { columns: 3, alignment: center, card_variant: feature } about: { layout: centered, bg: #FFFFFF } footer: { layout: centered, bg: #F8F9FA } ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 100ms fast: 150ms default: 200ms slow: 300ms macro: 500ms ``` ### Hover States ```yaml lift: { value: -2px, duration: 150ms } color_shift: { speed: 150ms } underline: { style: solid, duration: 150ms } ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: Emoji icons + custom SVG style: outline (primary) size: small: 16px, medium: 20px, large: 24px color: inherit ``` ### Brand Mark ```yaml type: EgoCX — Minicode expansion display: Full brand name in text ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,
,
,