Brand guidelines, v1.0

Calm, precise, confident.

How pemola looks and sounds. Tokens on this page come straight from src/styles/global.css, so what you see is what ships.

Growth, handled.

Logo

A serif p in a rounded square, paired with a serif wordmark. The serif lives only in the logo; all type on the site is Inter. Keep clear space equal to the corner radius of the mark on every side.

Files in /public/brand: logo-mark, logo-horizontal, logo-horizontal-light, wordmark, favicon, og-image (SVG and PNG).

Color

Linen carries the page. Forest gives structure. Coral is rare on purpose: it marks the one action we want you to take.

Forest

#1F3A2E

Linen

#F6F3EC

Coral

#E07A5F

Charcoal

#1C1C1C

Token: Usage; Contrast
--color-forest: Forest: Primary. Headlines, structure, dark sections.; 11.9:1 on linen
--color-linen: Linen: Background. Most of every page.; Base
--color-coral: Coral: Primary CTA only. One per view.; 5.8:1 with charcoal
--color-charcoal: Charcoal: Body text and labels.; 15.9:1 on linen

Support

Paper#FCFBF8

Forest 50#EBEFEC

Line#E2DCCF

Muted#595C57

Typography

One family, two jobs. Inter at display optical size and 600 weight for headlines, Inter text for everything else. Headlines are tight and balanced; body copy stays under 62 characters per line.

Inter Display

Headlines. 600, opsz 32, tracking -2 to -3%.

Inter Text

Body and interface. 400, 500, 600. Latin subset only.

Handled.
DisplayInter 600 72 / 1.02 / -3%Hero headline. Once per page.
Growth, handled.
Heading 2Inter 600 44 / 1.08 / -3%Section headline.
Growth, handled.
Heading 3Inter 600 28 / 1.2 / -2%Panels, large cards.
Growth, handled.
Heading 4Inter 600 20 / 1.35 / -1.5%Card and list titles.
Your pipeline, handled every day.
LeadInter 19 / 1.55Intro under a headline.
Your pipeline, handled every day.
BodyInter 16 / 1.6Default. Max 62ch.
Your pipeline, handled every day.
MetaInter 13 / 1.4Captions, timestamps.
How it works
EyebrowInter 600 12 / caps / 12%Section labels.

Spacing and grid

A 4px base on an 8pt rhythm. Twelve columns, 1200px container, 32px gutters on desktop and four columns with 24px gutters on mobile.

Use	Mobile	Desktop
Section padding	64	128
Card padding	24	32
Grid gutter	24	32
Heading to body	16 to 24	24
Body to action	40	40

Shape and elevation

Four radii, two shadows. Borders do most of the work; shadow is reserved for things that float.

Controls

8px

Inner

12px

Cards

16px

Panels

24px

shadow-card

shadow-overlay

Components

Built from the tokens above. One button height scale: 36, 44, 52.

Buttons

Book a growth call Secondary Ghost Small Text link

Badges

QualifiedIn sequencePaused

Inputs

Card

Step 02

Agents run it daily

Research, outreach and follow-up inside guardrails you approve.

Step 03

You take the meetings

Qualified conversations land on your calendar with a brief.

Pipeline calendar and notification

Pipeline

Oct 12 to 161 new

DayWeek

Mon12

Tue13

Wed14

Thu15

Fri16

9 AM

Discovery9:30JM

Discovery9:00EO

11 AM

Intro call11:00AR

Demo11:30LT

1 PM

Discovery1:00SK

3 PM

Follow-up3:30DP

Intro call3:00MW

Meeting booked now

Wed 14, 1:00 PM. Discovery call with a VP of Sales. Brief attached.

Do and don't

The brand is a trusted operator, not a hype agency. When unsure, remove something.

One coral action per view.
Speak about the client result: you get booked meetings.
Generous linen space around every headline.
Real product UI and calm, real photography.

Don't

Coral for decoration, icons or links.
Hype words: revolutionary, 10x, AI-powered magic.
Rainbows, arcs, leaves or nature motifs.
Fake customer logos or invented stats.