Ansai Design System — 2026

Beauty that
earns its place

Every line, every edge, every silence in the system must serve the user and honor the purpose. This is not minimalism. This is meaning, made visible.

8
Sections
30+
Design tokens
∞
Consistent moments
Scroll to explore ↓
00 — Design Philosophy

The Ansai Design Creed

These are not guidelines. They are beliefs. Every design decision must answer to them.

"Beauty must not be decoration alone — it must emerge from usefulness."
Form & Function
"The system must bend gently toward the human, not demand the human contort."
Human-Centric by Nature
"Every line, every edge, every silence must serve the user and honor the purpose."
Intentional Restraint
What this means in practice
Ansai does this →
✓ Every component has a reason to exist
✓ Whitespace is used to create focus, not fill gaps
✓ Motion explains and confirms — never decorates
✓ Hierarchy guides the eye without demanding attention
✓ The brand has a consistent voice across every surface
Ansai never does this →
✗ Animations that distract without purpose
✗ Design that makes the user feel dumb
✗ Information hidden behind hover states
✗ Patterns that break platform conventions without reason
✗ Trend-chasing that ages the product in 12 months
00B — Brainstorm: Best of the Best

What we steal from the greats

The best brands don't copy — they absorb principles. Here's what each top company does that no one does better, and how Ansai should interpret it.

Apple
"The details are not the details. They make the design." — Charles Eames (Apple's ethos)
Steal: Physics-based motion. Apple's animations feel real because they respect physics — weight, momentum, spring. Nothing appears or disappears; it arrives and departs.
Steal: Generous whitespace as a statement. Apple treats empty space as a primary design element, not wasted real estate.
Steal: Haptic feedback philosophy. On mobile, every tap should feel like something. Every action should have a physical response that confirms it worked.
Avoid: Walled garden opacity. Apple tells you what to do; great products explain why.
Stripe
"Developer-first, but human always."
Steal: Documentation as brand. Stripe's docs are so beautiful that engineers brag about using them. Every word of your docs, every error message, is a brand touchpoint.
Steal: Gradient discipline. Stripe uses one bold gradient per context — never two competing gradients on the same page.
Steal: Confidence in density. Stripe packs information without chaos. Their dashboards are information-rich but never overwhelming.
Avoid: Over-engineered complexity. Stripe can feel too clever for non-technical users.
Linear
"Speed is a feature. Respect the user's time obsessively."
Steal: Extreme restraint. Linear removes until it hurts, then removes more. If a UI element doesn't help the user accomplish a task, it's gone.
Steal: Keyboard-first design. Power users should be able to operate the entire product without touching the mouse. This makes the product feel alive and fast.
Steal: Monochrome confidence. Linear's design works in near-black-and-white. Color is used only for meaning, never decoration.
Avoid: Coldness. Linear can feel sterile. Ansai should be warmer — human-centric by nature.
Figma
"Design should feel like play."
Steal: Collaborative presence. Figma makes you feel other humans are in the room. Ansai's product should always make users feel they're working with something alive, not a static tool.
Steal: Onboarding as delight. First-run experiences should spark joy and immediate value — not a 12-step tutorial.
Steal: The "aha" moment. Great products engineer one unforgettable moment in the first session that makes the user say "I need this."
Avoid: Feature bloat. Figma now has so many features that its simplicity promise feels broken.
Vercel
"Zero config. Maximum respect for developer time."
Steal: Dark mode done properly. Vercel's dark theme isn't an afterthought. It IS the primary experience. Ansai should be built dark-first.
Steal: Status as design element. Every deployment status, every build log is visually beautiful — not a wall of CLI text.
Google Material 3
"Adaptive, accessible, human-scale."
Steal: Adaptive color system. Material 3's dynamic color system generates harmonious palettes from any seed color. Ansai's system should be equally robust across light/dark/contexts.
Steal: Elevation model. Google's systematic use of elevation (shadow + surface tint) creates depth without gradients. Use it on Android.
Notion
"Infinite canvas. Zero friction to start."
Steal: The blank page philosophy. Notion's empty state is an invitation, not a void. Ansai's empty states should make users feel inspired to begin.
Steal: Typography as UX. Notion's entire UI is text-driven. Beautiful typography IS the interface — not decorative around it.
The Ansai synthesis
Ansai = Apple's craft + Stripe's confidence + Linear's restraint + Figma's humanity
But filtered through one belief that none of them fully embody: that beauty in design, like beauty in nature, emerges from usefulness — not from ornamentation. A tree branch doesn't fork the way it does because it looks nice. It forks that way because it works. That is the Ansai standard.
02 — Color

Color System

Navy is depth. Cyan-to-blue is energy. White is clarity. Semantic colors are functional — never decorative. One gradient, used with discipline.

Brand Gradient — the only gradient
#2de8e8 → #1c5cf5 · 145° · used in mark, CTAs, and data highlights only
Navy 950
#111c27
Page background
Navy 900
#172030
Card surface
Navy 800
#1c2a3a
Raised / inputs
Navy 700
#253350
Hover states
Cyan 400
#2de8e8
Gradient start · accent
Blue 600
#1c5cf5
Gradient end · CTA
White
#ffffff
Primary text
Semantic
Green · Yellow · Red
Status only
:root {
  /* One gradient. Use with discipline. */
  --grad: linear-gradient(145deg, #2de8e8 0%, #1c5cf5 100%);

  /* Surfaces — always layered dark to light */
  --bg:      #111c27;  /* base */
  --bg-card: #172030;  /* +1 elevation */
  --bg-hi:   #1c2a3a;  /* +2 elevation */

  /* Text scale — opacity on white, not grey hex values */
  --text:   rgba(255,255,255, 1.0);   /* headings */
  --text-2: rgba(255,255,255, 0.7);   /* body */
  --text-3: rgba(255,255,255, 0.4);   /* muted / meta */
}
03 — Typography

Type System

DM Sans for display and body. DM Mono for data, code, and metadata. Two fonts. Two purposes. Never mix in a third.

The future of
intelligent work
Typeface
DM Sans
Weights
300 · 500 · 600
Display tracking
−0.04em
Body tracking
−0.01em
Type Scale — shared across Web, Android, iOS
10px
--t-2xs
EYEBROW · LABEL · METADATA
12px
--t-xs
Caption, hint, timestamp
14px
--t-sm
UI labels, buttons, form fields
15px
--t-base
Body copy — default reading
17px
--t-lg
Lead paragraph, description
26px
--t-2xl
Section Heading
42px
--t-4xl
Page Title
72px
--t-hero
Hero
05 — Components

UI Components

Built from tokens. Predictable. Accessible. Hover states only confirm interactivity — they never hide information or shift layout.

Buttons
Sizes
Badges & Avatars
Default Active Online Pending Error
Avatars
AK
SL
TM
AK
SL
TM
Form Controls
Invalid API key format.
Enable notifications
Two-factor auth
Alerts
ℹ
New version available
Ansai v2.14 includes improved context handling.
✓
Integration connected
Your Slack workspace is now linked.
⚠
Usage at 80%
8,000 of 10,000 monthly tokens used.
Total Queries
24.7K
↑ 12% this week
Avg Response
142ms
↓ 8ms faster
Accuracy
98.4%
↑ 0.3% this month
Active Users
3.2K
↑ 41% MoM
Progress
Context window68%
Monthly usage82%
06 — Motion

Motion Principles

Motion reveals. It confirms. It respects time. It never performs for its own sake. No cursor effects. No shooting stars. No scroll-jacking.

Easing Curves — Live
Ease Out — Defaultcubic-bezier(.25,1,.5,1)
Elements entering the screen. Fast arrival, graceful rest.
Spring — Delightcubic-bezier(.34,1.56,.64,1)
Toggles, confirmations. The physical feel of something clicking into place.
Linear — Neveravoid entirely
Mechanical. Lifeless. Only for looping spinners.
Duration Scale
80ms
Micro — hover, border, color
150ms
Fast — tooltips, dropdowns
250ms
Default — modals, panels
400ms
Expressive — page transitions
600ms+
Hero animations only
Non-negotiables
🚫
No scroll-jacking. Native scroll is sacred.
♿
Always check prefers-reduced-motion.
⚡
Fast in, slow out. Objects arrive with intent.
🎯
One animation at a time. Never compete for attention.
07 — Voice & Tone

Voice & Tone

Ansai speaks like nature works — with economy and purpose. Every word earns its place, or it is removed.

🎯
Direct
Say what you mean. Cut every word that doesn't earn its place.
🤝
Warm
Human, not robotic. We care about the person using the product.
💡
Confident
We know our product. Don't over-qualify or apologize unnecessarily.
✂️
Concise
If it doesn't add meaning, it adds noise. Remove it.
✓ Write like this
Connect your first data source in under 2 minutes.
Something went wrong. Try refreshing — if it persists, contact support.
Your file is ready.
We've updated your billing to the 1st of each month.
✗ Not like this
We're thrilled to introduce our groundbreaking seamless data integration experience!
We sincerely apologize for the inconvenience this unexpected error may have caused you.
Your requested file has been successfully processed and is now available for download.
Please be advised that modifications to your billing have been implemented accordingly.