ATLAS Meridia Style Guide

Web Outlet

Primary outlet for kennypliu.com and related web properties

Breakpoints

sm640px
md768px
lg1024px
xl1280px
2xl1536px

Usage 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>