Design system

Technical clarity,
warmly expressed.

This visual language connects the Amber website, documentation, and generated V2 web starter through original-studio character art, locally served type, responsibility colors, faceted geometry, and restrained motion.

Primary mark

Amber leads the show.

The primary character mark uses Amber's playful original-studio identity: full-body chibi proportions, a confident hero stance, and a welcoming peace sign. The transparent WebP ships with the site for local reuse.

Chibi Amber standing confidently and giving a peace sign

Locally served type

Build something crystal clear.

Fraunces brings expression and human warmth. Manrope carries the interface. Both variable fonts and their SIL licenses live with the site; the browser never calls a hosted font API.

Responsibility colors

One crew, clear boundaries.

Canvas
#FFF9EF
Amber
#F47A16
Grant
#147F80
Gemma
#8051A7

Supporting motif

The crystal stays in the world.

The faceted crystal remains a decorative system motif for fields, accents, and technical diagrams. It no longer carries the primary identity by itself.

Faceted amber crystal supporting motif

Component shelf

Small pieces.
One visual language.

The same border geometry, type, spacing, and state language carries from marketing pages into documentation and the generated V2 web starter.

Status
PreviewV2 beta core
Terminal window
amber — zsh
$ amber new my_app
✓ Web application created

Motion contract

Movement must explain state.

  • Terminal: progress from install to a running browser.
  • Cards: small pointer depth, never layout movement.
  • Crystal field: decorative response to pointer and scroll.
  • Reduced motion: show the complete state immediately.