axent

Brand Identity System
Deep Navy Foundation
02 — Color System

Deep Navy Foundation

Replacing neutral charcoal with a blue-tinted dark. The complement of orange — creating natural sunrise/sunset harmony. Trust and warmth living together.

Brand Core

#EA580C

Kinetic Orange

Primary accent. CTAs, active states, progress.

#0F172A

Deep Navy

Secondary. Surfaces, backgrounds, text.

#84CC16

Soft Sage

Accent. Success, growth, positive signals.

Navy Scale (replaces Stone grays)

950
900
800
700
600
500
400
300
200
100
50

Dark Mode Surface Hierarchy

#020617

Base

Page background

#0F172A

Surface

Cards, sheets

#1E293B

Elevated

Hover, active states

#334155

Border

Dividers, outlines

#475569

Muted

Placeholder, disabled

Light Mode Surface Hierarchy

#F8FAFC

Base

Page background

#FFFFFF

Surface

Cards, sheets

#F1F5F9

Elevated

Hover, pressed

#E2E8F0

Border

Dividers, outlines

#CBD5E1

Muted

Placeholder, disabled

Semantic Colors

#059669

Success

#D97706

Warning

#E11D48

Error

#3B82F6

Info

03 — Typography

Lora & Outfit

Lora (serif) for headings — warmth, elegance, intellectual weight. Outfit (sans-serif) for body — clean, modern, highly readable. A classic serif+sans pairing.

H1
Building bridges between languages
Lora Bold · 32px · -0.3 tracking · Line 42
H2
Your next conversation starts here
Lora Semibold · 20px · 0 tracking · Line 28
H3
Scenario: Ordering at a café in Paris
Lora Semibold · 16px · 0.1 tracking · Line 24
Body
Practice conversational French with Axie, your AI language partner. Each session adapts to your mistakes, building personalized lessons that target exactly where you struggle.
Outfit Regular · 16px · 0 tracking · Line 26
Small
Last practiced 2 hours ago · 14 words mastered
Outfit Regular · 13px · 0 tracking · Line 20
Button
Start Practice
Outfit Semibold · 15px · 0.2 tracking · Line 24
04 — Spacing & Radii

Structure

A 4px base unit. Generous spacing creates breathing room — the app should feel calm, not cramped.

Spacing Scale

xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px

Border Radius

sm
8px
md
12px
lg
16px
card
24px
button
14px
pill
999px
05 — Components

UI Building Blocks

Core components styled in the Deep Navy system — buttons, cards, inputs, and badges.

Buttons

Start Practice
View Details
Skip for now

Card

Café in Paris
Conversational · Beginner
Order coffee, ask about the menu, and make small talk with the barista.
French 5 min
06 — App Icons

Home Screen Presence

The bridge mark at app-icon scale across primary contexts.

07 — Usage Rules

Do's & Don'ts

Do

  • Use Kinetic Orange sparingly — CTAs, active states, progress
  • Maintain the bridge mark's exact proportions at all sizes
  • Use navy-950 for page backgrounds, navy-900 for surfaces
  • Pair Lora headings with Outfit body text
  • Use navy-400 (#94A3B8) for secondary text — cool relief
  • Give the mark clear space equal to the bridge height on all sides
  • Use the monochrome variant when color isn't available

Don't

  • Don't use orange for large background areas or body text
  • Don't stretch, rotate, or modify the bridge mark proportions
  • Don't place the mark on busy or low-contrast backgrounds
  • Don't use pure black (#000) — always use navy-950 (#020617)
  • Don't mix old Stone grays with the new Navy scale
  • Don't use the rose (#D94854) and navy in the same context
  • Don't add effects (drop shadow, glow, gradient) to the mark