Atlas

The shadcn for agent UI. A framework-agnostic design language for dense, AMOLED-black, multi-surface interfaces — dashboards, chat surfaces, autonomous workflow tools, landing pages, mobile apps. One skill for agents, one reference CSS file for humans.

ui.pacifio.dev · Get started · Components · Foundations · Patterns · Mockups · Discord

<link rel="stylesheet" href="colors_and_type.css" />
<button class="atlas-btn atlas-btn-primary">Ship it</button>

What Atlas actually is

Atlas is a design language, not a CSS framework you bolt on. It's:

A Claude Code skill (skills/atlas/) — markdown rules + one reference CSS file that teaches any coding agent the Atlas aesthetic, tokens, vocabulary, and composition recipes.
A reference CSS implementation (colors_and_type.css) — 180+ tokens and 50+ .atlas-* classes. Works as-is for plain HTML; translates cleanly to any other stack.
A live kitchen-sink site at ui.pacifio.dev — 55+ pages rendering every component, pattern, and four full-app mockups. One-shot generated by an agent reading the skill.

Your agent reads the rules and generates code that fits your stack — shadcn, Tailwind, raw HTML, React with CSS Modules, Vue, Svelte. The reference CSS is not required.

Live site

All these pages are browsable at ui.pacifio.dev:

Section	What's there
Get started	Install, per-stack translation examples, FAQ
Foundations	Colors, typography, spacing, radius, shadows, motion, icons
Components	36 component pages — buttons, inputs, cards, dialogs, tabs, tables, stepper, toast, command palette, etc.
Patterns	Landing, agent chat, mobile app, 3-pane shell, dashboard, settings
Mockups	Full-app UIs — Email, E-commerce, Multi-agent, News & polls

Every component page has a "Copy rules" button in the inspector that drops a complete markdown spec (anatomy + tokens + dos/donts + Atlas core rules) on your clipboard — paste it into any agent chat and get faithful Atlas output.

Install

1. As a Claude Code skill (recommended)

# 1. Register this repo as a marketplace
/plugin marketplace add pacifio/ui

# 2. Install the atlas plugin from it
/plugin install atlas@atlas-ui

Your agent now reads the Atlas skill on every UI task and generates code in your target stack. What gets loaded:

skills/atlas/
├── SKILL.md                    # entry rules + activation protocol
├── colors_and_type.css         # reference implementation (not a dependency)
└── references/
    ├── tokens.md               # every CSS variable
    ├── components.md           # every .atlas-* class + HTML snippet
    ├── theming.md              # dark/light + shadcn alias table
    ├── patterns.md             # 3-pane shell, content tone, icon rules
    ├── responsive.md           # multi-surface, device frames, container queries
    ├── motion.md               # easing tokens, durations, overlay rules
    ├── lessons.md              # 20 gotchas from real builds (button resets,
    │                           #  shadow-per-theme, pulse-only-opacity, etc.)
    └── examples.md             # 10 copy-ready composition snippets

2. With any other coding agent (Cursor, Windsurf, Cody, Aider…)

The skill is plain markdown + one CSS file. Point the agent at skills/atlas/ in this repo and tell it to read SKILL.md first. No proprietary format, no vendor lock-in.

# Clone and reference from your project
git clone https://github.com/pacifio/ui.git .atlas-skill
# Then in your agent chat:
# "Read .atlas-skill/skills/atlas/SKILL.md and generate a deploy dashboard."

3. As a raw stylesheet (no agent, plain HTML)

curl -o atlas.css https://raw.githubusercontent.com/pacifio/ui/main/skills/atlas/colors_and_type.css

Then:

<link rel="stylesheet" href="atlas.css" />
<button class="atlas-btn atlas-btn-primary">Ship it</button>

Inter and JetBrains Mono are imported from Google Fonts automatically. No build step. No config.

Usage examples by stack

Plain HTML

<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <link rel="stylesheet" href="/atlas.css" />
  </head>
  <body>
    <header class="atlas-titlebar">
      <span class="atlas-panel-title">Atlas — Production</span>
    </header>

    <main style="padding: 24px;">
      <div class="atlas-card" style="width: 320px;">
        <div class="atlas-card-header">
          <span class="atlas-dot atlas-dot-success"></span>
          <span class="atlas-panel-title">Deploy</span>
        </div>
        <div class="atlas-card-body">
          Production · main@a9f3b1 · 42ms p95
        </div>
      </div>

      <div style="margin-top: 12px; display: flex; gap: 8px;">
        <button class="atlas-btn atlas-btn-primary">Deploy</button>
        <button class="atlas-btn atlas-btn-secondary">Preview</button>
        <button class="atlas-btn atlas-btn-ghost">Logs</button>
      </div>
    </main>
  </body>
</html>

React / Next.js (App Router)

// app/layout.tsx
import "./atlas.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-theme="dark">
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx
export default function Home() {
  return (
    <div style={{ padding: 24 }}>
      <button className="atlas-btn atlas-btn-primary">Ship it</button>
      <span className="atlas-badge atlas-badge-success">OK</span>
    </div>
  );
}

Tailwind v4 (translate tokens, don't overlay)

Your agent puts Atlas tokens in an @theme block and emits utility classes. Don't ship atlas.css to the bundle — Tailwind already has a utility system.

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-bg-base: #000000;
  --color-bg-raised: #0f0f0f;
  --color-text-primary: #ffffff;
  --color-text-secondary: #aaaaaa;
  --color-accent-primary: #ededed;
  --color-accent-highlight: #0070f3;
  --color-status-error: #F44747;
  --color-status-warning: #CD9731;
  --color-status-success: #4d4d4d;

  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Then emit utility classes following Atlas rules (28px buttons, 4px grid, 1px borders):

<button className="inline-flex items-center h-7 px-3 bg-accent-primary
                   text-black rounded-md text-sm font-medium hover:brightness-95
                   transition-colors">
  Ship it
</button>

shadcn/ui (override CSS variables)

shadcn already has a variable-driven theme. Don't overlay .atlas-* classes. Instead, override shadcn's variables with Atlas values — keep shadcn's component structure intact.

/* app/globals.css */
:root {
  --background: 0 0% 0%;                 /* Atlas --bg-base */
  --foreground: 0 0% 100%;                /* Atlas --text-primary */
  --card: 0 0% 6%;                        /* Atlas --bg-raised */
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 6%;
  --popover-foreground: 0 0% 100%;
  --primary: 0 0% 93%;                    /* Atlas --accent-primary (#ededed) */
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 9%;
  --secondary-foreground: 0 0% 67%;
  --muted: 0 0% 9%;
  --muted-foreground: 0 0% 35%;
  --accent: 0 0% 9%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 87% 62%;               /* Atlas --status-error (#F44747) */
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 12%;
  --input: 0 0% 12%;
  --ring: 212 100% 48%;                   /* Atlas --accent-highlight (#0070f3) */
  --radius: 0.25rem;                      /* 4px */
}

Then just use shadcn normally:

import { Button } from "@/components/ui/button";
<Button variant="default">Ship it</Button>

The shadcn button now looks Atlas. Your markup stays shadcn.

Vue 3

// main.ts
import { createApp } from "vue";
import "./atlas.css";
import App from "./App.vue";

createApp(App).mount("#app");

<!-- components/DeployButton.vue -->
<template>
  <button class="atlas-btn atlas-btn-primary" @click="$emit('deploy')">
    <slot>Deploy</slot>
  </button>
</template>

Svelte / SvelteKit

<!-- +layout.svelte -->
<script>
  import "./atlas.css";
</script>

<slot />

<!-- DeployButton.svelte -->
<button class="atlas-btn atlas-btn-primary" on:click>
  <slot>Deploy</slot>
</button>

CSS Modules / styled-components

Port the relevant .atlas-* rule into your styling system. The CSS file is the source of truth for visual values; your emitted code is the translation.

/* Button.module.css — port of .atlas-btn rules */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  font: 500 12px "Inter", system-ui;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.primary { background: #ededed; color: #000; }
.primary:hover { background: #fff; }

Principles (non-negotiable)

AMOLED black. Pure #000 base, no dark-gray drift.
Monochromatic. Grays + whites do the work. Saturated color is for status semantics only.
Compact. Strict 4px grid. 13px base text. 28px buttons. 24px inputs.
Border-defined surfaces. Shadows reserved for overlays (dialog, popover, toast, tooltip, device frame).
Near-white primary, blue highlight. #ededed is the CTA color. #0070f3 is never a CTA — it's the highlight (focus rings, selection, links, active stepper dots).
Radii are 3 / 4 / 6 / 9999. No inventing 8, 10, 12, 16.
Lucide icons, 1.5px stroke. Never emoji, never unicode symbols.
Only animate background-color by default. No color/opacity on icons.
Overlays get backdrop-filter: blur() + spring curves. Never flat ease on modal entrances.
Dark-first with a real light theme. All tokens remap under [data-theme="light"]. Component structure never changes.

Component vocabulary

50+ .atlas-* classes. Full HTML snippets for each are at /components on the live site.

Primitives: .atlas-btn (+ -primary / -secondary / -ghost / -destructive / -icon / -sm / -lg), .atlas-btn-pill (same variants), .atlas-input (+ -sm), .atlas-checkbox, .atlas-radio, .atlas-switch, .atlas-kbd, .atlas-link

Surfaces: .atlas-card / -header / -body, .atlas-panel-header / .atlas-panel-title, .atlas-stat / -label / -value / -delta, .atlas-empty

Navigation: .atlas-tabbar + .atlas-tab, .atlas-tabbar-bottom + .atlas-tabbar-bottom-item, .atlas-segmented + -item, .atlas-toggle, .atlas-breadcrumb, .atlas-pagination, .atlas-stepper

Overlays: .atlas-popover + .atlas-menu-item, .atlas-dialog, .atlas-command, .atlas-tooltip, .atlas-toast, .atlas-alert

Data: .atlas-table, .atlas-list + .atlas-list-item, .atlas-badge, .atlas-pill, .atlas-dot (+ .is-pulse), .atlas-accordion

Feedback: .atlas-progress, .atlas-slider, .atlas-skeleton, .atlas-titlebar, .atlas-statusbar

Identity: .atlas-avatar, .atlas-avatar-group, .atlas-divider / -v, .atlas-divider-dashed / -v-dashed

Multi-surface: .atlas-device-mobile, .atlas-device-tablet, .atlas-device-desktop, .atlas-marquee, .atlas-filmstrip, .atlas-reveal, .atlas-display / -lg, .atlas-eyebrow

Local development

Clone and run the kitchen-sink docs site locally:

git clone https://github.com/pacifio/ui.git
cd ui/kitchen-sink
bun install       # or: npm install, pnpm install
bun run dev       # starts on http://localhost:3000

The dev server watches both kitchen-sink/app/** and any edits you make to skills/atlas/colors_and_type.css (copy into kitchen-sink/public/atlas.css to see them applied). Hot reload is instant — the kitchen-sink is a normal Next.js 16 app.

Repo layout

ui/
├── .claude-plugin/
│   ├── marketplace.json           ← registers the repo as a Claude Code marketplace
│   └── plugin.json                ← Claude Code plugin manifest (served by the marketplace)
├── skills/
│   └── atlas/                     ← For agents
│       ├── SKILL.md               ←   entry point (read first)
│       ├── colors_and_type.css    ←   reference implementation
│       ├── references/            ←   tokens, components, theming,
│       │                          ←   patterns, responsive, motion,
│       │                          ←   lessons, examples
│       ├── preview/               ←   HTML previews per component
│       └── ui_kits/generic_app/   ←   3-pane shell reference
├── kitchen-sink/                  ← For humans (Next.js 16)
│   ├── app/                       ←   55+ pages
│   │   ├── get-started/
│   │   ├── foundations/
│   │   ├── components/
│   │   ├── patterns/
│   │   └── mockups/
│   ├── components/                ←   site chrome + showcase primitives
│   ├── lib/                       ←   nav registry
│   └── public/
│       └── atlas.css              ←   synced from skills/atlas/
├── README.md                      ← you are here
└── LICENSE                        ← MIT

Ecosystem (plays well with…)

Radix UI — dropdown, popover, dialog, context menu primitives
Lucide — 1.5px stroke icons, color inherited from parent
react-resizable-panels — for 3-pane layouts
shadcn/ui — variable-aliased for automatic Atlas inheritance
Tailwind CSS v4 — optional; Atlas tokens translate to @theme
Next.js — the kitchen-sink uses 16 + Turbopack

FAQ

Does it work with shadcn? Yes — by not overlaying. Your agent reads the shadcn variable alias table in references/theming.md and overrides shadcn's CSS variables with Atlas values. shadcn components stay shadcn; they just look Atlas.

Does it conflict with Tailwind? No — your agent translates Atlas tokens into Tailwind's @theme block and emits utility classes. atlas.css never ships to a Tailwind bundle unless you explicitly opt in.

When do I use colors_and_type.css directly? Plain HTML, static-site generators, or greenfield projects with no component library. The CSS is production-grade — it powers the entire kitchen-sink site. For other stacks, translate.

Is the reference CSS complete? 180+ tokens, 50+ class rules, dark + light theme, responsive helpers, device frames, easing tokens, motion primitives, all documented. It does not ship JavaScript — interactions (dialogs, dropdowns, toasts) are styling only. Wire them to your stack's state management.

How was this site built? One-shot generated by an agent reading this skill. Hero, meta banner, 29+ live component cards, 7 foundations, 36 components, 6 patterns, and 4 full-app mockups (email, e-commerce, multi-agent, news) — all from the markdown rules.

Contributing

PRs welcome. Open an issue first for anything structural (new tokens, new component classes, renames).

Bug reports / feature requests: github.com/pacifio/ui/issues
Discord: discord.gg/BF7ngVQuCS

When contributing to the skill:

Keep skills/atlas/colors_and_type.css and kitchen-sink/public/atlas.css in sync (they're a copy).
If you add a CSS class, add a snippet to skills/atlas/references/components.md and a showcase page under kitchen-sink/app/components/.
If you discover a gotcha, document it in skills/atlas/references/lessons.md.

License

MIT © pacifio

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Atlas

What Atlas actually is

Live site

Install

1. As a Claude Code skill (recommended)

2. With any other coding agent (Cursor, Windsurf, Cody, Aider…)

3. As a raw stylesheet (no agent, plain HTML)

Usage examples by stack

Plain HTML

React / Next.js (App Router)

Tailwind v4 (translate tokens, don't overlay)

shadcn/ui (override CSS variables)

Vue 3

Svelte / SvelteKit

CSS Modules / styled-components

Principles (non-negotiable)

Component vocabulary

Local development

Repo layout

Ecosystem (plays well with…)

FAQ

Contributing

License

About

Uh oh!

Contributors

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
.claude-plugin		.claude-plugin
kitchen-sink		kitchen-sink
skills		skills
.DS_Store		.DS_Store
LICENSE		LICENSE
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Atlas

What Atlas actually is

Live site

Install

1. As a Claude Code skill (recommended)

2. With any other coding agent (Cursor, Windsurf, Cody, Aider…)

3. As a raw stylesheet (no agent, plain HTML)

Usage examples by stack

Plain HTML

React / Next.js (App Router)

Tailwind v4 (translate tokens, don't overlay)

shadcn/ui (override CSS variables)

Vue 3

Svelte / SvelteKit

CSS Modules / styled-components

Principles (non-negotiable)

Component vocabulary

Local development

Repo layout

Ecosystem (plays well with…)

FAQ

Contributing

License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages