Brand kit

The colours, gradients, marks, and type the marketing site is built from. The palette and the gradient stops were taken out of the seed deck as vector values, then checked against a 150dpi render, so these are the real numbers rather than samples by eye.

The mark and the logotype

Two assets, both artwork. The logotype is NOT a font: the word is drawn, so it must not be set as text. Both inherit currentColor, so they tint to whatever surface they sit on.

LOGOTYPE: Drawn artwork, seven subpaths. Not Gelica, and not any face in the type system
LOCKUP HEIGHT: The logotype stands at 0.5825 of the mark's INK height
LOCKUP GAP: 0.1796 of the mark's ink height
LOCKUP OFFSET: The logotype's centre sits 0.0243 of the mark's ink height above it
IN CODE, VS SIZE: 0.5272 / 0.1054 / 0.0675, since the square mark box is ~9% larger than its ink
IN CODE: AtlasLockup for the pair, AtlasWordmark alone. Never set the word as text
MINIMUM SIZE: AtlasLockup never below 24: the drawn stems break up under it
FAVICON: The mark alone, in ochre, at 48px inside a 64px box

Colour

Fourteen tokens, scoped to the marketing surface so the product's own tokens are untouched.

#FAF4E1

Cream

--atl-cream

Page ground on every light surface

#FEFCFA

Cream bright

--atl-cream-bright

Cards and panels on cream

#E29F3C

Ochre

--atl-ochre

The mark, accents, rules, status dots

#E9A97D

Salmon

--atl-salmon

Warm gradient end

#B6502F

Terracotta

--atl-terracotta

Alert and money-out accents

#502315

Burgundy

--atl-burgundy

Deepest warm accent

#4A4F3E

Olive

--atl-olive

Dark accent

#474C3C

Olive deep

--atl-olive-deep

Dark section ground

#A9B58E

Sage

--atl-sage

Positive state, labels on dark

#5C8A9E

Dusty blue

--atl-blue

Cool accent

#BDD2DC

Sky

--atl-sky

Cool gradient end

#161513

Ink

--atl-ink

Body text and the primary button

#5B564C

Ink soft

--atl-ink-soft

Secondary text

#E3D8BE

Rule

--atl-rule

Borders and dividers

Gradient

Eight fills. The two long ones carry hand-placed stops because a straight two-stop ramp banded on the warm end.

Cream fall-off

The hero. Flat cream for the top 57%, then a warm drop to ochre.

linear-gradient(180deg,#FAF4E1 0%,#FAF4E1 57%,#F5E6C9 64%,#F2DBB3 72%,#EED09D 80%,#EBC488 88%,#E5B367 100%)

Cream to salmon

A softer descent; the fall starts higher and lands flat.

linear-gradient(180deg,#FAF4E1 0%,#FAF4E1 36%,#F7EAD3 48%,#F3DDC2 56%,#EFCBAB 64%,#E8B58B 76%,#E5A678 92%,#E5A678 100%)

Ochre to salmon

Full-bleed warm section.

linear-gradient(90deg,#E29F3C 0%,#E9A97D 100%)

Ochre to terracotta

The pricing panel and money accents.

linear-gradient(135deg,#E29F3C 0%,#B6502F 100%)

Burgundy to terracotta

Deepest warm fill.

linear-gradient(90deg,#502315 0%,#B6502F 100%)

Olive to sage

Dark fill with a light end.

linear-gradient(90deg,#4A4F3E 0%,#A9B58E 100%)

Dusty blue to sky

The only cool gradient in the set.

linear-gradient(135deg,#5C8A9E 0%,#BDD2DC 100%)

Olive deep, flat

Meetings and the closing panel.

#474C3C

The curved lines

The background motif. It stays circular at every viewport because the drawing keeps its own 16:9 box rather than stretching to the section.

Paired, on cream

Single, on olive

Shape: Four concentric hairline circles
Radius ratio: 1 : 1.365 : 1.760 : 2.200
Paired layout: r = 307.5 / 419.8 / 541.3 / 676.6, centres at 26.2% and 71.3% of width
Single layout: Same ratios scaled 1.051x, one centre
Stroke: 2 units on a 1920 box, so 1px at 960
Opacity: 3.5% of ink on light, 2.5% white on dark
Hero anchor: Crowns run 175 units above the section, so the nav hides them

Type

Gelica for display, Instrument Sans for everything else. The kit also names Documan as the marketing workhorse, but there is no webfont for it yet, so micro-labels fall back to Instrument Sans.

Gelica, display

Know what’s going on with your company.

Regular only. Headings are single-weight by design, which is also the licence we hold today. Used at 64/44/32/23px.

Instrument Sans, text

The questions that normally cost you a morning are already answered.

Body copy runs 15 to 19px at 1.6 line height. Micro-labels are 11px, uppercase, 0.22em tracking, in ink soft.

Third-party marks

How another company's mark is treated on the brand, not a list of what Atlas connects to. Marks are tinted to ink at 40% and never shown in their own colours, so a strip reads as texture instead of a logo wall. Glyphs are Simple Icons (CC0), inlined. Attio, Pipedrive, and Clarify have no glyph yet and ride as wordmarks.

GmailGoogle CalendarGoogle DriveBrexHubSpotSalesforceAttioPipedriveClarifySlackGitHubLinear

Controls

The four shapes the page repeats.

Start freeSee what it doesYour company, taking partBrex

Buttons are full pills at 48px. Both the outlined button and the eyebrow pill carry the page ground as a fill, so the ring motif does not run through them.