Brand assets

A core set for presentations, advertising and partner materials: logos, brand accent and system colors, typography (Inter + Geist) and brief usage guidelines. Download files in SVG and PNG.

Logos

light

3 : 1
SVG

dark

3 : 1
SVG

light

1 : 1
SVG

dark

1 : 1
SVG

light, on backplate

1 : 1
SVG

dark, on backplate

1 : 1
SVG

Brand accent

Moss green in the light theme and mint in dark. It’s a semantic accent: section eyebrows, hover rings on the primary button, the featured service card, method-strip steps, footer checkmarks, the content-team badge. Not a CTA — the primary CTA stays on --primary.

Light · moss green

--accent-brand

#5A714E

oklch(0.52 0.06 135)

soft

#E0EDD5

strong

#415F30

foreground

#F7F9F6

Dark · mint

--accent-brand

#47C496

oklch(0.74 0.13 165)

soft

#003320

strong

#51DAA7

foreground

#05100B

System colors

Light and dark themes. Click a swatch to copy its HEX code.

Background

Primary background (warm paper in light)

#ECEBE9·#16171B

Foreground

Primary text

#0F121A·#F9FAFB

Primary

CTA / primary action

#403830·#F9FAFB

Muted

Secondary surfaces

#E8E5E3·#25272C

Muted Foreground

Secondary text

#67615B·#9AA6B6

Border

Lines and dividers

#CDC7C1·#353841

Typography

Body

Inter

Google Fonts / Variable. We use weights 400 (Regular), 500 (Medium) and 600 (Semibold). Paragraphs, navigation, buttons, forms — all set in Inter.

Aa

Semibold · 600

Aa

Medium · 500

Aa

Regular · 400

Display (headings)

Geist

Vercel / Google Fonts, with Cyrillic. Used for section-title, large eyebrows and italic accents in the hero. The CSS variable is --font-serif — the name is historical: it’s actually a display-sans, not a serif.

Aa

Bold · 700

Aa

Medium · 500

Aa

Regular italic · 400

Surfaces & texture

Three treatments from the light theme. They’re disabled in dark: there it’s a flat bg-card with no gradient or noise. Don’t fake the site with a flat #ECEBE9 fill — the “expensive matte cardboard” feel comes precisely from these three layers.

Paper surface

.surface-paper

A warm card → background gradient, a top inset highlight, a soft warm-shadow. Featured service, MVP, method-strip steps, trust partners. This card is an example.

Paper texture

SVG-noise · opacity 0.04

A barely visible turbulent texture over the body with mix-blend: multiply. It removes the “plastic” look of a flat fill, ~1 KB inline SVG.

Warm shadows

oklch(0.25 0.02 60 / α)

Shadows in light are overridden to a warm brownish tone instead of black — otherwise a grey-green residue appears on the beige background. The card above uses shadow-md.

Usage guidelines

Do

  • Use it on a contrasting background
  • Keep a safe zone around the logo (at least the height of the letter “I”)
  • Use the provided files without modification
  • Pick the logo variant that contrasts well with the background
  • Apply the brand accent in eyebrows, hover rings and featured blocks — the primary CTA stays on primary

Don’t

  • Change the proportions or distort the logo
  • Recolor the logo arbitrarily — including filling it with the brand accent
  • Place it on a busy background without a backplate
  • Rotate it or add shadows or effects
  • Carry paper effects and paper texture into the dark theme — this treatment is light-only