FolioMuse
Design system reference
This page exercises the token layer from src/app/globals.css. Switch themes with the toggle above to inspect both modes. Every color on this page is a token, never a hardcoded value.
Color
Semantic tokens and the primitive ramps they select from. Warm neutral foundations with a single cobalt accent.
Semantic
Cobalt ramp
Warm neutrals
Typography
Geist in three roles: display, sans, and mono. Mono carries labels and index numbers, the technical register of the direction.
Display
A portfolio, honestly yours
Sans body
FolioMuse pairs real examples with sharp AI feedback so a portfolio gets assembled, not guessed. The gallery exists to inspire, never to enable one-to-one duplication.
Mono, data
index 0421 / status accepted / 12 columns at 1024px
Grid
The 12/6/4 convention: 12 columns at 1024px and up, 6 at 768 to 1023px, 4 below 768px. Resize the window to watch the tiles reflow.
Buttons
Every variant below is token-driven. Tab through them to see the cobalt focus ring, press them for the active state, and try the disabled and loading states.
The loading button uses aria-busy and the Loader2 spinner; motion collapses under prefers-reduced-motion.
Status
Semantic badges for feedback. Contrast is contract-tested at 4.5:1 in both modes.
Surfaces
Cards use the card tokens with a restrained radius. The hover variant shifts border and surface, never a black shadow.
Motion
Tokenized duration and easing. Hover the tile below; under prefers-reduced-motion every transition collapses to a single frame.
Accessibility
- Focus order follows the document order of this page.
- Every interactive element has a visible focus ring in both modes.
- The theme toggle has an aria-label that describes the action.
- All motion collapses under prefers-reduced-motion.
- Contrast pairs are enforced by the token contract test suite.