achieui.dev
AchieUI is built around a consistent set of tokens and interaction rules: dark-first surfaces, a single lime accent for state, and accessible focus treatment that stays visible without being loud.
Use the existing CSS variables from `app/globals.css`. The goal is consistency: every surface, border, and state is derived from the same palette and spacing scale.
| Token | Value | Note |
|---|---|---|
| --color-bg | #09090b | Overall page background (dark-first). |
| --color-surface | #111116 | Elevated surfaces and card backgrounds. |
| --color-border | #1e1e2a | Default borders and subtle dividers. |
| --color-text | #e2e2f0 | Primary text. |
| --color-text-2 | #9898b0 | Secondary/muted text. |
| --color-accent | #c8f135 | Focus rings, active states, and the signature lime. |
| --color-success | #4ade80 | Success semantics (approve, done, positive trend). |
| --color-warning | #f59e0b | Warning semantics (attention required). |
| --color-danger | #f87171 | Danger semantics (reject, error, destructive). |
| --color-info | #60a5fa | Info semantics (help, neutral status). |
AchieUI uses a display font for headings and a mono body font for clarity in dense UI. The type scale is defined in `app/globals.css` so new pages inherit consistent sizing.
| --font-display | Syne | Use for headings. |
| --font-mono | IBM Plex Mono | Default body type. |
The site uses a sidebar shell and a content column with a fixed maximum width. Inside pages, sections prefer consistent vertical rhythm (`--space-*`) and simple grid layouts.
| --width-content | 720px | Primary readable line length. |
| --width-layout | 1100px | Page max width. |
| --width-wide | 1400px | For dense dashboards when needed. |
Motion is subtle and state-driven: hover elevates, entrances fade/shift, and timing uses shared durations and easing variables. `prefers-reduced-motion` is respected globally.
| --duration-fast | 100ms | Snappy state changes. |
| --duration-base | 200ms | Default transitions. |
| --duration-slow | 350ms | Heavier affordances. |
| --ease-out-quart | cubic-bezier | Natural deceleration for entrances. |
If you animate, structure it so it can be disabled without breaking meaning (for example: opacity-based hints instead of layout animation).
AchieUI is built for keyboard and screen readers first. The defaults are in `globals.css`, and component implementations follow semantic HTML patterns (roles, aria attributes, and focus-visible styling).
Focus uses `outline` (not a glow): `outline: 1px solid var(--color-border-3)` with an `outline-offset` for visual separation.
When you add new components or document a pattern, match how the site already behaves: derive styles from tokens, keep spacing consistent, and make every interactive surface feel intentional.