43.6°N 79.4°W
Ajared Research Inc. Ajared Research Inc.

ajaRed Design System.

Version1.0
StackVanilla CSS / JSX
Prefixajr-
FontsiA Writer Quattro S + Mono S
0
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
01 — UI Kits

Editorial marketing surface. Header, hero, offer cards, capability blocks, contact, footer — ajared.ca in React.

Mobile shell for the Family Tree app. Splash, login, tree view, invites, account — iOS-like frames.

Identity reflection companion. Onboarding, today, reflect, prompts, library, profile screens.

02 — Color
Teal · Primary#058C8C
Ink Dark#046363
Ink Darkest#023B3B
Light#8CCACA
Lighter#B2DBDB
Lightest#E6F4F4
Terracotta#A1665E
Terra Dark#935D56
Terra Light#D4B9B5
Gold#D09958
Orange#EC9A29
Purple#9747FF
Green#138C05
#000
900
800
700
600
500
400
300
200
100
50
WHT
Success#61B258
Warning#D6B739
Error#8C1305
Info#71C5E6
#E7F3F4 success-lt
#F7EBC6 warn-lt
#FFA18A error-lt
#EAF6FB info-lt
Categorical — series
#058C8C
#A1665E
#D09958
#9747FF
#138C05
#023B3B
Sentiment — positive / neutral / negative
Positive · #61B258
Neutral · #939393
Negative · #EC9A29
Sequential heatmap — teal ramp
Diverging — terra / teal
03 — Typography
Get AI working
today.
iA Writer Quattro S · Bold 700 · -0.04em · line-height 0.9
Heading 1 · Bold 48/57
Heading 2 · Bold 36/43
Heading 3 · Bold 30/36
Heading 4 · Bold 24/28
Heading 5 · Bold 20/24

We go past proofs of concepts to AI products that actually work for you. Really useful, now.

Body 2 · 16/24 · Regular. Figure out what's actually going on before anyone starts building.

Body 3 · 14/21 · Regular. Most assumptions are wrong — we design lean experiments that expose which ones to kill early.

Body 4 · 12/18 · Regular. Secondary metadata, captions.

COORDINATES · LABEL · ALL CAPS 43.6332° N, 79.4141° W 01 · ADVISORY · TRACK NUMBER
iA Writer Mono S · letter-spacing 0.05–0.08em
"Early failure is cheap. Late failure is not."

Direct, editorial, quietly confident. We / you. Short declaratives, then one sentence that does the work.

VOICE · No emoji · British-leaning spelling · Em dashes
04 — Layout & Motion
481216202432404864
8-POINT GRID · space-1 → space-16
0
100
200
300
400
500
600
INFORMATION ARCHITECTURE
Ruler · Grid · Coordinates

Ruler marginalia · 80px gutter · 20px minor / 100px major ticks · 500px is terracotta.

none 0
sm 2
base 4
lg 8
xl 12
2xl 16
full pill
DEFAULT · 2px (marketing) · Mobile CTA pills use full
sm
base
md
lg
swatch ★
ELEVATION · most surfaces are flat; shadow is editorial
MOTION · TIMINGS + EASING
Motion at Ajared is restrained. Most things should feel like a page turning, not a slot machine. Use snap for direct-manipulation; standard for navigational transitions; spring only for welcoming moments.
Snap
180ms · cubic-bezier(0.4, 0, 0.2, 1)
Standard
900ms · cubic-bezier(0.2, 0, 0, 1)
Spring (welcome)
1200ms · cubic-bezier(0.34, 1.56, 0.64, 1)
Fade (ambient)
1400ms · ease-in-out · loop
Moiré drift
8s · linear · infinite · backgrounds only
Reduce-motion: substitute all animations with 200ms opacity cross-fades. Honor prefers-reduced-motion.
05 — Components
Learn more →
MARKETING BUTTONS · 2px radius · all-caps
APP BUTTONS · from @ajared/design-system · .ajr-button
We'll never share your email.
At least 3 characters.
01 · ADVISORY

Talk to a Human about AI

Not a chatbot or a vendor pitch. A 30-minute conversation with an AI practitioner.
Primary Secondary Success Warning Error Info
Outlined Outlined
Success. Your changes have been saved.
Heads up. Double-check this before shipping.
Error. Please check your input.
06 — Brand
Ajared Logo
Ajared Research Inc.
PRIMARY MARK · ajaRed
COMPANY
ajaRed
#058C8C
#A1665E
Header / band usage · iA Writer Quattro S Bold 36
arrow_back_ios keyboard_arrow_right notifications_none person share close done search filter_list error_outline warning_amber check_box
MATERIAL SYMBOLS OUTLINED · used in mobile apps · CDN
arrow
status dot
+open
+close
›chevron
↗external
✓check
GLYPH PRIMITIVES · used on marketing surfaces
Navigation · Chrome
System nav used across all app screens. Material Symbols Outlined, 24px default, weight 400.
arrow_back_iosback
arrow_forward_iosforward
closeclose
menumenu
searchsearch
ios_shareshare
more_horizmore
tunefilter
notificationsnotify
settingssettings
Sense of Self · Metrics & engagement
favoritelike
repeatretweet
chat_bubble_outlinereply
alternate_emailmention
bookmarksave
visibilityviews
trending_uptrend
moodpositive
sentiment_neutralneutral
mood_badnegative
Family Tree · Relationships
personperson
groupgroup
family_restroomfamily
person_addinvite
mailmail
verifiedverified
parktree
homehome
account_circleaccount
logoutlogout
Status · feedback
check_circlesuccess
warningwarning
errorerror
infoinfo
syncloading