Design Studio.

ARIADesign Supervisor

Aura Platform · 8 Applications · One Visual Language

Design System.

Every color, every type scale, every component. The complete Aura design language — built once, enforced everywhere. No drift. No exceptions.

8
Applications
15
Brand Colors
1
Visual Language

Brand Colors

The Palette.

Three families. Fifteen tokens. A complete visual language.

Orange — CTAs & Emphasis.

--orange
#FF8200
--orange-80
#F79B4C
--orange-60
#F9B479
--orange-40
#FBCDA6
--orange-20
#FDE6D2

Teal — Backgrounds & Secondary.

--teal
#5CB8B2
--teal-80
#78C4C1
--teal-60
#99D3D0
--teal-40
#BBE2E0
--teal-20
#DDF0EF

Blue — Authority & Primary.

--blue
#00263E
--blue-80
#335264
--blue-60
#667D8B
--blue-40
#99A8B1
--blue-20
#CCD4D8

Tailwind v4 — Opacity Works Natively.

bg-teal/30 resolves via color-mix(). No rgba() workaround needed.

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Typography

Type Scale.

Montserrat for headings. Aptos/Inter for body. JetBrains Mono for code.

Heading Scale — Montserrat

h1Aura Platform.Display / Hero
h2Aura Platform.Section Title
h3Aura Platform.Subsection
h4Aura Platform.Card Heading
h5Aura Platform.Label Large
h6Aura Platform.Label

Body — Aptos / Inter

The Aura platform serves 8 applications with one consistent visual language. Every pixel is intentional. Every color is purposeful.

Muted body text for supporting content and descriptions. Line height 1.7 for comfortable reading.

Mono — JetBrains Mono

--color-orange: #FF8200;bg-teal/30 ← works in v4!@theme inline { ... }

Components

Buttons.

Seven variants. Three sizes. All consistent.

All Variants

Sizes

On Dark Backgrounds

Components

Badges & Pills.

Status indicators and category tags. Consistent color mapping.

Status Badges

DraftPendingAwaiting ApprovalEditingApprovedPostedRe-DraftRe-Edit

Category Badges

UserAustraliaNew ZealandBlog PostSocial MediaActivePendingError

Components

Cards.

Three card types. All share the same foundation.

Standard

Card Title.

White bg, blue-20 border, xl radius, sm shadow. The baseline for all content cards.

Interactive

Hover Me.

Lifts on hover. Border darkens to blue-40. Shadow deepens to md.

Total Content

247

pieces published this quarter

↑ 12% from last quarter

Components

Forms — Soft Enterprise.

Clean, professional form design. Light and dark variants.

Light Form.

Dark Form.

Signature Patterns

The Details.

The micro-patterns that make Aura feel like Aura.

Orange Dot Punctuation

Hero Title.
Section Heading.
Card Title.

Every h1–h4 — without exception.

Branded Loading Dots

Navy → Teal → Orange

Generating...

In a button (loading state)

Action Balls

Edit
Save
Delete

Hover delete to see red transition.

Nav Pill — bg-teal/30 ✓

bg-teal/30 — native in Tailwind v4

✓ No rgba() workaround needed

Section Rhythm

Dark Navy
White
Teal-20
White
Dark Navy