Design playbook

01 — Design philosophy

Beauty must not be decoration alone — it must emerge from usefulness.

Every design decision must answer to this belief. If an element exists for decoration alone, it does not belong. If whitespace exists to fill a gap rather than to create focus, it is wrong. If animation exists to impress rather than to confirm an action, it is wrong.

The Ansai design creed — what we always do

• Every component has a reason to exist.
• Whitespace is used to create focus, not fill gaps.
• Motion explains and confirms — it never decorates.
• Hierarchy guides the eye without demanding attention.
• The brand has a consistent voice across every surface.

What we never do

• Animations that distract without purpose.
• Design that makes the user feel uncertain about what to do next.
• Information hidden behind hover states or interactions that are not discoverable.
• Trend-chasing that ages the product in twelve months.
• Complexity that exists to look sophisticated rather than to serve the user.

02 — Typography — fixed, never varies

Display and body

DM Sans — weights 300 (light), 400 (regular), 500 (medium), 600 (semibold). No other weights. No other display or body typeface in any Ansai product.

Data and code

DM Mono — weights 400 (regular), 500 (medium). Used for numbers, code, metadata, labels, monospaced display. Never for body copy.

Third typeface

Never. Two typefaces. Two purposes. Mixing a third typeface into any Ansai product is a design violation.

Type scale — fixed

Display

clamp(48px, 6.5vw, 82px) — weight 300 with bold span for key word

Heading 1

clamp(30px, 3.5vw, 44px) — weight 300, key words bold

Heading 2

28px — weight 500

Heading 3

22px — weight 500

Body

16px — weight 400 — line-height 1.7

Small / label

13px — weight 400 or 500

Mono / data

DM Mono 11–13px — weight 400 or 500

Minimum

11px. Never smaller.

03 — Spacing — fixed, never varies

Spacing is based on a 4px base unit. All spacing values are multiples of 4. This creates visual rhythm that is consistent across every Ansai product regardless of the brand colour.

4px · sp-1

Micro spacing. Icon-to-label gaps.

8px · sp-2

Tight spacing. Internal component padding.

12px · sp-3

Compact spacing. Related elements.

16px · sp-4

Standard spacing. Default gap between items.

24px · sp-6

Comfortable spacing. Card padding.

32px · sp-8

Relaxed spacing. Section internal padding.

48px · sp-12

Generous spacing. Between major sections.

64px · sp-16

Expansive spacing. Hero sections.

88px · sp-22

Maximum section padding.

04 — The token system

Tokens are the bridge between the shared design system and the product-specific brand identity. Global tokens never change. Product tokens are the controlled variation point.

Global tokens — fixed across all Ansai products

--color-text-primary

The main text colour. Adapts to light/dark mode automatically.

--color-text-secondary

Muted text — descriptions, subtitles, helper text.

--color-bg-primary / -secondary / -tertiary

Page background, card surface (+1 elevation), highlighted surface (+2 elevation).

--color-border

Default border — rgba(255,255,255,0.08) in dark mode.

--color-success / -warning / -error

#34d399 / #fbbf24 / #f87171. Fixed. Never use brand colour for semantic states.

--font-sans / --font-mono

DM Sans for body and display. DM Mono for data and code.

--radius-btn / --radius-card

Two scales, one per element type: 8px buttons, 20px cards. No exceptions. (v1.1: replaces the earlier four-step radius scale.)

Product tokens — the variation point

--brand-primary

The product's primary brand colour. Used for CTAs, active states, data highlights, the product gradient. Never used for semantic meaning.

--brand-secondary

The product's secondary brand colour. Used for the gradient endpoint and accent elements.

--brand-gradient

linear-gradient(145deg, var(--brand-primary) 0%, var(--brand-secondary) 100%).

--brand-glow

rgba version of brand-primary at 0.2 opacity. Used for button shadows and focused states.

Current product palettes

Ansai web (v1.1)

#1c5cf5 sole accent on all surfaces · #2de8e8 reserved for the logo mark only

EduManage

#2de8e8 (cyan) → #1c5cf5 (blue), product UI only, not web surfaces

AgriX (future)

#34d399 → #059669 · Reserved. Not yet implemented.

Health (future)

#f59e0b → #d97706 · Reserved. Not yet implemented.

Transport (future)

#6366f1 → #4f46e5 · Reserved. Not yet implemented.

05 — Motion — fixed principles

Purpose

Motion explains and confirms. Every animation must answer: what does this teach the user about the system? Decorative motion is rejected.

Physics-based

Animations respect physical weight and momentum. Nothing appears or disappears instantly — it arrives and departs.

Reduced motion

Every animation is wrapped in @media (prefers-reduced-motion: no-preference). Users who have requested reduced motion see no animation.

Duration

Micro-interactions: 100–200ms. Transitions: 200–350ms. Page transitions: 350–500ms. Nothing longer than 500ms for UI feedback.

Easing

ease-out for entrances · ease-in for exits · cubic-bezier(0.34, 1.56, 0.64, 1) for spring effects

No gradients

Use solid flat fills. The brand gradient lives only inside the logo mark artwork. (v1.1: CTAs and data highlights are solid #1c5cf5; the earlier CTA-gradient exception is retired.)

06 — Component philosophy

Flat surfaces

No gradients, mesh backgrounds, noise textures, or decorative effects on surfaces. Clean flat fills. The brand gradient is the only gradient permitted.

No drop shadows

Elevation is expressed through background colour differences (bg-primary → bg-secondary → bg-tertiary), not shadows.

Border radius

Cards: 20px. Buttons: 8px. Pills: 100px. One scale per element type, never arbitrary values. (v1.1: cards moved from 12px to 20px.)

Dark mode

Every component must work in both dark and light mode. Use CSS variables — never hardcoded colour values.

Accessibility

WCAG AA minimum contrast for all text. Focus states visible on all interactive elements. No information conveyed by colour alone. Screen reader labels on all icons.

Sentence case

Always. Never Title Case in UI copy. Never all caps except for mono labels (document IDs, metadata). This applies everywhere.

07 — Logo and mark — fixed, never varies

The Ansai mark is two geometric strokes — a deconstructed upward arrow — in the brand gradient. It is the only brand element that must never change. All product marks derive from the Ansai mark as their parent identity.

Gradient direction

Always top-right cyan to bottom-left blue. Never flipped, rotated, or reversed.

Clear space

Maintain 1× mark height on all sides. Nothing enters this space.

Minimum size

24px for digital use. Never smaller.

Never do

Flip, rotate, recolour, stretch, apply drop shadows, use in isolation from its gradient, or place on a background with insufficient contrast.

Product marks

Each product may have its own wordmark alongside the Ansai parent mark. The Ansai mark appears in the footer of every product.

08 — Version 1.1 changelog

July 2026, following the site overhaul recorded in the pivot document, Section 13:

• #1c5cf5 is the sole accent on web surfaces; #2de8e8 is reserved for the logo mark and must not appear anywhere else on a page.
• The brand gradient is retired from CTAs and data highlights; it survives only inside the logo mark artwork.
• Radius scale reduced to two steps: 8px buttons, 20px cards, one scale per element type.
• Motion budget per page: one scroll-triggered staggered reveal, fired once, nothing else on load or on a loop.
• Zero em-dashes in shipped site copy; one CTA label per intent across nav, hero, and footer.

09 — Document control

Document ID

GDP-001

Version

1.1 (July 2026), web page is the current authority

Parent doc

GID-001 — Ansai Group Identity Document

Source files

ansai-brand-system-v3.html

Owner

Founder — until a design lead is hired

Review cycle

When a new product is added to Ansai Group — to register its brand tokens