Neutral layout
Used for informational content across the site. Combine with tag lists or call-to-action links.
See in ProjectsDesign system
Reusable patterns powering the Allamiro experience
This page documents the building blocks shared across every view: tokens, cards, typography, and interaction guidelines.
Tokens
Core variables that define the site's mood—mirroring the gradients and typography of the Vite-inspired layout.
| Token | Description | Sample value |
|---|---|---|
| --color-accent | Primary highlight color used for buttons, pills, and gradients. | #646cff |
| --color-accent-2 | Secondary accent that blends orange warmth into gradients. | #f97316 |
| --radius-lg | Rounded corners applied to hero cards and feature sections. | 28px |
| --shadow-card | Depth shadow that keeps surfaces floating above the nebula background. | 0 18px 40px rgba(15, 23, 42, 0.45) |
Cards in action
The same card pattern adapts across projects, data stories, and repository overviews.
Elevated highlight
Pair the base card with a .callout element to reinforce announcements or invites.