Brand

Brand guidelines.

How to use the AptiveAI logo, colours and type in your content, connectors, and partner material. Everything on this page is rendered from the same components and tokens the product uses, so it cannot drift out of date.

Logo

Three variants. The lockup is live HTML — real text, the artwork's own mark, and the swoosh as inline SVG — so it is crisp at any size and re-colours per theme from one asset. It is drawn by client/common/logo.tsx, the single source for the brand in each app.

Full lockup

variant="full"

The default. Marketing, headers, anywhere with room.

On light · light

On dark · dark

Admin lockup

variant="admin"

Operator chrome, so it is obvious which shell you are in.

On light · light

On dark · dark

Mark

variant="mark"

Collapsed rails, favicons, and any slot too narrow for the wordmark.

On light · light

On dark · dark

Assets

Use these when live HTML is not an option — a slide, a press kit, an email. Everything else should use the component.

Color palette

Every value here is read out of app/brand.css and app/globals.css when this page is built, so it cannot drift from the running site. Each swatch paints with its token, which is why the interface colors below change as you switch theme — the second hex is the light-theme value where one differs.

Brand

Navy

#0d52b2

--brand-navy

Primary. The mark’s largest colour.

Navy shade

#0b3d92

--brand-navy-shade

Pressed and hover partner.

Blue

#2383c8

--brand-blue

Cyan

#40c4db

--brand-cyan

The top of the A ribbon.

Gold (flat accent)

#d4a520

--brand-gold

Badges and highlights. Never the swoosh.

Swoosh gold

The swoosh is always this gradient and never a flat fill. The gold peaks at only about 0.68 saturation and falls off asymmetrically, so any single hex reads muddy at the ends or garish through the middle.

--brand-gold-swoosh

Deep

#a37f41

--brand-gold-deep

0% and 100%

Mid

#ddba69

--brand-gold-mid

25%

Peak

#f9e58f

--brand-gold-peak

50%

Fall

#e4c573

--brand-gold-fall

72%

Progress gradient

The three stops the platform's navigation progress bar paints with. Brand identity rather than theme, so they carry one value in both.

Gradient stop 1

#10c0f0

--brand-progress-1

Gradient stop 2

#0080e0

--brand-progress-2

Gradient stop 3

#0d52b2

--brand-progress-3

Interface

These follow the reader's theme — the swatches below are showing whichever one you are in right now.

Accent (primary)

#10c0f0 · #0890b8 light

--green

Accent Dim

#0a90b8 · #067898 light

--green-dim

Link Blue

#569cd6 · #005fb8 light

--blue

Error

#f44747 · #e51400 light

--red

Background

#000000 · #f3f3f3 light

--bg

Surface

#0a0a0b · #ffffff light

--surface

Surface 2

#141416 · #e8e8e8 light

--surface2

Surface 3

#1c1c1f · #e0e0e0 light

--surface3

Border

#232326 · #cecece light

--border

Border 2

#2c2c31 · #b0b0b0 light

--border2

Text Primary

#d4d4d4 · #333333 light

--text

Text Secondary

#808080 · #616161 light

--muted

Text Tertiary

#616161 · #767676 light

--muted2

Typography

aptive

Poppins SemiBold — the wordmark

Self-hosted and used for the lockup only, never for running text. Chosen by matching stem widths against the master artwork at identical x-height.

Inter

Sans serif — body text, headings, navigation

Loaded from Google Fonts through next/font, self-hosted at build time and applied on <html>. It is the font-sans scale.

JetBrains Mono

Monospace — code, labels, metadata, eyebrows

Loaded the same way, and it is the font-mono scale.

Usage guidelines

Do

  • Use the live lockup where you can; it stays crisp at every size and follows the theme on its own.
  • Give the lockup clear space on all sides equal to the height of the mark.
  • Put it on a solid background — white, black, or a flat surface colour.
  • Use the mark alone when the slot is too narrow for the wordmark, such as a collapsed rail or a favicon.
  • Reference a colour by its token, never by its hex — the token is what follows the theme.
  • Write the product name as one word, AptiveAI; the legal entity is Aptive AI LLC.

Don't

  • Do not add a shadow, glow or bevel. The lockup is flat by decision, even though the source artwork is not.
  • Do not fill the swoosh with a flat gold. It is a gradient; the flat --brand-gold is a different token for a different job.
  • Do not place it on a photograph or a multi-stop gradient — no single ink stays legible across the span.
  • Do not use the mark alone on brand navy; its own navy is that background and the edges disappear.
  • Do not stretch, rotate, recolour or re-space it, and do not rebuild the wordmark in another face.