Skip to main content

Design System References

Real-world design systems from Component Gallery (95 systems, 2680 examples). Use for documentation best practices and pattern references.

Enterprise-Grade​

SystemTech StackStrengthsURL
Elastic UIReact, CSS-in-JSData-heavy, enterprise dashboardshttps://eui.elastic.co/
Red Hat PatternFlyWeb ComponentsEnterprise Linux, accessibilityhttps://ux.redhat.com/
MorningstarVueFinancial data, chartinghttps://design.morningstar.com/systems/product
Sainsbury'sReact, SassRetail, comprehensivehttps://design-systems.sainsburys.co.uk/

Accessibility-First​

SystemTech StackStrengthsURL
AriakitReactAccessibility primitiveshttps://ariakit.org/
Radix UIReactUnstyled, accessiblehttps://radix-ui.com/

Modern/Tailwind-Native​

SystemTech StackStrengthsURL
HeroUIReact, TailwindBeautiful defaultshttps://www.heroui.com/
shadcn/uiReact, TailwindCopy-paste componentshttps://ui.shadcn.com/
Neobrutalism.devReact, Tailwind, shadcnNeobrutalist varianthttps://www.neobrutalism.dev/

Framework-Agnostic​

SystemTech StackStrengthsURL
Web AwesomeWeb ComponentsWorks everywherehttps://webawesome.com/
ShoelaceWeb ComponentsModern primitiveshttps://shoelace.style/

Documentation Patterns​

Elastic UI Documentation Structure​

Best for: Enterprise systems, data-heavy components

Overview
├── Getting Started
├── Installation
├── Theming
└── Accessibility

Components
├── Layout
│   ├── Grid
│   ├── Flex
│   └── Spacer
├── Display
│   ├── Avatar
│   ├── Badge
│   └── Card
├── Forms
│   ├── Button
│   ├── Input
│   └── Select
└── Data Display
    ├── Table
    ├── List
    └── Tree

Patterns
├── Dashboard Layouts
├── Form Patterns
└── Data Loading

Utilities
├── Colors
├── Sizing
└── Animation

shadcn/ui Documentation Structure​

Best for: Modern component libraries, developer-focused

Introduction
├── Installation
├── Configuration
├── Dark Mode
└── Typography

Components (alphabetical)
├── Accordion
├── Alert
├── Avatar
├── Badge
...
└── Tooltip

Themes
├── Default
├── New York
└── Creating Themes

Examples
├── Dashboard
├── Cards
├── Authentication
└── Forms

Award-Winning Sites for Reference​

From Awwwards UI Design category (crawled 2026-01-31):

SiteSpecialtyNotable For
Snowflake StudioAgencyClean transitions
Hemi NetworkWeb3Gradient mastery
Gielly GreenE-commerceElegant product display
Voku.StudioPortfolioTypography excellence
Jesko JetsLuxuryScroll storytelling
ChromiaBlockchainData visualization

What Award-Winners Do Well​

Typography

  • Custom fonts or striking pairings
  • Generous line-height for readability
  • Scale contrast between headlines and body

Animation

  • Scroll-driven reveals (not random movement)
  • Micro-interactions on hover/focus
  • Page transitions that feel intentional

Color

  • Limited palettes (3-5 colors max)
  • Strategic use of accent color
  • Consistent application across states

Framer Template Categories​

Template marketplace data for understanding market segments:

CategoryCountPrice Range
Business2,900Free - $79
Creative1,700Free - $79
Style2,300Free - $49
Free1,400Free
Community213Varies

Business Templates

  • Hero with CTA and social proof
  • Feature grid (3-4 columns)
  • Testimonial carousel
  • Pricing table
  • FAQ accordion
  • Newsletter signup footer

Creative Templates

  • Full-screen hero with video/animation
  • Project grid (masonry or bento)
  • About with team photos
  • Process/timeline visualization
  • Contact form

Documentation Best Practices​

From Elastic UI​

Do:

  • Show component in all states (default, hover, focus, disabled, error)
  • Include "When to use" and "When not to use" sections
  • Provide copy-paste code snippets
  • Document all props with types and defaults
  • Show responsive behavior

Avoid:

  • Documenting internal implementation details
  • Showing every possible prop combination
  • Using placeholder text that doesn't represent real usage

From shadcn/ui​

Do:

  • Lead with a visual example
  • Show installation command prominently
  • Include multiple usage examples
  • Document customization via className/variants
  • Link to related components

Avoid:

  • Hiding the code behind tabs initially
  • Over-explaining obvious props
  • Documenting CSS classes instead of semantic usage

From Ariakit​

Do:

  • Lead with accessibility requirements
  • Show keyboard navigation patterns
  • Document ARIA attributes and their effects
  • Include screen reader testing notes
  • Provide focus management examples

Avoid:

  • Assuming visual-only usage
  • Ignoring reduced-motion preferences
  • Using color alone to convey state

Reference counts when documenting coverage:

Component TypeSystems ImplementingExamples
CarouselHigh60+
Tree viewMedium40+
PopoverHigh70+
RatingMedium35+
AccordionHigh80+
QuoteLow20+
PaginationHigh75+
TabsHigh90+

Use these stats to:

  • Prioritize documentation (high-count = common need)
  • Reference established patterns (link to similar implementations)
  • Identify gaps (low-count = opportunity for innovation)

Documentation Deliverables Checklist​

When documenting a design system:

Tokens Documentation​

  • Color palette with hex values and usage
  • Typography scale with font stacks
  • Spacing scale with rem/px values
  • Shadow definitions
  • Border radius values
  • Animation timing/easing
  • Breakpoint definitions

Component Documentation​

  • Visual preview of all variants
  • Props table with types
  • Usage examples (code + preview)
  • Accessibility notes
  • Keyboard navigation
  • Mobile considerations
  • Related components

Pattern Documentation​

  • When to use pattern
  • Layout requirements
  • Component composition
  • Responsive behavior
  • Edge cases

Getting Started​

  • Installation (npm/yarn/pnpm)
  • Configuration (tailwind.config, etc.)
  • First component example
  • Theming setup
  • Dark mode setup