Amotions AI — Design System v1.1

Foundation · 01

8pt Grid System

Every spacing value derives from a base unit. Three tiers govern the system: an 8pt layout grid for page-level composition, a 4pt component grid for spacing between elements, and a 2pt micro-grid for component inner padding only.

Off-Grid Rule

Values like 9px, 11px, 13px, 15px are forbidden for layout and component outer spacing. Only the 2pt micro-grid permits sub-4px values — exclusively for component inner padding, border-width: 1.5px, and visual-only properties like 3px progress bar heights.

Spacing Scale

Token	Value	Grid Tier	Primary Usage
space.1	4px	2pt Micro	Icon padding, dot gaps
space.2	8px	2pt Micro	Badge pad, icon–label gap
space.3	12px	4pt Comp	Button pad-sm, input pad-v
space.4	16px	4pt Comp	Card pad-sm, table cell padding
space.5	20px	4pt Comp	Card pad-md, sidebar outer padding
space.6	24px	4pt Comp	Card pad-lg, modal body
space.8	32px	8pt Layout	Content block margin, grid gap
space.10	40px	8pt Layout	Section header spacing
space.12	48px	8pt Layout	Section rhythm, tablet padding
space.16	64px	8pt Layout	Page section top padding
space.20	80px	8pt Layout	Header padding, hero section

Foundation · 02

Color System & WCAG 2.1 AA

The official Amotions AI palette is an eight-hue spectrum — from deep navy through cobalt, blue, cyan, lime, peach, pink to lavender. Each hue has a defined semantic role. A three-layer token architecture maps primitives → semantics → components. Never reference primitives directly in component code.

Amotion AI^™

Index

Color

Values

Official Primitive Palette — 8 Hues

Navy

navy.900
#070D1F
Surface · Sidebar

navy.700
#0B1E80

navy.500
#1636C8

navy.300
#97A8E8

navy.100
#D8DEEE

Blue

blue.700
#0A2FA0

blue.500 ★
#1855E8
Interactive

blue.400
#5A88F0

blue.200
#A8C0F8

blue.100
#DCE8FE

Cyan

cyan.700
#008A80

cyan.600
#00B5A8

cyan.500 ★
#00D4C0
Real-Time AI

cyan.300
#7EEAE4

cyan.100
#D0F5F3

Lime

lime.700
#4A8020

lime.600
#6AAD38

lime.500 ★
#90D45E
Practices

lime.300
#C0E89E

lime.100
#E8F7D8

Peach

peach.700
#A05010

peach.600
#D07828

peach.500 ★
#F7A85C
AI Coach

peach.300
#FBC898

peach.100
#FDE8D0

Pink

pink.700
#900060

pink.600
#C83890

pink.500 ★
#F57ABE
Roleplay

pink.300
#F8ACDA

pink.100
#FDE0F0

Lavender

lav.700
#6340E8
brandPrimary

lav.600
#9B6CE8

lav.500 ★
#C08EEE
Brand Accent

lav.300
#DBC0F8

lav.100
#F0E8FD

Critical — Only 3 of 8 official colors can carry white text at AA standard

Cyan, Lime, Peach, Pink, and Lavender are all decorative-only at their primary (500) weight — they cannot carry white text or serve as button backgrounds. These five colors must only be used as fills, gradients, icon box backgrounds, or tint layers. Navy text (#070D1F) must be used on all five light hues: it achieves 7.68–10.83:1 on these colors.

Color Usage Classification — All 8 Hues

Hue	Primary (500)	White text ratio	Dark text on 500	Classification	Semantic role
Navy	#070D1F	19.3:1 ✓	N/A (dark surface)	Interactive ✓	surface.sidebar, dark backgrounds, text.primary dark mode
Cobalt	#0B1E80	13.9:1 ✓	N/A (dark surface)	Interactive ✓	Deep accent surfaces, info states, dark card overlays
Blue	#1855E8	5.99:1 ✓	3.22:1 (large only)	Interactive ✓	Real-Time AI feature primary, transcript chips, info badges
Cyan	#00D4C0	1.88:1 ✗	navy 10.3:1 ✓	Decorative only	Real-Time AI icon box, gradient accent — navy text required
Lime	#90D45E	1.79:1 ✗	navy 10.8:1 ✓	Decorative only	Practices module icon box, positive accent fills — navy text
Peach	#F7A85C	1.96:1 ✗	navy 9.86:1 ✓	Decorative only	AI Coach icon box, warm accent fills — navy text required
Pink	#F57ABE	2.50:1 ✗	navy 7.74:1 ✓	Decorative only	AI Roleplay icon box, highlight fills — navy text required
Lavender	#C08EEE	2.52:1 ✗	navy 7.68:1 ✓	Decorative only	Brand accent, logo mark, gradients. lav.700 (#6340E8) = brandPrimary

Feature Module Color Map

Real-Time AI

Navy → Blue

Gradient: navy.900 → blue.500
Icon: cyan.500 tint bg
Text: white

AI Coach

Lavender → Peach

Gradient: lav.500 → peach.500
Icon: peach.100 tint bg
Text: navy on peach, white on lav

AI Roleplay

Pink → Lavender

Gradient: pink.500 → lav.500
Icon: pink.100 tint bg
Text: navy on pink, white on lav

Practices

Lime → Cyan

Gradient: lime.500 → cyan.500
Icon: lime.100 tint bg
Text: navy text on both

Interactive Semantic Tokens — WCAG Verified

brandPrimary

#6340E8 · lav.700

6.124:1 ✓

Primary buttons, focus rings, text.brand, selected states. The dark shade of the official lavender — accessible for white-text UI.

brandAccent

#C08EEE · lav.500

2.52:1 ✗ text

Official brand lavender — DECORATIVE ONLY. Logo mark, icon fills, gradients. Use navy text (#070D1F) when text is needed on this: 7.68:1 ✓

featureBlue

#1855E8 · blue.500

5.99:1 ✓

Real-Time AI feature accent, transcript chip text, info badge text on white. White text passes AA.

featureNavy

#070D1F · navy.900

19.3:1 ✓

Text on all 5 light decorative hues (Cyan, Lime, Peach, Pink, Lavender). Sidebar background, deepest dark surface.

featureCyan

#00D4C0 · cyan.500

Decor only

Real-Time AI icon box fill, gradient accent. Always use navy text (#070D1F) — 10.3:1 ✓

featureLime

#90D45E · lime.500

Decor only

Practices module icon box, positive tint fills. Always use navy text — 10.8:1 ✓

featurePeach

#F7A85C · peach.500

Decor only

AI Coach icon box, warm tint fills. Always use navy text — 9.86:1 ✓

featurePink

#F57ABE · pink.500

Decor only

AI Roleplay icon box, highlight fills. Always use navy text — 7.74:1 ✓

Status Colors — WCAG AA Verified

Text token	Bg token	HEX values	Ratio	Usage
status.successText	status.successBg	#044317 / #defbe6	4.835:1 ✓	COMPLETED badge, positive deltas
status.warningText	status.warningBg	#4d3800 / #fdf6dd	4.510:1 ✓	IN PROGRESS, hesitant sentiment
status.errorText	status.errorBg	#750e13 / #fff1f1	5.296:1 ✓	SKIPPED badge, error alerts
status.infoText	status.infoBg	#003a6d / #edf5ff	7.217:1 ✓	Info badges, transcript chips (featureBlue accent)

Foundation · 03

Typography Scale

A dual-typeface system. Sora (geometric, weight 800) commands headings and display text. DM Sans (variable optical, 11–15px) handles all UI. JetBrains Mono for tokens and code exclusively.

Sora — Display & Headings H1–H4 only

Amotions AI

Organization Profile

Post-call Analysis

H1–H4 only Never body or labels wt 700–800

DM Sans — UI & Body All UI text

Personalized AI coaching to help you achieve your goals and handle objections more effectively across every sales interaction.

Save Changes · + Add New Methodology · Cancel

Uploaded At · Status · Action

Buttons Labels Body copy Nav items

Complete Type Scale

Token	Sample	Family	Size / Wt	LH	LS	Context
scale.display-xl	Display XL	Sora	60 / 800	1.05	-0.03em	Landing hero
scale.display-lg	Hello, Varun	Sora	48 / 800	1.05	-0.03em	Dashboard greeting
scale.heading-h1	Organization Profile	Sora	36 / 700	1.15	-0.025em	Page titles
scale.heading-h2	Post-call Analysis	Sora	28 / 700	1.20	-0.02em	Section headings
scale.heading-h3	Organization Files	Sora	22 / 700	1.25	-0.015em	Card titles
scale.heading-h4	Analysis Details	Sora	18 / 600	1.30	-0.01em	Modal titles
scale.body-lg	Standard body copy and descriptions for the product.	DM Sans	15 / 400	1.65	0	Body copy
scale.label-md	Save Changes	DM Sans	13 / 500	1.40	0	Buttons, labels, nav
scale.label-sm	UPLOADED AT	DM Sans	11 / 600	1.40	0.08em	Table headers CAPS
scale.code-md	color.brand.primary	JetBrains Mono	13 / 500	1.60	0	Token names, code

Foundation · 04

Elevation & Shadow Scale

Elevation communicates hierarchy. Lighter shadows for ambient surfaces, heavier for interactive hover and overlays. shadow.brand and shadow.brandHover use violet rgba matching v1.1's corrected brandPrimary.

shadow.xs

Level 1 · Ambient

0 1px 2px rgba(0,0,0,.05)

Default card state

shadow.md

Level 3 · Floating

0 4px 6px rgba(0,0,0,.07)

Card hover, popovers

shadow.lg

Level 4 · Elevated

0 10px 15px rgba(0,0,0,.10)

Dropdowns, menus

shadow.2xl

Level 6 · Dialog

0 25px 50px rgba(0,0,0,.18)

Full-screen modals

shadow.brand

Brand Glow

0 4px 14px rgba(99,64,232,.30)

Primary btn default

shadow.brandHover

Brand Glow Hover

0 8px 24px rgba(99,64,232,.35)

Primary btn hover

shadow.sm

Level 2 · Raised

0 1px 3px rgba(0,0,0,.10)

Input focus, raised elements

shadow.xl

Level 5 · Overlay

0 20px 25px rgba(0,0,0,.10)

Modals, bottom sheets

Example Screens · 01

Dashboard — Home

The platform entry point. Stat cards surface live KPIs. Feature cards use official brand gradients. A recent calls feed grounds the screen in real user activity.

app.amotionsinc.com/home

Dashboard · Home

Amotions AI

M

Marcus & Millichap

Organization

Main

Home Real-Time AILIVE AI Coach AI RoleplayNEW Transcripts Practices Assessments

Tools

Reports Experts Settings

↑ 12%

248

Total Calls

↑ 5.2%

78%

Success Rate

↑ 8 pts

92

Coaching Score

↓ 2%

85%

Avg. Sentiment

AI Features

View all

● LIVE

Real-Time AI

Live coaching & emotion detection during active calls. Whisper suggestions in real time.

AI Powered

AI Coach

Post-call analysis, improvement plans, and scored call breakdowns.

3 New

AI Roleplay

Industry-specific simulations. Practice objection handling before real calls.

Recent Calls

See all

Today · 3 calls

View transcripts

Discovery Call — Orion Properties Inc.

32 min · Real-Time AI · Confident

94

9:14 AM

Follow-up — Sunset Ridge Portfolio

18 min · AI Coach reviewed · Hesitant

71

11:32 AM

Closing Call — Meridian Tech Campus

41 min · Real-Time AI · Engaged

88

2:05 PM

Design Annotations

1

Sidebar: overflow-y:auto;scrollbar-width:none — scrollable but invisible scrollbar. 10 nav items with real Iconsax Linear 14px SVGs. Active item: border-left:2px solid #6340E8 + lavender tint bg. Footer pinned with margin-top:auto.

2

Stat cards: Each icon box uses official palette tint (blue/lavender/cyan/peach). Progress bar heights are 3px — special visual-only values exempt from the 4pt grid. Delta chips use semantic status pairs.

3

Feature card gradients: Navy→Blue (Real-Time AI), Lavender→Peach (AI Coach), Pink→Lavender (AI Roleplay) — maps directly to color.semantic.gradient.* tokens. White text on all three passes WCAG AA.

Example Screens · 02

Settings — Organization Profile

Settings page demonstrating secondary navigation, form field states, file uploads, and a danger zone. All spacing and sizing values derive from system tokens.

app.amotionsinc.com/settings/organization

Settings · Organization

Amotions AI

M

Marcus & Millichap

Organization

Main

Home Real-Time AILIVE AI Coach AI RoleplayNEW Transcripts Practices Assessments

Tools

Reports Experts Settings

Organization

Marcus & Millichap

General

Methodology

Knowledge Base

Questions

Reports

Account

Team Members

Preferences

Organization Profile

Update public-facing organization details

M

Organization Logo

PNG or JPG · 400×400px recommended · Max 2MB

Organization Name *

Appears on all AI-generated reports and call summaries.

Industry *

Website (Optional)

Headquarters

Organization Description

Marcus & Millichap is the industry's largest brokerage firm specializing in commercial real estate investments. Over 2,000 investment specialists nationwide.

AI Coach uses this to tailor coaching to your organization's context.

Active Sales Methodology

Referenced by AI during live coaching

Consultative Selling Framework

18 steps · Uploaded Feb 25, 2026

Active

Relationship Selling (SPIN)

Archived · Jan 2026

Inactive

Design Annotations

1

Settings sub-nav: 160px secondary sidebar, 11px/500 DM Sans. Active = 2px brandPrimary left border + lavender-50 background. Icons are 13px Iconsax Linear, semantically matched to each label.

2

Focus state (Name field): border: 1px solid #6340E8 + box-shadow: 0 0 0 2px rgba(99,64,232,.12). Helper text uses text.tertiaryOnCanvas (#374151, 9.54:1 on white ✓).

3

Methodology section: Active row uses lavender icon box + green status badge with dot. Inactive entry is 45% opacity — disabled affordance without hiding it. Only one action button (Primary) in each card footer.

Example Screens · 03

Data Table — Organization Files

The densest surface. JetBrains Mono column headers create immediate visual separation from DM Sans cell content. Status badges carry dual signals: color and dot. Row actions use Iconsax with contextual danger state on hover.

app.amotionsinc.com/settings/files

Settings · Knowledge Base

Amotions AI

M

Marcus & Millichap

Organization

Main

Home Real-Time AILIVE AI Coach AI RoleplayNEW Transcripts Practices Assessments

Tools

Reports Experts Settings

Uploaded Files

6 files

Search files…

File Name	Type	Uploaded	Status	By
How to Respond to Common Objections in CRE PDF · 1.2 MB	PDF	25 Feb 2026	Processed	OA Org Admin
The Business Development Call Playbook DOCX · 840 KB	DOCX	25 Feb 2026	Processed	JT James T.
Marcus_Millichap_Q1_Report_2026 PDF · 4.8 MB	PDF	25 Feb 2026	Processing…	SK Sarah K.
Objection Handling — Price & Cap Rate DOCX · 320 KB	DOCX	20 Feb 2026	Processed	OA Org Admin

Showing 1–4 of 6 files

Design Annotations

1

Table headers: IBM Plex Mono 9px/600/UPPERCASE/0.07em. Monospace rhythm signals "structure, not data" — no color change needed. Row hover is gray-50 only; no cell color mutations.

2

File type chips: PDF = red tint; DOCX = blue tint. Both use the same Iconsax document SVG with type-coded stroke color (red for PDF, blue for DOCX). File size is secondary row in tertiaryOnCanvas.

3

Dual-signal status: Color + status dot satisfies WCAG 1.4.1. Processing row actions are disabled (opacity .35, pointer-events:none) — unavailable state is visually communicated before user attempts interaction.

Design Language · 04

Iconography — Iconsax

Iconsax is the official icon library. Three styles available. Linear is the system default for 95% of surfaces. Bold for active/selected states. Broken for illustration-only contexts. Figma plugin ID: 1496977686514515942

Size Scale — 6 Levels

12px · xs

Badge dots only. Never interactive.

16px · sm ★

Sidebar nav, button icons, table actions, input adornments.

20px · md

Modal headers, section indicators, tabs.

24px · lg

Feature entry cards, page headers.

32px · xl Bold

Empty state primary icon, Bold style.

48px · Broken

Illustration only. Always paired with text.

Navigation Icons — Linear, 20px display

App Shell & Navigation · Iconsax Linear · 16px in use · stroke-width 1.5px · color: text.secondary

Home

Real-time AI

AI Coach

Roleplay

Transcripts

Reports

Settings

Notifications

Action Icons — Linear, 20px display

Controls & Actions · Iconsax Linear · 16px in use · stroke-width 1.5px

Add

Delete

Edit

Search

Check

Close

Copy

External

Download

Chevron R

Chevron D

Share

Usage Rules

Sizing Rules

12px — badge status dots only, never interactive
16px ★ — sidebar nav, buttons, table actions, input adornments
20px — modal headers, section indicators, tabs
24px — feature entry cards, page header icons
32–48px — empty states and illustrations (Broken style at 48px)

Color Rules

Sidebar: rgba(fff,.7) default → white active
Canvas default: text.secondary (#374151)
Brand actions: brandPrimary (#6340E8)
Destructive hover: error.br (#da1e28)
Inside colored buttons: always text.inverse (white)

Style Rules

Linear — 95% of UI, stroke-width 1.5px at all sizes
Bold — active nav items, selected chips, feature CTAs
Broken — illustration / empty states only, never functional
Never mix styles within the same functional context
Icon-only buttons must have aria-label

Components · 01

Button

The primary mechanism for user actions. Six variants cover all interaction needs. Every variant maps to a specific intent — never substitute one for another based on visual preference alone.

All Variants & Sizes

Variant Usage Guide

When to use	Background token	Text token	Example label
Single most-important action per context. Never two primaries together.	brandPrimary	text.inverse	Save Changes, + Add New
Supporting action alongside Primary. Always the lesser choice.	brandSubtle	violet-700	Cancel, Go Back
Equal-importance neutral actions with no brand affiliation implied.	transparent	text.primary	Skip, Force Update
Low-emphasis inline or contextual actions. No visible border at rest.	transparent	text.secondary	Open FAQ ↗
Destructive, irreversible actions only. Always confirm with modal.	error.600 ★	text.inverse	Delete File, Remove

★ error.600 (#DC2626) is required for danger button backgrounds. error.500 (#EF4444) achieves only 3.763:1 with white text — a WCAG AA failure. This was corrected in v1.1.

Do & Don't

✓ Do

One Primary per visual context — form, modal footer, card section
Use error.600 for danger button bg (4.829:1 ✓)
Right-align footer groups: [Secondary] [Primary]
Use btn-lg (42px) on mobile to meet 44px touch target
Include a loading state (spinner) for async actions

✗ Don't

Never place two Primary buttons in the same visual group
Never use error.500 as danger button bg — it fails WCAG
Never truncate button labels — shorten the copy, not the button
Never use Danger for warnings — only irreversible destructive actions
Never use Ghost as the sole action — pair it with a stronger variant

Components · 02

Text Field

Form inputs are trust signals. Ambiguous labels, missing error feedback, or invisible focus states erode trust during critical data-entry moments like organization setup and profile configuration.

Input States

Default Helper text on canvas

Focus State Brand ring applied

Error State * Include https://

Disabled Not editable

✓ Do

Labels always above inputs — never inside. Gap: 6px (space.2 - 2)
Error messages are solution-first: "Include https://" not "Invalid URL"
Mobile font-size minimum 16px — prevents iOS viewport auto-zoom
Error state uses color + double-border + icon — never color alone (WCAG 1.4.1)
Mark required with * in error color; optional with (Optional) in text.tertiary

✗ Don't

Never use placeholder text as a label — it disappears on focus
Never remove focus ring — keyboard and screen-reader users depend on it
Never use text.tertiary (#6B7280) on surface.app — 4.477:1 FAIL. Use text.tertiaryOnCanvas
Never hard-code pixel widths on inputs — use width:100%, let parent control width
Never show character count by default — only when user is within 20% of limit

Components · 03

Toggle Switch

Binary ON/OFF for feature flags with immediate effect. Used in the Real-time AI Settings panel for Emotion Detection, Extractive QA, Discovery Questions, and Show Transcripts.

Toggle States

Emotion Detection

Extractive QA

Discovery Questions

Spring animation & accessibility

Toggle thumb uses cubic-bezier(0.34, 1.56, 0.64, 1) for a tactile overshoot feel. Must be suppressed via @media (prefers-reduced-motion: reduce) — replace with transition: background 150ms linear. Wrap the entire toggle row (min 44px height) as the click target — the 22px track alone is too small for touch.

Components · 04

Tab / Chip Selector

Used for AI mode selection (Coaching, Role Play, Resource Recommendations, Tips) and as removable methodology tags in the Organization settings.

Chip Variants

Coaching Role Play Resource Recommendations Tips

consultative Selling ✕ Inbound Selling ✕ Relationship Selling ✕

✓ Do

One selected chip at a time in tab-mode. Multiple in filter mode.
Selected state uses brandPrimary bg + text.inverse label
Removable chips show ✕ on hover — wrap in clickable span with aria-label="Remove [name]"
Chip rows use flex-wrap — never clip overflow on mobile

✗ Don't

Never truncate chip labels — if label is too long, redesign the information architecture
Never use chips for binary settings — use Toggle instead
Never place ✕ on non-removable chips — it implies a delete action that doesn't exist
Never apply rounded radius to chips in Carbon-style contexts — border-radius: 0

Components · 05

Badge & Status Indicator

High-density status signals used in tables (COMPLETED), nav (LIVE), cards (Most Popular), and transcript lists (Confident, Hesitant, Engaged). Every badge uses a semantic color pair.

All Badge Variants

COMPLETED IN PROGRESS SKIPPED AI POWERED Most Popular Optional Confident Hesitant Engaged ● LIVE

✓ Do

Use status dot (6px circle) for process states: COMPLETED, IN PROGRESS, SKIPPED
LIVE badge uses CSS pulse animation + suppress with prefers-reduced-motion
One badge per table cell maximum — stack in tooltip if multiple apply
Sentiment badges (Confident, Hesitant) map to status semantic axis, not process

✗ Don't

Never use color as the only status indicator (WCAG 1.4.1) — dot is required
Never use raw primitive colors for badges — always semantic status pairs
Never mix sentiment badges with process-state badges in the same column
Never apply border-radius.full to badges in flat Carbon-style UI

Token Reference · 01

Color Token Table

All semantic tokens reference primitives. Components reference semantics. Never cross layers. Tokens marked ★ are the primary consumption point for that semantic role.

Token Name	HEX	WCAG	Tag	Usage Rule
interactive.brandPrimary ★	#6340E8	6.124:1	v1.1 fix	All CTA buttons, primary actions, text.brand, border.focus. White text AA.
interactive.brandDecorative	#7B5CF7	≥18px	Decor only	Icon fills, gradients, logo mark, display text ≥18px. NEVER body/button labels.
interactive.brandPrimaryHover	#4F2EC8	—	Hover	Button hover bg. 100ms ease-out.
interactive.brandPrimaryPress	#3C1FA3	—	Active	Active/pressed. + scale(0.98), 50ms instant.
interactive.brandSubtle	#EDE8FF	—	Secondary bg	Secondary button bg. violet-700 text = 6.877:1 ✓
surface.app	#F5F6FA	—	Canvas	Main page canvas. Dark: #0E0F18. Always use `tertiaryOnCanvas` here.
surface.base	#FFFFFF	—	Cards	Cards, panels, modals, inputs. Elevation via shadow.* tokens.
surface.sidebar	#0B0D17	—	Mode-stable	Always dark. Does not invert in dark mode. Deepens to #07080F.
text.primary	#111827	17.7:1	Primary	Headings, key values, primary body copy.
text.secondary	#374151	10.3:1	Secondary	Body text, form labels, table cells on white surfaces.
text.tertiary	#6B7280	4.834:1 white	White only	On WHITE surfaces (cards, modals) ONLY. Fails on surface.app.
text.tertiaryOnCanvas NEW	#374151	9.54:1	v1.1 fix	Helper text, timestamps on surface.app. gray-500 was 4.477:1 FAIL on canvas.
component.button.dangerBg NEW	#DC2626	4.829:1	v1.1 fix	Danger button bg only. error-600 not error-500. White/error-500 = 3.763:1 FAIL.

Token Reference · 02

Typography Token Table

Token	Family	Size	Weight	Line-H	Letter-S	Context
scale.display-xl	Sora	60px	800	1.05	-0.03em	Landing hero pages
scale.display-lg	Sora	48px	800	1.05	-0.03em	Dashboard greeting
scale.heading-h1	Sora	36px	700	1.15	-0.025em	Page-level titles
scale.heading-h2	Sora	28px	700	1.20	-0.02em	Section headings
scale.heading-h3	Sora	22px	700	1.25	-0.015em	Card titles, chart headers
scale.heading-h4	Sora	18px	600	1.30	-0.01em	Modal titles, sub-sections
scale.body-xl	DM Sans	18px	400	1.65	0	Intro paragraphs, hero descriptions
scale.body-lg	DM Sans	15px	400	1.65	0	Standard body copy
scale.body-md	DM Sans	13px	400	1.55	0	Dense UI, table cells, timestamps
scale.label-md	DM Sans	13px	500	1.40	0	Buttons, form labels, nav items
scale.label-sm	DM Sans	11px	600	1.40	0.08em	Table headers UPPERCASE
scale.code-md	JetBrains Mono	13px	500	1.60	0	Token names, code blocks
scale.code-sm	JetBrains Mono	11px	500	1.40	0.08em	Table col headers, API refs (CAPS)

Token Reference · 03

Spacing & Shape Tokens

Spacing Tokens — 4px base grid

Token	Value	Tier	Usage
spacing.2	8px	Micro	Badge pad, icon gap
spacing.3	12px	Comp	Button pad-sm, input pad-v
spacing.4	16px	Comp	Card pad-sm, table cell
spacing.5	20px	Comp	Card pad-md, sidebar outer
spacing.6	24px	Comp	Card pad-lg, modal body
spacing.8	32px	Layout	Content block margin
spacing.12	48px	Layout	Section rhythm, tablet pad
spacing.16	64px	Layout	Page section top padding

Border Radius Tokens

Token	Value	Usage
radius.xs	4px	Token tags, code pills, inline badges
radius.sm	6px	Button-xs, small annotation labels
radius.md	8px	Buttons-sm, modal close button
radius.lg ★	12px	Default — inputs, buttons md/lg, nav items
radius.xl	16px	Cards-sm, stat tiles, icon boxes
radius.2xl	24px	Feature cards, modals, settings panels
radius.3xl	32px	Hero cards, mobile bottom sheets
radius.full	9999px	Pills ONLY — badges, chips, toggles, avatars

Engineering · Token Export

Production JSON — v1.1.0

W3C DTCG-compatible. Every semantic token carries $extensions.amotions.modes with light and dark values. Load into Figma Tokens Studio or run through Style Dictionary to generate CSS, JS, iOS, and Android outputs automatically.

Setup instructions

Figma Tokens Studio: Open plugin → Load from JSON → Select amotions-tokens-v1.1.json → Link token sets: primitives → semantic → component → Apply to Figma styles automatically.
Style Dictionary 4.x: npx style-dictionary build --config sd.config.json — reads $extensions.amotions.modes to generate [data-theme="dark"] CSS overrides. Zero component code changes required for dark mode.

amotions-tokens-v1.1.json — W3C DTCG · 690 lines Production-Ready v1.1.0

{
  "$metadata": { "name":"Amotions AI Design System", "version":"1.1.0",
    "standard":"W3C Design Token Community Group (DTCG)",
    "compatibility": ["Figma Tokens Studio 2.x", "Style Dictionary 4.x"], /* JSON → [data-theme=dark] CSS auto-generated */
    "transformRules": { "cssVar":"kebab-case, drop semantic prefix", "example":"interactive.brandPrimary → --interactive-brand-primary" },
    "spacingPolicy": { "layout":"8pt", "component":"4pt", "micro":"2pt inner padding only" }
  },

  "color": {
    /* ── PRIMITIVES — never reference in components ── */
    "primitive": {
      "navy": {
        "900": {"$value":"#070D1F", "$type":"color", "$description":"Sidebar, deepest surface, text on light hues"},
        "700": {"$value":"#0B1E80", "$type":"color"},
        "500": {"$value":"#1636C8", "$type":"color"}
      },
      "blue": {
        "700": {"$value":"#0A2FA0", "$type":"color"},
        "500": {"$value":"#1855E8", "$type":"color", "$description":"★ interactive — white/blue500=5.99:1 ✓"},
        "400": {"$value":"#5A88F0", "$type":"color"},
        "200": {"$value":"#A8C0F8", "$type":"color"},
        "100": {"$value":"#DCE8FE", "$type":"color"}
      },
      "cyan": {
        "700": {"$value":"#008A80", "$type":"color"},
        "500": {"$value":"#00D4C0", "$type":"color", "$description":"Real-Time AI accent — DECORATIVE ONLY, navy text required"},
        "100": {"$value":"#D0F5F3", "$type":"color"}
      },
      "lime": {
        "500": {"$value":"#90D45E", "$type":"color", "$description":"Practices — DECORATIVE ONLY, navy text required"},
        "100": {"$value":"#E8F7D8", "$type":"color"}
      },
      "peach": {
        "500": {"$value":"#F7A85C", "$type":"color", "$description":"AI Coach — DECORATIVE ONLY, navy text required"},
        "100": {"$value":"#FDE8D0", "$type":"color"}
      },
      "pink": {
        "500": {"$value":"#F57ABE", "$type":"color", "$description":"AI Roleplay — DECORATIVE ONLY, navy text required"},
        "100": {"$value":"#FDE0F0", "$type":"color"}
      },
      "lavender": {
        "700": {"$value":"#6340E8", "$type":"color", "$description":"★ brandPrimary — white/lav700=6.124:1 WCAG AA ✓"},
        "600": {"$value":"#9B6CE8", "$type":"color"},
        "500": {"$value":"#C08EEE", "$type":"color", "$description":"brandAccent — logo, gradients. DECORATIVE ONLY"},
        "300": {"$value":"#DBC0F8", "$type":"color"},
        "100": {"$value":"#F0E8FD", "$type":"color"}
      }
    },

    /* ── SEMANTIC — purpose-named aliases, all carry dark mode values ── */
    "semantic": {
      "surface": {
        "app": {"$value":"#F5F6FA", "$type":"color", "$description":"Main canvas — use text.tertiaryOnCanvas (not text.tertiary) here",
          "$extensions": {"amotions.modes": {"light":"#F5F6FA", "dark":"#0E0F18" }}},
        "base": {"$value":"#FFFFFF", "$type":"color", "$description":"Cards, panels, inputs. Elevation via shadow.* tokens",
          "$extensions": {"amotions.modes": {"light":"#FFFFFF", "dark":"#1F2937" }}},
        "sidebar": {"$value":"#0D1117", "$type":"color", "$description":"MODE-STABLE — always dark, same in both modes",
          "$extensions": {"amotions.modes": {"light":"#0D1117", "dark":"#07080F" }}}
      },
      "text": {
        "primary": {"$value":"#111827", "$type":"color", "$description":"17.7:1 on white ✓",
          "$extensions": {"amotions.modes": {"light":"#111827", "dark":"#F0F1F8" }}},
        "secondary": {"$value":"#374151", "$type":"color", "$description":"10.3:1 on white ✓",
          "$extensions": {"amotions.modes": {"light":"#374151", "dark":"#C4C8DA" }}},
        "tertiary": {"$value":"#6B7280", "$type":"color", "$description":"On white cards only: 4.834:1 ✓. FAILS on surface.app.",
          "$extensions": {"amotions.modes": {"light":"#6B7280", "dark":"#7B82A4" }}},
        "tertiaryOnCanvas": {"$value":"#374151", "$type":"color", "$description":"★ v1.1 NEW — 9.54:1 on surface.app ✓. Use on canvas, not text.tertiary.",
          "$extensions": {"amotions.modes": {"light":"#374151", "dark":"#7B82A4" }}},
        "inverse": {"$value":"#FFFFFF", "$type":"color", "$description":"Text on dark/brand backgrounds. MODE-STABLE."},
        "brand": {"$value":"#6340E8", "$type":"color", "$description":"v1.1 fix. Inline brand text. 6.124:1 on white ✓"},
        "placeholder": {"$value":"#9CA3AF", "$type":"color", "$description":"Decorative only — WCAG exempt. Min 16px on mobile (iOS zoom)."}
      },
      "border": {
        "default": {"$value":"#E5E7EB", "$type":"color", "$extensions": {"amotions.modes": {"light":"#E5E7EB", "dark":"#374151" }}},
        "focus": {"$value":"#6340E8", "$type":"color", "$description":"v1.1 fix. Always use: border-color + box-shadow 0 0 0 2px rgba(99,64,232,.12)"},
        "error": {"$value":"#da1e28", "$type":"color"}
      },
      "interactive": {
        "brandPrimary": {"$value":"#6340E8", "$type":"color", "$description":"v1.1 fix. Was #7B5CF7 → 4.453:1 FAIL. Now 6.124:1 ✓",
          "$extensions": {"amotions.modes": {"light":"#6340E8", "dark":"#6340E8" }}},
        "brandDecorative": {"$value":"#C08EEE", "$type":"color", "$description":"Official lav.500. NEVER body/button text (2.52:1 fails). Logos, gradients, icons."},
        "brandHover": {"$value":"#4F2EC8", "$type":"color", "$description":"Button hover. 100ms ease-out."},
        "brandPress": {"$value":"#3C1FA3", "$type":"color", "$description":"Button active. + scale(0.98), 50ms."},
        "brandSubtle": {"$value":"#F0E8FD", "$type":"color", "$description":"Secondary button bg. lav.700 text on this = 6.877:1 ✓"}
      },
      "status": {
        "successText": {"$value":"#044317", "$type":"color", "$description":"4.835:1 on successBg ✓"},
        "successBg": {"$value":"#defbe6", "$type":"color", "$extensions": {"amotions.modes": {"light":"#defbe6", "dark":"rgba(36,161,72,.15)" }}},
        "warningText": {"$value":"#4d3800", "$type":"color", "$description":"4.510:1 on warningBg ✓"},
        "warningBg": {"$value":"#fdf6dd", "$type":"color"},
        "errorText": {"$value":"#750e13", "$type":"color", "$description":"5.296:1 on errorBg ✓"},
        "errorBg": {"$value":"#fff1f1", "$type":"color"},
        "infoText": {"$value":"{color.primitive.navy.700}", "$type":"color", "$description":"v1.1 fix. Was orphan #1D4ED8. navy.700=7.217:1 on infoBg ✓"},
        "infoBg": {"$value":"#edf5ff", "$type":"color"}
      },
      "gradient": { /* $type: custom-gradient — NOT color (v1.1 DTCG fix) */
        "realtimeAI": {"$value":"linear-gradient(135deg, {color.primitive.navy.700}, {color.primitive.blue.500})", "$type":"custom-gradient"},
        "aiCoach": {"$value":"linear-gradient(135deg, {color.primitive.lavender.500}, {color.primitive.peach.500})", "$type":"custom-gradient"},
        "aiRoleplay": {"$value":"linear-gradient(135deg, {color.primitive.pink.500}, {color.primitive.lavender.500})", "$type":"custom-gradient"},
        "practices": {"$value":"linear-gradient(135deg, {color.primitive.lime.500}, {color.primitive.cyan.500})", "$type":"custom-gradient"}
      }
    }
  },

  "typography": {
    "fontFamily": {
      "display": {"$value":"'Sora', sans-serif", "$type":"fontFamily", "$description":"H1–H4 headings ONLY. Never for body, labels, or UI."},
      "body": {"$value":"'DM Sans', sans-serif", "$type":"fontFamily", "$description":"All UI: labels, buttons, nav, body copy, inputs."},
      "mono": {"$value":"'JetBrains Mono', monospace", "$type":"fontFamily", "$description":"Tokens, code, table headers only."}
    },
    "scale": { /* All 13 scale tokens — each is $type: typography */
      "display-xl": {"$value": {"fontFamily":"{typography.fontFamily.display}", "fontSize":"60px", "fontWeight": 800, "lineHeight": 1.05, "letterSpacing":"-0.03em" }, "$type":"typography"},
      "display-lg": {"$value": {"fontFamily":"{typography.fontFamily.display}", "fontSize":"48px", "fontWeight": 800, "lineHeight": 1.05, "letterSpacing":"-0.03em" }, "$type":"typography", "$description":"Dashboard greeting"},
      "heading-h1": {"$value": {"fontFamily":"{typography.fontFamily.display}", "fontSize":"36px", "fontWeight": 700, "lineHeight": 1.15, "letterSpacing":"-0.025em" }, "$type":"typography"},
      "heading-h2": {"$value": {"fontFamily":"{typography.fontFamily.display}", "fontSize":"28px", "fontWeight": 700, "lineHeight": 1.20, "letterSpacing":"-0.02em" }, "$type":"typography"},
      "heading-h3": {"$value": {"fontFamily":"{typography.fontFamily.display}", "fontSize":"22px", "fontWeight": 700, "lineHeight": 1.25, "letterSpacing":"-0.015em" }, "$type":"typography"},
      "heading-h4": {"$value": {"fontFamily":"{typography.fontFamily.display}", "fontSize":"18px", "fontWeight": 600, "lineHeight": 1.30, "letterSpacing":"-0.01em" }, "$type":"typography"},
      "body-xl": {"$value": {"fontFamily":"{typography.fontFamily.body}", "fontSize":"18px", "fontWeight": 400, "lineHeight": 1.65 }, "$type":"typography"},
      "body-lg": {"$value": {"fontFamily":"{typography.fontFamily.body}", "fontSize":"15px", "fontWeight": 400, "lineHeight": 1.65 }, "$type":"typography"},
      "body-md": {"$value": {"fontFamily":"{typography.fontFamily.body}", "fontSize":"13px", "fontWeight": 400, "lineHeight": 1.55 }, "$type":"typography", "$description":"Table cells, dense UI"},
      "label-md": {"$value": {"fontFamily":"{typography.fontFamily.body}", "fontSize":"13px", "fontWeight": 500, "lineHeight": 1.40 }, "$type":"typography", "$description":"★ Buttons, labels, nav items — primary UI weight"},
      "label-sm": {"$value": {"fontFamily":"{typography.fontFamily.body}", "fontSize":"11px", "fontWeight": 600, "lineHeight": 1.40, "letterSpacing":"0.08em", "textTransform":"uppercase" }, "$type":"typography", "$description":"Table headers, eyebrows — JetBrains Mono equivalent in DM Sans"},
      "code-md": {"$value": {"fontFamily":"{typography.fontFamily.mono}", "fontSize":"13px", "fontWeight": 500, "lineHeight": 1.60 }, "$type":"typography", "$description":"Token names, code blocks"},
      "code-sm": {"$value": {"fontFamily":"{typography.fontFamily.mono}", "fontSize":"10px", "fontWeight": 600, "lineHeight": 1.40, "letterSpacing":"0.08em", "textTransform":"uppercase" }, "$type":"typography", "$description":"Table column headers — UPPERCASE JetBrains Mono"}
    }
  },

  "spacing": { /* 8pt layout / 4pt component / 2pt micro */
    "1": {"$value":"4px", "$type":"dimension", "$description":"2pt micro — icon padding"},
    "2": {"$value":"8px", "$type":"dimension", "$description":"2pt micro — badge pad, icon gap"},
    "3": {"$value":"12px", "$type":"dimension", "$description":"4pt component — button pad-sm"},
    "4": {"$value":"16px", "$type":"dimension", "$description":"4pt component — card pad-sm, table cell"},
    "5": {"$value":"20px", "$type":"dimension", "$description":"4pt component — card pad-md"},
    "6": {"$value":"24px", "$type":"dimension", "$description":"4pt component — card pad-lg, modal body"},
    "8": {"$value":"32px", "$type":"dimension", "$description":"8pt layout — content block margin"},
    "10": {"$value":"40px", "$type":"dimension", "$description":"8pt layout — section header spacing"},
    "12": {"$value":"48px", "$type":"dimension", "$description":"8pt layout — section rhythm"},
    "16": {"$value":"64px", "$type":"dimension", "$description":"8pt layout — page section top padding"},
    "20": {"$value":"80px", "$type":"dimension", "$description":"8pt layout — header padding"}
  },

  "borderRadius": {
    "xs": {"$value":"4px", "$type":"dimension", "$description":"Token tags, code pills"},
    "sm": {"$value":"6px", "$type":"dimension", "$description":"Button-xs, annotation labels"},
    "md": {"$value":"8px", "$type":"dimension", "$description":"Button-sm, modal close button"},
    "lg": {"$value":"12px", "$type":"dimension", "$description":"★ DEFAULT — inputs, buttons md/lg, nav items"},
    "xl": {"$value":"16px", "$type":"dimension", "$description":"Cards-sm, stat tiles"},
    "2xl": {"$value":"24px", "$type":"dimension", "$description":"Feature cards, modals"},
    "3xl": {"$value":"32px", "$type":"dimension", "$description":"Hero cards, mobile bottom sheets"},
    "full": {"$value":"9999px", "$type":"dimension", "$description":"Pills ONLY — badges, chips, toggles, avatars"}
  },

  "shadow": {
    "xs": {"$value":"0 1px 2px rgba(0,0,0,.05)", "$type":"shadow", "$description":"Default card ambient"},
    "sm": {"$value":"0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.06)", "$type":"shadow"},
    "md": {"$value":"0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05)", "$type":"shadow", "$description":"Card hover, popovers"},
    "lg": {"$value":"0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.05)", "$type":"shadow", "$description":"Dropdowns, menus"},
    "xl": {"$value":"0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.04)", "$type":"shadow", "$description":"Modals, overlays"},
    "2xl": {"$value":"0 25px 50px -12px rgba(0,0,0,.18)", "$type":"shadow", "$description":"Full-screen dialogs"},
    "brand": {"$value":"0 4px 14px rgba(99,64,232,.30)", "$type":"shadow", "$description":"Primary button default glow"},
    "brandHover": {"$value":"0 8px 24px rgba(99,64,232,.35)", "$type":"shadow", "$description":"Renamed from brandLg (v1.1) — state name, not size"}
  },

  "motion": {
    "duration": {
      "instant": {"$value":"50ms", "$type":"duration", "$description":"Button press scale snap"},
      "fast": {"$value":"100ms", "$type":"duration", "$description":"Hover color/border transitions"},
      "normal": {"$value":"200ms", "$type":"duration", "$description":"Tooltips, dropdowns, toggles"},
      "slow": {"$value":"350ms", "$type":"duration", "$description":"Modal enter/exit, sidebar expand"}
    },
    "easing": {
      "out": {"$value":"cubic-bezier(0.16, 1, 0.3, 1)", "$type":"cubicBezier", "$description":"Entering elements"},
      "in": {"$value":"cubic-bezier(0.7, 0, 0.84, 0)", "$type":"cubicBezier", "$description":"Exiting elements"},
      "inout": {"$value":"cubic-bezier(0.65, 0, 0.35, 1)", "$type":"cubicBezier", "$description":"Repositioning"},
      "spring": {"$value":"cubic-bezier(0.34, 1.56, 0.64, 1)", "$type":"cubicBezier", "$description":"Toggle thumb, badge entrance — suppress with prefers-reduced-motion"}
    }
  },

  "component": { /* Component tokens reference semantics, never primitives */
    "button": {
      "primaryBg": {"$value":"{color.semantic.interactive.brandPrimary}", "$description":"#6340E8 — 6.124:1 with white ✓"},
      "primaryHoverBg": {"$value":"{color.semantic.interactive.brandHover}"},
      "primaryPressBg": {"$value":"{color.semantic.interactive.brandPress}"},
      "secondaryBg": {"$value":"{color.semantic.interactive.brandSubtle}"},
      "dangerBg": {"$value":"{color.primitive.lavender.900}", "$description":"v1.1 NEW: #DC2626 (error-600). white/error-600=4.829:1 ✓. NEVER error-500 (3.763:1 FAIL)."},
      "label": {"$value":"{color.semantic.text.inverse}"},
      "height": {"sm":"32px", "md":"38px", "lg":"42px", /* ≥44px touch target on mobile */},
      "paddingH": {"sm":"12px", "md":"18px", "lg":"24px"},
      "focusRing": {"$value":"0 0 0 2px rgba(99,64,232,.25)", "$description":"NEVER remove — required for keyboard & screen reader users"}
    },
    "input": {
      "height": {"$value":"40px"},
      "paddingH": {"$value":"14px", "$description":"2pt micro-grid ✓"},
      "paddingV": {"$value":"10px", "$description":"2pt micro-grid ✓"},
      "borderWidth": {"$value":"1px", "$description":"1px rest, visual bottom border on focus style"},
      "focusRing": {"$value":"0 0 0 2px rgba(99,64,232,.12)"},
      "mobileFontSize": {"$value":"16px", "$description":"MINIMUM on mobile — prevents iOS viewport auto-zoom on focus"}
    },
    "toggle": {
      "trackWidth": {"$value":"40px"},
      "trackHeight": {"$value":"24px"},
      "thumbSize": {"$value":"16px"},
      "thumbTravel": {"$value":"16px", "$description":"translateX value when ON"},
      "easing": {"$value":"{motion.easing.spring}", "$description":"Overshoot spring — suppress with prefers-reduced-motion"}
    },
    "badge": {
      "paddingH": {"$value":"8px"},
      "paddingV": {"$value":"3px", "$description":"Visual-only — exempt from 4pt grid"},
      "fontSize": {"$value":"11px", "$description":"Minimum allowed text size"}
    },
    "icon": {
      "xs": {"$value":"12px", "$description":"Badge dots only — never interactive"},
      "sm": {"$value":"16px", "$description":"★ Sidebar nav, buttons, table actions — stroke 1.5px"},
      "md": {"$value":"20px", "$description":"Modal headers, tabs"},
      "lg": {"$value":"24px", "$description":"Feature cards, page headers"},
      "xl": {"$value":"32px", "$description":"Empty states — Bold style"},
      "strokeWeight": {"$value":"1.5px", "$description":"Iconsax Linear — consistent at all sizes"}
    }
  }

}
/* ─────────────────────────────────────────────────────────── */
/* Style Dictionary CSS output (auto-generated): */
/* :root { --interactive-brand-primary: #6340E8; ... } */
/* [data-theme=\"dark\"] { --surface-base: #1F2937; ... } */
/* ─────────────────────────────────────────────────────────── */

Single Source of Truth · Foundation + Components + Iconography + JSON · March 2026

v1.1.0 WCAG 2.1 AA W3C DTCG Iconsax 8pt Grid

Amotions AIDesign Language

Foundation

Components

Iconography

Engineering

8pt Grid System

Color System & WCAG 2.1 AA

Typography Scale

Elevation & Shadow Scale

Dashboard — Home

Settings — Organization Profile

Data Table — Organization Files

Iconography — Iconsax

Button

Text Field

Toggle Switch

Tab / Chip Selector

Badge & Status Indicator

Color Token Table

Typography Token Table

Spacing & Shape Tokens

Production JSON — v1.1.0

Amotions AI
Design Language