Design Reference — ajaRed Design System

01 — Color

Primary — Teal

Ink Darkest

#023B3B

Ink Dark

#046363

Primary

#058C8C

Light

#8CCACA

Lighter

#B2DBDB

Lightest

#E6F4F4

Accents

Terracotta

#A1665E

Terra Dark

#935D56

Terra Light

#D4B9B5

Gold

#D09958

Orange

#EC9A29

Purple

#9747FF

Green

#138C05

Semantic

Success

#61B258

Success Lt

#E7F3F4

Warning

#D6B739

Warning Lt

#F7EBC6

Error

#8C1305

Error Lt

#FFA18A

Info

#71C5E6

Info Lt

#EAF6FB

Neutrals

Black

#000

900

#141414

800

#323232

700

#434343

600

#626262

500

#717171

400

#939393

300

#B6B6B6

200

#D9D9D9

100

#EEEEEE

50

#F5F5F5

White

#FFF

Data Visualization

Categorical series

#058C8C

#A1665E

#D09958

#9747FF

#138C05

#023B3B

Sentiment

Positive

#61B258

Neutral

#939393

Negative

#EC9A29

Sequential: teal ramp — used in hour×day heatmaps. · Diverging: terra/teal — used for over/under axes (rare).

02 — Design Tokens (packages/core/tokens.css)

Color variables

--color-primary#058c8c

--color-primary-dark#046363

--color-primary-darker#023b3b

--color-primary-light#8ccaca

--color-primary-lightest#e6f4f4

--color-accent-terracotta#a1665e

--color-accent-terracotta-dark#935d56

--color-accent-gold#d09958

--color-accent-orange#ec9a29

--color-accent-purple#9747ff

--color-accent-green#138c05

--color-bg-primary#ffffff

--color-bg-secondary#f7f8f7

--color-bg-dark#141414

--color-text-primary#323232

--color-text-secondary#626262

--color-text-tertiary#939393

--color-border-light#e2e2e2

--color-border-dark#b6b6b6

--color-success#61b258

--color-warning#d6b739

--color-error#8c1305

--color-info#71c5e6

Typography variables

--font-primaryiA Writer Quattro S

--font-secondaryInter

--font-monoiA Writer Mono S

--font-size-xs0.5rem (8px)

--font-size-sm0.75rem (12px)

--font-size-base1rem (16px)

--font-size-md1.125rem (18px)

--font-size-lg1.25rem (20px)

--font-size-xl1.5rem (24px)

--font-size-2xl2rem (32px)

--font-size-3xl2.25rem (36px)

--font-size-4xl3rem (48px)

--font-size-5xl4rem (64px)

--font-weight-normal400

--font-weight-medium500

--font-weight-semibold600

--font-weight-bold700

--line-height-tight1.25

--line-height-normal1.5

--line-height-relaxed1.75

Transition variables

--transition-fast150ms ease

--transition-base250ms ease

--transition-slow350ms ease

Z-index variables

--z-dropdown1000

--z-sticky1020

--z-modal-backdrop1040

--z-modal1050

--z-tooltip1070

Spacing variables (--space-N)

Token	rem	px
--space-1	0.25rem	4px
--space-2	0.5rem	8px
--space-3	0.75rem	12px
--space-4	1rem	16px
--space-5	1.25rem	20px
--space-6	1.5rem	24px
--space-8	2rem	32px
--space-10	2.5rem	40px
--space-12	3rem	48px
--space-16	4rem	64px
--space-20	5rem	80px
--space-24	6rem	96px

Border radius variables

Token	Value	Preview
--radius-none	0
--radius-sm	2px
--radius-base	4px
--radius-md	6px
--radius-lg	8px
--radius-xl	12px
--radius-2xl	16px
--radius-3xl	24px
--radius-full	9999px

Marketing default: --radius-sm (2px). App UI: 8–16px. Mobile CTAs: --radius-full.

Shadow variables

--shadow-sm0 1px 2px 0 rgb(0 0 0 / 0.05)

--shadow-base0 1px 3px 0 / 0.1, 0 1px 2px -1px / 0.1

--shadow-md0 4px 6px -1px / 0.1, 0 2px 4px -2px / 0.1

--shadow-lg0 10px 15px -3px / 0.1, 0 4px 6px -4px / 0.1

--shadow-xl0 20px 25px -5px / 0.1, 0 8px 10px -6px / 0.1

--shadow-2xl0 25px 50px -12px rgb(0 0 0 / 0.25)

Philosophy: "Most surfaces are flat; shadow is editorial." Use sparingly for hierarchy only.

03 — Typography

Display / Hero
Bold 700 · -0.04em · lh 0.9 Get AI working today

H1 · 48px / 57px · Bold Heading one

H2 · 36px / 43px · Bold Heading two

H3 · 30px / 36px · Bold Heading three

H4 · 24px / 28px · Bold Heading four

H5 · 20px / 24px · Bold Heading five

Body 2 · 16px / 24px · Regular Regular body text for primary content areas and reading.

Body 3 · 14px / 21px · Regular Smaller body text for secondary content and supporting detail.

Body 4 · 12px / 18px · Regular Fine print, captions, form helper text, metadata.

Mono · Labels / Coords
ls 0.05–0.08em · all caps 43.6°N 79.4°W · COORDINATES · ADVISORY · LABEL · TRACK NUMBER

Voice: direct, quietly confident. British-leaning spelling. Em dashes. No emoji. Short declaratives — one impactful closer. "Early failure is cheap. Late failure is not."

04 — Motion

Snap

cubic-bezier(0.4, 0, 0.2, 1)

180ms · direct manipulation

Standard

cubic-bezier(0.2, 0, 0, 1)

900ms · navigation

Spring

cubic-bezier(0.34, 1.56, 0.64, 1)

1200ms · welcome only

Fade Ambient

ease-in-out · continuous loop

1400ms · ambient

Moiré Drift

linear · infinite · backgrounds only

8s · infinite

Reduced motion: substitute all with 200ms opacity cross-fade. Honor prefers-reduced-motion. Principle: restrained — "page-turning" sensation, no exaggerated effects.

05 — Components

Buttons — Marketing (ajr-button)

2px border-radius · ALL-CAPS · Ink color scheme. Variants: Primary, Secondary, Tertiary, Ghost, Danger, Success. App buttons use rounded 8–16px corners.

Alerts (ajr-alert)

Success — Your changes have been saved.

Heads up — Double-check this before shipping.

Error — Please check your input and try again.

Info — This action may take a few minutes.

Types: Success, Warning, Error, Info. Variants: Standard, Filled, Dismissible.

Badges (ajr-badge)

Primary Success Warning Error Info Outlined

Sizes: SM, MD, LG. Options: Outlined, Dot style.

Form Inputs (ajr-input)

Email address

We'll never share your email.

Username

At least 3 characters required.

Types: Text, Textarea, Select, Checkbox, Radio. States: Default, Focus, Error, Success, Disabled.

Offer Card

01 · Advisory

Talk to a Human about AI

A 30-minute conversation with someone who has done this before. Not a chatbot. Not a vendor sales pitch.

Structure: number + category label (mono, all-caps) → bold headline → body text.

Cards (ajr-card)

Default card

Standard shadow elevation for primary content.

Flat card

Bordered, no shadow — for secondary content.

Variants: Default (shadow), Flat (bordered), Elevated. Sections: header, body, footer. Modal also available (JS-required).

06 — CSS Class Conventions

Buttons

ajr-button
ajr-button--primary
ajr-button--secondary
ajr-button--tertiary
ajr-button--ghost
ajr-button--danger
ajr-button--success
ajr-button--sm
ajr-button--md
ajr-button--lg

Inputs & Cards

ajr-input
ajr-input-group
ajr-input-label
ajr-input--error
ajr-card
ajr-card-header
ajr-card-body
ajr-card-footer

Alerts & Type

ajr-alert
ajr-alert--success
ajr-alert--warning
ajr-alert--error
ajr-alert--info
ajr-alert--outlined
ajr-h1
ajr-body

CDN: <link rel="stylesheet" href="https://unpkg.com/@ajared/design-system/dist/ajared.min.css">
NPM: npm install @ajared/design-system · Works with React, Vue, Vanilla JS
Latest 2 versions of Chrome, Firefox, Safari, Edge. IE not supported.

07 — Technical Specification (AJARED-DS Rev 1.0.0)

ClassificationDesign Instruments · Modern Swiss style

Grid foundation20px baseline · 8pt system · base unit x = 4px · increments: 4, 8, 12, 16, 24, 32, 48, 64, 96

Grid ruler80px gutter · 20px minor / 100px major ticks · 500px marker = terracotta

AccessibilityWCAG AA · 4.5:1 minimum contrast ratio

Marketing rulesNo gradients · no emoji · no drop-shadow pill buttons · 2px radius · ALL-CAPS buttons · CSS icon primitives + Unicode

App rulesRounded 8–16px corners · Material Symbols Outlined for icons

Spec bg color#F5F4EF

Source filescolors_and_type.css · packages/core/tokens.css · packages/core/tokens.json · packages/core/tailwind.config.js

UI kitsui_kits/website/ (marketing) · ui_kits/app/ (Family Tree) · ui_kits/sos/ (Sense of Self)

Built by@chunnodu + claudecode