Semantic classes, tokens, and examples
Success messages, completed states, positive metrics
Errors, destructive actions, critical alerts
Information, links, secondary actions
Caution, pending states, attention needed
All components should follow the section + container pattern for consistency and flexibility.
// Option 1: Using SectionWrapper (Recommended)
import { SectionWrapper } from "../section-wrapper";
export default function MyComponent({ children, className = "" }) {
return (
<SectionWrapper className={className}>
{/* Component content */}
{children}
</SectionWrapper>
);
}
// Option 2: Manual structure
export default function MyComponent({ children, className = "" }) {
return (
<section className={`w-full ${className}`}>
<div className="container">
{/* Component content */}
{children}
</div>
</section>
);
}// Standard usage
<MyComponent>Content</MyComponent>
// Custom styling
<MyComponent className="bg-gray-100 py-16">Content</MyComponent>
// Full-width override
<SectionWrapper contained={false} className="bg-brand">
<FullWidthContent />
</SectionWrapper>
// Custom container
<SectionWrapper containerClassName="max-w-4xl">
<NarrowContent />
</SectionWrapper>Space Grotesk: All headings (h1-h6) for modern, clean typography
DM Sans: Body text, labels, and general content for readability
Azeret Mono: KPIs, metrics, and numbers for emphasis and data visualization
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>Body paragraph using default p styling. This is the standard body text style for content.
<p>Body paragraph using default p styling.</p><div className="kpi-value">99.9%</div>
<div className="kpi-label">Uptime</div>
<div className="stat-number">1M+</div>
<div className="stat-label">Active Users</div><button className="btn btn-purple">Primary Brand</button>
<button className="btn btn-orange">Accent</button>
<button className="btn btn-red">Red</button>
<button className="btn btn-blue">Blue</button>
<button className="btn btn-green">Green</button>
<button className="btn btn-black">Neutral</button><button className="btn btn-success">Success</button>
<button className="btn btn-danger">Danger</button>
<button className="btn btn-warning">Warning</button>
<button className="btn btn-info">Info</button>Recommended: Use the Button component for consistency
import Button from 'components/button';
<Button
buttonColor="purple"
buttonClassNames="!px-6 !py-3"
href="/example"
>
Button Component
</Button>buttonClassNames (e.g., !px-6 !py-3).buttonColor variants to map intent; avoid hard-coded colors.<span className="chip chip-neutral">Neutral</span>
<span className="chip chip-primary">Primary</span>
<span className="chip chip-success">Success</span>
<span className="chip chip-danger">Danger</span>
<span className="chip chip-warning">Warning</span><span className="badge badge-neutral">Neutral</span>
<span className="badge badge-primary">Primary</span>
<span className="badge badge-success">Success</span>
<span className="badge badge-danger">Danger</span>
<span className="badge badge-warning">Warning</span>group-hover:bg-brand on the parent when you need a hover accent.Base card with rounded-card and shadow-elev-1.
Adds translate and shadow-elev-2 on hover.
For subtle sections and icon containers.
<div className="card p-6">
<h3 className="mb-2">Card</h3>
<p className="text-gray">Base card with rounded-card and shadow-elev-1.</p>
</div>
<div className="card card-hoverable p-6">
<h3 className="mb-2">Hoverable</h3>
<p className="text-gray">Adds translate and shadow-elev-2 on hover.</p>
</div>
<div className="surface-muted rounded-card p-6">
<h3 className="mb-2">Muted Surface</h3>
<p className="text-gray">For subtle sections and icon containers.</p>
</div><a href="#" className="nav-link">Nav link</a>
<a href="#" className="nav-link focus-ring">Focusable link</a>
<a href="#" className="rl-link">Rich text link</a>components/button.tsx: Primary/secondary CTAs. Use btn + color variants.nav-link + focus-ring. Do not re-style anchors.card, card-hoverable, surface-muted.chip-*, badge-* utilities.StyledPortableText or StyledPortableTextBlogs.rl-prose-* utilities.navLink.tsx, navLink-with-dropdown.tsx.sticky-navigation.tsx with nav-link and text-brand active state.Deprecations: Avoid creating new ad-hoc variants of buttons/cards. Prefer extending semantic utilities if a new pattern is needed.