Brand guidelines

The Moderne logo is the primary visual identifier of our brand. These guidelines ensure it's used consistently across all touchpoints — variants, clear space, sizing, and the assets to download.

Logo variants

full · symbol · wordmark

Moderne has three logo variants. Use the right one for the context.

Full logo

The primary logo — icon mark + wordmark. Use this as the default wherever space allows. Always use the supplied lockup rather than recreating or typesetting the wordmark.

Symbol

The shorthand signifier of the brand — shapes coming together as the building blocks of code. Use when space is constrained (favicons, app icons, small UI) or the brand is already established in context.

Wordmark only

Use when the icon mark would be redundant — for example alongside the icon in a header — or for editorial contexts.

Color variations

default · inverted

Default (dark)

For use on light backgrounds.

White (inverted)

For use on dark or colored backgrounds.

Typography

Geist

66 / 1.02 / 500

Hero headline

34 / 400

Section headline

21 / 400

Card title

18.5 / 1.55

Body copy — leading 155%

12 / 1.4 / 500

Interface label

Headline · Geist

Body · Geist

Up to two sentences

Long-form body · Geist

Geist carries every typographic role across the system. Use size, weight, and spacing to distinguish display moments from docs, articles, and long-form copy.

Interface labels · Geist

Labels · 01 → 24 · CVE IDs

Typeface · Geist v1.7.2 Download Geist (.zip) Release notes ↗

Product lockups

Moderne + product name

Product names extend the Moderne lockup, set in Geist at the cap height of the icon mark with a clear gap. On dark backgrounds the name matches the white logo; on light backgrounds it sets in slate #99A3B0 beside the Midnight logo. Always use the provided lockup files — never redraw or restyle them.

On dark

White logo and product name on Midnight or dark backgrounds.

On light

Midnight logo with the product name in slate on light backgrounds.

Documentation — on dark

Documentation — on light

Clear space

minimum = X (icon height)

The clear space around the logo ensures it's never crowded by other elements. The minimum clear space is defined by the height of the icon mark, referred to as "X".

Minimum size

digital · print

To maintain legibility, the logo should never appear smaller than:

Variant	Digital	Print
Full logo	120px wide	40mm wide
Icon only	24px	8mm
Wordmark	80px wide	28mm wide

Sizing

24 / 32 / 48

SMALL · 24PX

MEDIUM · 32PX — DEFAULT

LARGE · 48PX

Placement in UI

header · favicon

← Logo sits left-aligned in the header

16px — favicon

32px — app icon

Downloads

logo · lockups · motion · fonts

Moderne Registered Logo.zip Moderne "M" Icon.zip Platform Status lockup — White.png Platform Status lockup — Midnight.png Documentation lockup — White.svg Documentation lockup — Midnight.svg Animating M — Dark.gif Animating M — Light.gif

Incorrect uses

don'ts

Avoid the following incorrect usages of the logo in order to maintain consistency and clarity across the brand.

Do not stretch, rotate, or distort the logo
Do not change the logo colors beyond the provided variants
Do not add effects (shadows, gradients, outlines)
Do not place the logo on busy backgrounds without sufficient contrast
Do not rearrange the icon mark and wordmark
Do not recreate the logo — always use the provided files