OKLCH Colors
Perceptually uniform colors with Display P3 wide gamut support and accessibility by design.
Build Modern Websites Faster
A standards-based CSS framework leveraging OKLCH colors, container queries, and semantic HTML for 2026 and beyond.
Modern Web Standards
Container Queries
Components adapt to their container, not the viewport. True portability and reusability.
Semantic HTML
Atoms layer styles semantic HTML directly. No class soup, maximum accessibility.
AI-Friendly
Predictable, machine-readable patterns. Built for the AI-native web of 2026.
Component Examples
Buttons
Alerts
Success! Your changes have been saved successfully.
Warning! Please review the following items before proceeding.
Error! Unable to process your request. Please try again.
Info: New features are available in this release.
Forms
Accordion (Native Details)
What is html.style?
html.style is a modern CSS framework built on web standards like OKLCH colors, container queries, and semantic HTML. It's designed for the AI-native web of 2026.
How do I get started?
Simply include the html.style.css file in your project and start writing semantic HTML. The framework handles styling automatically.
Is it production-ready?
Yes! html.style leverages features that have reached baseline support in modern browsers (2026 support matrix).
Layout Primitives
Stack (Vertical)
Item 1
Item 2
Item 3
Cluster (Horizontal Wrap)
Item 1
Item 2
Item 3
Item 4
Item 5
Typography
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
This is a paragraph with strong text, emphasized text, and a link. The text wraps beautifully with a maximum width of 70 characters for optimal readability.
This is small text for captions and disclaimers.
Inline code looks like const foo = 'bar'; and code blocks look like:
function greet(name) {
return `Hello, ${name}!`;
}