A comprehensive, authoritative reference library for modern web design theory, visual styles, technical standards, and cutting-edge browser features.
This repository contains four master documents that together form a complete reference library for web designers, developers, and architects. Each document serves a distinct purpose and audience, covering everything from foundational design theory to bleeding-edge browser capabilities.
| File | Size | Focus | Audience |
|---|---|---|---|
| 01 | 98 KB | Design theory, color, typography, spacing | Designers + Developers |
| 02 | 107 KB | Design styles, systems, methodologies, psychology | Senior Designers, Architects |
| 03 | 231 KB | Standards compliance, WCAG, SEO, performance | Technical Leads, Accessibility Specialists |
| 04 | 85 KB | Cutting-edge HTML/CSS/JS features (2025–2026) | Developers, AI Education |
Subtitle: The Complete Guide to Color, Typography, Spacing & Admin/Frontend Design
What It Covers:
- 🎨 Visual Hierarchy — Attention management, balance, contrast, alignment, Gestalt principles
- 🧠 Eye-Tracking Patterns — F-pattern, Z-pattern, scanning behavior
- 🌈 Color Theory — Color wheel, models (RGB/HSL/OKLCH), harmony, psychology, 60-30-10 rule
- 🎭 Light & Dark Mode — Complete palettes with contrast ratios, dark mode best practices
- 🔤 Typography — Modular scales, line-height, font pairing, fluid typography with
clamp() - 📐 Spacing & Grid — 8pt grid system, CSS Grid, breakpoints, responsive design
- 🖥️ Admin vs. Frontend — Fundamental differences, layout patterns, component design
- ♿ Accessibility — WCAG 2.2 compliance, focus states, ARIA patterns
- 🧪 Testing & QA — Automated testing, component-level validation
Best For:
- Learning design fundamentals from scratch
- Building admin templates or dashboards
- Creating marketing/landing pages
- Understanding color theory and typography systems
Start Here If: You're a designer or developer who wants to understand why designs work, not just how to build them.
Subtitle: Complete Reference to Visual Styles, Design Systems & Methodologies
What It Covers:
- 📜 Historical Timeline — Bauhaus (1919) → Modern Adaptive UI (2025–2026)
- 🎨 20+ Design Styles — Deep dives into each:
- Skeuomorphism, Flat Design, Material Design
- Glassmorphism, Neumorphism, Claymorphism
- Brutalism, Neobrutalism
- Aurora UI, Bento Box Layouts
- And 10+ more...
- 🏗️ Design Systems — Material, Fluent, Carbon, Human Interface, Ant Design, etc.
- 🔧 Methodologies — Atomic Design, BEM, ITCSS, Design Tokens
- 🧠 Psychology of Design — Hick's Law, Fitt's Law, aesthetic-usability effect
- ♿ Accessibility & Inclusive Design
- 🚀 Emerging Trends — AI-driven UI, generative interfaces, adaptive design
- 📊 Decision Frameworks — How to choose styles/systems for your project
Best For:
- Senior designers making style decisions
- Design system architects
- Understanding the "why" behind design trends
- Comparing different design systems before adoption
Start Here If: You need to choose a design style or system for a project, or want to understand the history and psychology behind modern design trends.
Subtitle: Master Reference for WCAG, ARIA, SEO, Performance & Web Standards
What It Covers:
- ♿ WCAG 2.2 Compliance — Principles, levels, success criteria, contrast formulas
- 🎯 Core Web Vitals — LCP, INP, CLS optimization strategies
- 🏛️ ARIA Complete Reference — Roles, states, properties, patterns with code examples
- 🔍 SEO & Meta Tags — Open Graph, Twitter Cards, canonicalization, structured data
- 📦 JSON-LD Structured Data — Organization, Article, Product, LocalBusiness schemas
- 🚫 Deprecated Patterns — Obsolete HTML elements/attributes, what to avoid
- 🎨 CSS Modern Replacements — Float → Flexbox → Grid evolution
- ⚡ Performance Optimization — Resource hints, critical CSS, image optimization
- 👁️ Observer APIs — IntersectionObserver, ResizeObserver, MutationObserver
- ✅ Pre-Launch Checklists — Complete testing and auditing guides
Best For:
- Technical leads ensuring compliance
- Accessibility specialists
- Performance engineers
- SEO specialists
Start Here If: You need to ensure your website meets WCAG standards, ranks well in search engines, or loads blazing fast.
Subtitle: Cutting-Edge HTML, CSS & JavaScript Features Most AIs Don't Know About
What It Covers:
- 🎨 Modern CSS Architecture —
@layer,@scope, container queries, cascade layers - 📐 CSS Mathematics — Trigonometry (
sin,cos,tan),clamp(),round(),mod() - 🎬 Scroll-Driven Animations —
animation-timeline: scroll(),view()timelines - 🎭 Advanced Selectors —
:has(),:is(),:where(),:focus-visible - 🌈 Color Spaces — OKLCH,
color-mix(),light-dark(), Relative Color Syntax - 📝 Typography —
text-box-trim,corner-shape, fluid sizing - ⚡ Modern JavaScript — Temporal API, Set methods, Iterator helpers, Pattern Matching
- 🎮 WebGPU — Next-gen graphics API (successor to WebGL)
- 📁 File System Access API — Native file read/write operations
- 🧩 ES2025/2026 Features — Record & Tuple, Pipeline Operator,
usingkeyword, Import Attributes - 📊 Browser Support Matrix — Complete compatibility tables for all features
Best For:
- AI Education — Paste relevant sections into AI prompts to get modern solutions
- Developers wanting to use cutting-edge features
- Building framework-free, native web apps
- Replacing jQuery, Bootstrap, and other legacy dependencies
How to Use with AI:
I'm building a [component/feature]. Before suggesting solutions,
review this context about modern browser capabilities:
[Paste relevant section from 04-modern-features-2026.md]
Now suggest a solution using native 2025–2026 browser features,
avoiding jQuery, Bootstrap, or other legacy dependencies.
Start Here If: You're frustrated with AI suggesting outdated solutions, or you want to build modern, dependency-free web apps.
┌─────────────────────────────────────────────────────────────┐
│ Project Requirements │
└─────────────────────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ 02-design-styles-systems.md │
│ → Choose visual style & design system │
└────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ 01-design-theory-practice.md │
│ → Apply color, type, spacing rules │
└────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ 03-standards-compliance.md │
│ → Ensure WCAG, SEO, performance │
└────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────┐
│ 04-modern-features-2026.md │
│ → Implement with cutting-edge features│
└────────────────────────────────────────┘
│
▼
🎉 Modern, Compliant Website
- Start with 01-design-theory-practice.md for fundamentals
- Reference 02-design-styles-systems.md for style decisions
- Use 03-standards-compliance.md for accessibility requirements
- Start with 04-modern-features-2026.md for modern implementation patterns
- Reference 03-standards-compliance.md for standards compliance
- Use 01-design-theory-practice.md for design collaboration
- Copy relevant sections from 04-modern-features-2026.md
- Paste into your AI chat as context
- Request solutions using modern native features
- Read 02-design-styles-systems.md for comprehensive overview
- Reference 01-design-theory-practice.md for token architecture
- Use 03-standards-compliance.md for compliance requirements
| File | Lines | Sections | Last Updated |
|---|---|---|---|
01-design-theory-practice.md |
~1,925 | 12 major sections | March 2026 |
02-design-styles-systems.md |
~1,974 | 9 parts, 40+ subsections | March 2026 |
03-standards-compliance.md |
~5,704 | 20 major sections | March 2026 |
04-modern-features-2026.md |
~2,340 | 36 sections | March 2026 |
Total Repository: ~11,943 lines, ~100+ sections
- 01 → Section 8 (Admin Template Design)
- 01 → Section 5 (Color Theory for Data)
- 03 → Section 10 (CSS Modern Patterns)
- 04 → Section 18 (CSS Architecture with
@layer)
- 01 → Section 9 (Frontend/Marketing Design)
- 01 → Section 4 (Eye-Tracking Patterns)
- 03 → Section 8 (SEO & Meta Tags)
- 04 → Section 6 (Scroll-Driven Animations)
- 03 → Section 2 (WCAG 2.2)
- 03 → Section 6 (ARIA Patterns)
- 03 → Section 7 (Accessibility Deep Dive)
- 01 → Section 10 (Accessibility Fundamentals)
- 04 → Copy relevant feature sections
- Paste into AI prompt as context
- Request native 2025–2026 solutions
- Verify against 03 for compliance
| Version | Date | Changes |
|---|---|---|
| 2026.1 | March 2026 | Initial consolidation, renamed files, added README |
| 2025.4 | January 2026 | Added ES2026 features, WebGPU, File System API |
| 2025.3 | November 2025 | Added Pattern Matching, Record & Tuple |
| 2025.2 | September 2025 | Added Browser Support Matrix |
| 2025.1 | June 2025 | Initial compilation |
- MDN Web Docs
- WCAG 2.2 Guidelines
- WebAIM Contrast Checker
- Can I Use — Browser compatibility
- Design Tokens Community
This repository is provided as-is for educational and professional reference purposes. All content is compiled from publicly available industry standards, documentation, and best practices.
- Don't read cover-to-cover — Use as a reference. Jump to relevant sections.
- Bookmark frequently used sections — Color contrast formulas, ARIA patterns, browser support tables.
- Use search (Ctrl+F) — All documents are searchable for quick lookups.
- Combine documents — Real projects need theory + styles + standards + implementation.
- Update regularly — Web standards evolve. Check for updates quarterly.
Last Updated: March 2026
Total Content: ~521 KB, ~11,943 lines
Estimated Reading Time: 40–60 hours (full library)
🎨 Design Theory · 🎯 Design Styles · 📐 Standards · ⚡ Modern Features
Your complete reference for modern web design & development