Brand Guidelines

Thank you for using our marks responsibly.

One mark, room to breathe

The horizontal lockup is our primary signature: the Remora fin beside the wordmark. Give it space, keep it whole, and never redraw it.

Clear space equals the height of the fin on every side. Never crowd the mark.

Do

Use the supplied logo files at full opacity.
Keep clear space equal to the fin height around the mark.
Place the color logo on light, the white logo on dark.

Don't

Stretch, rotate, recolor, or add effects to the logo.
Place it on a busy or low-contrast background.
Rebuild the wordmark in another typeface.

Every lockup, one family

Pick the lockup that fits the space. Keep the proportions we supply, and never rebuild or rearrange them.

Primary lockup The default. Headers, footers, and any placement with room for the full signature.

Symbol The fin on its own. Favicons, avatars, and tight spaces where the wordmark will not fit.

Color follows contrast

Use the color logo on the cream background and the white logo on any dark or saturated background. Always keep strong contrast.

Cream #EDE3D7

Dark #180F14

Medium #253A4B

Primary #7A97BF

The fin alone (color on light, white on dark) works as an app icon, avatar, or card accent.

Warm, editorial, unmistakably ours

Deep slate, muted blue swells, warm cream and sand, with gold and rust as sparing accents. Click any swatch to copy its hex.

Gradients

Built from the core palette. Click any gradient to copy its CSS.

QType for display, Meta Serif for body

Two families do the work: QType (Cond, Extd, Comp) carries headings, kickers, and large figures; FF Meta Serif carries body copy and UI text.

--f-display QType Cond Section headings, uppercase

Own your advantage

--f-label QType Extd Hero title, kickers

Create your own economy

--f-comp QType Comp Big stats, numbers, large text

99.9%

--f-body FF Meta Serif Body, nav, buttons

A build that stays clean, compliant, and safe.

A fluid, rem-based scale

Every step is a clamp() that grows with the viewport. Use the tokens, never hard-coded sizes.

H1--fs-h1clamp(3rem, 7vw, 5.5rem)

Heading one

H2--fs-h2clamp(2.25rem, 4.5vw, 3.5rem)

Heading two

H3--fs-h3clamp(1.35rem, 2vw, 1.65rem)

Heading three

Body--fs-body1.0625rem (17px)

Body copy in FF Meta Serif. The workhorse for paragraphs and UI text across the site.

Link--fs-body17px, accent 1 / 2 by background

Link on a light background Link on a dark background

Label--fs-label0.8125rem (13px)

Label text