Foundation
01 Color02 Typography03 Tokens
Design
04 Depth05 Motion
Components
06 Components
Guidelines
07 Accessibility
Beta

Amber
Design
System

A unified design language for web and native platforms. Neumorphic depth, purposeful motion, and a warm earthy palette.

WCAG 2.1
AA Compliant
Next.js
Ready

01 — Foundation

Color

Six brand primitives derived from warm earth tones. Components reference solid tokens; gradients are reserved for decorative use only.

Navy
#010E1A
Page background
Navy Mid
#011526
Elevated surfaces
Gold
#F2B872
Primary (dark) / a11y
Amber
#A66329
Primary (light) / brand
Sand
#D9A87E
Tertiary / muted
Chocolate
#593825
Deep accent / depth
Success#3DB468
Warning#F2B872
Error#FF5050
Info#60A5FA

02 — Foundation

Typography

Latin fonts are self-hosted via next/font for GDPR compliance. CJK typefaces load from Google Fonts CDN for optimal delivery.

Display & Headings
SF Pro Display → Google Sans Flex → Inter
Body
SF Pro Text → Roboto Flex → Inter
Code
SF Mono → JetBrains Mono
Han Characters
PingFang TC → Noto Sans TC (Google Fonts CDN)
Display
56pxgrad
H1
40pxgrad
H2
30px
H3
22px
Body LG
18px
Body
16px
Body SM
14px
Label
11px
Mono
13px
CJK 中文
16px

03 — Foundation

Tokens

Spacing — 4px base

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

Border Radius

xs4px
sm8px
md12px
lg16px
xl20px
2xl24px
full9999px

04 — Depth

Neumorphic Depth

Four elevation levels built from soft dual shadows. Light originates from the top-left; shadow falls to the bottom-right.

Flat
Base surface, subtle lift
--neu-flat
Raised
Cards, panels, default
--neu-raise-sm
Elevated
Floating elements, modals
--neu-raise
Inset
Inputs, pressed states
--neu-inset

05 — Motion

Motion & Animation

Every transition serves a purpose. All animations honour prefers-reduced-motion.

Duration Scale

Instant
Checkbox tick, micro-feedback
50ms
Fast
Hover states, icon swap
100ms
Normal
Default UI transitions
200ms
Slow
Modal enter, page shift
350ms
Morph
Neumorphic shape transitions
700ms

Easing Curves

Spring
cubic-bezier(0.34,1.56,0.64,1)
Buttons — slight overshoot
Ease Out
cubic-bezier(0.0,0.0,0.2,1)
Elements entering
In-Out
cubic-bezier(0.4,0.0,0.2,1)
Shared transitions
Neu
cubic-bezier(0.25,0.46,0.45,0.94)
Neumorphic morph

06 — Components

Components

Production-ready primitives built with neumorphic depth, spring-based motion, and consistent brand tokens.

Buttons

Cards

Flat

Standard

Subtle border lift on hover. Clean and minimal.

Neumorphic

Raised

Soft dual shadow with interactive 3D tilt on hover.

diamond

Feature

Icon-led card for feature highlights and onboarding.

Inputs

Flat — label above

Please enter a valid email.

Floating label

Badges

diamond DefaultNeutralcheck Successclose Errorinfo Infocircle LiveNEW

Toggles

Progress

Upload75%
Processing42%
Complete90%

Toasts

Modal

Tabs

Neumorphic components with spring-based motion and warm brand tokens.

Next.js App Router with React 19.

Avatar

AL
BO
CH
DA
EV

Tooltip

Skeleton

07 — Guidelines

Accessibility

WCAG 2.1 AA compliance is a baseline requirement. Every component includes keyboard navigation, ARIA attributes, and focus management.

Color Contrast

Primary tokens meet AA on both themes. Gold (#F2B872) on navy: 7.4:1. Amber (#A66329) on white: 5.0:1.

Keyboard Navigation

All interactive elements are tabbable with visible focus rings using :focus-visible.

Reduced Motion

All animations respect prefers-reduced-motion: reduce media query.

Semantic HTML

Components use proper ARIA roles, labels, and landmarks for screen readers.