Display
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6 / Overline
Left Underline
A heading with accent underline aligned to the left for section titles.
Center Underline
Perfect for centered section headings and hero titles.
Overline Label
With Overline
Overline + heading combo for a modern editorial feel.
Accent Gradient
Warm Sunset Gradient
Ocean Breeze Gradient
Gradients adapt to your accent color. Use them for hero headings, key phrases, or emphasis.
Typewriter Effect
Building the future, one line at a time.
Glow Pulse
Glowing Innovation
Slide Up Reveal
Revealed on Load
Underline Highlight
This text has a beautiful accent underline that draws attention to key phrases.
Solid Badge
Use the solid highlight for maximum emphasis on critical words.
Marker Style
The marker highlight mimics a real highlighter pen for a natural look.
Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs
The best way to predict the future is to invent it.
— Alan Kay
Simplicity is the ultimate sophistication.
— Leonardo da Vinci
This is a lead paragraph. It introduces a section with larger, lighter text that provides context and draws the reader in before the main content begins.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
The Art of Design Systems
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It serves as the single source of truth for an organization's digital products.
When implemented correctly, a design system accelerates the design and development process, ensures consistency across products, and creates a shared language between designers and developers. It reduces redundancy and empowers teams to focus on solving complex problems rather than reinventing the wheel.
The best design systems evolve over time. They start simple and grow with the needs of the team. They are documented, accessible, and flexible enough to adapt to new requirements without breaking existing implementations.
Use var(--brix-accent) for your accent color and .brix-btn-primary for buttons. Apply the theme with class="brix-light brix-blue" on the body tag.
<!-- BRIX Component Example -->
<header class="brix-header">
<div class="brix-header-inner">
<a href="#" class="brix-logo">Brand</a>
<nav class="brix-nav-desktop">...</nav>
</div>
</header>
Building Modern Interfaces
The evolution of web design has brought us from static pages to dynamic, interactive experiences. Today's interfaces must be responsive, accessible, and performant. With component libraries like BRIX, developers can focus on what matters most — the user experience — while leveraging pre-built, tested patterns for common UI needs.
Each component is crafted with attention to detail: smooth animations, proper spacing, accessible markup, and full theme support. This means your project looks polished from day one, without hours of CSS tweaking.
Hover over these links to see the animated underline effect:
Font Weights
Light (300) — Elegant and airy
Regular (400) — Body text default
Medium (500) — Subtle emphasis
Semibold (600) — Sub-headings
Bold (700) — Headings
Extra Bold (800) — Display
Letter Spacing
Tight tracking (-0.03em) — Headlines
Normal tracking (0) — Body text
Wide tracking (0.1em) — Labels
Wider tracking (0.2em) — Logos
Special Styles
Italic — For emphasis and quotes
Strikethrough — Deleted content
Custom underline — Accent color