Free · publicDesign a clear first screen
Internal Design Guides
Design a clear first screen
Turn an unfocused hero into a useful hierarchy of promise, proof and action.
- UI/UX
- Hierarchy
- Copy
Strata UI · Original tutorial · Read on Strata UI
A sharper eye. A better interface.
Practical tutorials and a considered collection of design resources. Read, experiment, and bring what works back to your next build.
28 of 28 resources
Free · publicBuild a type system that survives real copy
Internal Design Guides
Build a type system that survives real copy
Choose readable roles, a restrained scale and sensible fallback behavior.
- Typography
- Tokens
- Responsive
Strata UI · Original tutorial · Read on Strata UI
Free · publicUse semantic colour tokens
Internal Design Guides
Use semantic colour tokens
Separate the palette from meaning and check contrast across interactive states.
- Color
- Tokens
- Accessibility
Strata UI · Original tutorial · Read on Strata UI
Free · publicCreate layouts with content rails
Internal Design Guides
Create layouts with content rails
Use a shared container, spacing rhythm and grid that lets content determine height.
- Layout
- CSS Grid
- Spacing
Strata UI · Original tutorial · Read on Strata UI
Free account requiredGive motion a purpose and a lifecycle
Internal Design Guides
Give motion a purpose and a lifecycle
Design entrances and interactions that remain usable with motion reduced or paused.
- Animation
- React
- Performance
Strata UI · Original tutorial · Read on Strata UI
Free account requiredMake interactions usable without a mouse
Internal Design Guides
Make interactions usable without a mouse
Build keyboard, focus, labeling and error recovery into ordinary components.
- Accessibility
- Forms
- UI/UX
Strata UI · Original tutorial · Read on Strata UI
Free account requiredResponsive design beyond breakpoints
Internal Design Guides
Responsive design beyond breakpoints
Make copy, controls, media and navigation fit at every useful width.
- Responsive
- Mobile
- Testing
Strata UI · Original tutorial · Read on Strata UI
Free account requiredWrite a useful design brief for AI
Internal Design Guides
Write a useful design brief for AI
Supply constraints, reusable patterns and observable acceptance instead of a list of effects.
- AI-assisted Design
- DESIGN.md
- Workflow
Strata UI · Original tutorial · Read on Strata UI
Free · publicAtmospheric Glass DESIGN.md
DESIGN.md & GitHub Resources
Atmospheric Glass DESIGN.md
A public example of tokens and prose for a glass-oriented visual identity.
- DESIGN.md
- Tokens
- Apache-2.0
Google Labs Code · Opens external source
Free · publicAi2 Strata DESIGN.md
DESIGN.md & GitHub Resources
Ai2 Strata DESIGN.md
First-party written design guidance from Ai2; unrelated to Strata UI.
- DESIGN.md
- Design Systems
Allen Institute for AI · Opens external source
Free · publicRome DESIGN.md
DESIGN.md & GitHub Resources
Rome DESIGN.md
A public product design document covering typography, layout and visual conventions.
- DESIGN.md
- Typography
rome-os contributors · Opens external source
Free · publicRadix Primitives
DESIGN.md & GitHub Resources
Radix Primitives
Accessible, unstyled interaction primitives for composing your own interface.
- Components
- Accessibility
- MIT
WorkOS / Radix contributors · Opens external source
Free · publicshadcn/ui
DESIGN.md & GitHub Resources
shadcn/ui
Editable component source and composition patterns for React projects.
- Components
- React
- MIT
shadcn and contributors · Opens external source
Free · publicOpen Props
DESIGN.md & GitHub Resources
Open Props
A reusable collection of CSS custom properties for consistent interfaces.
- Tokens
- CSS
- MIT
Adam Argyle and contributors · Opens external source
Free · publicPrimer React
DESIGN.md & GitHub Resources
Primer React
GitHub’s React implementation of its design system.
- Design Systems
- React
- MIT
GitHub / Primer contributors · Opens external source
Free · publicCarbon Design System
DESIGN.md & GitHub Resources
Carbon Design System
IBM’s open-source components and system foundations.
- Design Systems
- Components
- Apache-2.0
IBM / Carbon contributors · Opens external source
Free · publicReact Spectrum
DESIGN.md & GitHub Resources
React Spectrum
Adobe’s accessible React components and interaction libraries.
- Accessibility
- React
- Apache-2.0
Adobe and contributors · Opens external source
Free · publicHeadless UI
DESIGN.md & GitHub Resources
Headless UI
Unstyled accessible components designed to pair with utility CSS.
- Components
- Tailwind
- MIT
Tailwind Labs · Opens external source
Free · publicAccessible forms
External Design Guides
Accessible forms
Labels, instructions, validation and feedback for usable forms.
- Accessibility
- Forms
W3C Web Accessibility Initiative · Opens external source
Free · publicPage structure
External Design Guides
Page structure
Semantic regions and headings that communicate document organization.
- Accessibility
- Layout
W3C Web Accessibility Initiative · Opens external source
Free · publicLearn responsive design
External Design Guides
Learn responsive design
A structured course on adaptable layouts, typography and media.
- Responsive
- Layout
Google / web.dev · Opens external source
Free · publicRespect reduced motion
External Design Guides
Respect reduced motion
How the prefers-reduced-motion media query reflects visitor preferences.
- Animation
- Accessibility
MDN contributors · Opens external source
Free · publicCarbon typography
External Design Guides
Carbon typography
IBM’s guidance on expressive and productive type roles.
- Typography
- Design Systems
IBM / Carbon · Opens external source
Free · publicSpectrum colour
External Design Guides
Spectrum colour
Adobe’s colour guidance and semantic palette foundations.
- Color
- Tokens
Adobe Spectrum · Opens external source
Free · publicGOV.UK layout
External Design Guides
GOV.UK layout
Practical container, grid and content-width guidance for services.
- Layout
- Responsive
GOV.UK Design System · Opens external source
Free · publicUnderstanding contrast minimum
External Design Guides
Understanding contrast minimum
The rationale and requirements behind WCAG text contrast.
- Color
- Accessibility
W3C Web Accessibility Initiative · Opens external source
Free · publicCSS Grid layout
External Design Guides
CSS Grid layout
The platform reference for two-dimensional CSS layouts.
- CSS Grid
- Layout
MDN contributors · Opens external source
Free · publicDesigning for web accessibility
External Design Guides
Designing for web accessibility
A concise starting point for contrast, controls and clear navigation.
- UI/UX
- Accessibility
W3C Web Accessibility Initiative · Opens external source
Four original tutorials are public; four unlock with a free account. External resources remain the work of their named authors. Links do not grant a license to copy their code, artwork or branding; consult each source’s license. Strata’s tutorials are original writing.