Web Outlet
Primary outlet for kennypliu.com and related web properties
Breakpoints
sm640pxmd768pxlg1024pxxl1280px2xl1536pxUsage Guidelines
The web outlet is the primary application of the ATLAS Meridia design system. All tokens are designed with web usage in mind, with CSS custom properties as the primary output format.
Use the tokens.css file exported from this style guide as the source of truth for your web projects.
Implementation
/* Import in your global CSS */
@import 'tokens.css';
/* Use tokens via CSS custom properties */
.my-component {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-ui);
padding: var(--space-4);
border-radius: var(--border-radius);
transition: var(--transition-base);
}
/* Tailwind usage */
<div className="bg-[--bg-primary] text-[--text-primary]">
...
</div>