Design

The system this site runs on.

Color, type, motion, voice. The rules we use so the work stays consistent.

Color palette

Brand and surface colors.

--bg

#0B1A1C

Page background. Deep teal black.

--teal

#17A876

Primary brand color, CTAs, active states.

--teal-light

#5EEAD4

Mint highlight, links, badges, accents.

--ink

#E4E8E9

Headings. Bright silver on dark bg.

--ink-mid

#A8B3B5

Body text. Mid silver readable.

--ink-soft

#7A8689

Tertiary text, captions, hints.

--orange

#E89052

Warning and non teal accents only.

--surface

#1A2E33

Cards and container backgrounds.

Typography

Type scale and hierarchy.

Heading 1 (h1)

The apex is a habit

Heading 2 (h2)

Build with intention

Heading 3 (h3)

Craft matters

Body

Body text set in Jost at 15.5px with 1.65 line height. This is the primary readability size for paragraphs and all flowing copy. Maximum width is 72 characters for optimal reading.

Caption

Small captions and meta text set in 13px Jost with reduced opacity.

Spacing scale

Modular rhythm.

8px

12px

16px

24px

32px

48px

64px

88px

96px

120px

Motion

Transitions and animations.

Durations. Quick 150ms for micro interactions. Base 200ms for standard transitions. Moderate 280 350ms for UI animations. Slow 600 800ms for hero reveals and page transitions.
Easing. cubic bezier(.22,1,.36,1) across site for bounce in/out effect.
Principles. We do not animate without prefers reduced motion fallback. We use motion to inform, not to entertain.

Brand voice

Copy and punctuation rules.

No hyphens, em dashes, or en dashes anywhere. Use spaces or commas instead.
One italic accent word per headline maximum.
Sentence case body copy, never all caps body text.
The apex is a habit. Studio motto and operating principle.
Active duty founded plus independently built. Footer and brand statement.

Icon set

12 stroke based icons.

arrow right

mail

document

chart

gear

bulb

user

calendar

wrench

lock

lightning

layers

Components

Reusable patterns across the site.

.subnav

Sticky sub navigation for multi section pages. Transparent until scroll, then backdrop blur.

.eco-card

Feature card for product ecosystem sections with hover elevation and background gradient.

.arc-card

Three column card layout used on About page for operating threads. Hovers with transform.

.principle-card

Six column principle grid for Process page. Numbered with italic labels and descriptions.

.footer-grid

Four column footer layout with brand info, product, studio, and legal sections.

.cta-link

Small uppercase button with arrow icon and hover gap animation. Used in closing strips.

This system evolves with the studio. Every release tightens it. We design for the work we do, not abstract ideas.

See our process