The Peerfold brand, in one page.

01 · Logo suite

One mark, four ways to place it.

• 

  Full color, for light grounds

• 

  Reversed, for dark grounds

• 

  App icon and favicon

• 

  Primary lockup: mark and wordmark

• 

  Horizontal lockup, reversed

• 

  Stacked lockup with the tagline

• 

  Wordmark, light grounds

• 

  Wordmark, dark grounds

peerfold

Wordmark: lowercase, Space Grotesk 500, −0.02em tracking. Two-tone: “peer” deep teal, cream on dark; “fold” amber. Never camel-case, never all-caps in product UI.

Sub-brands: an amber pill chip, Space Grotesk 600 uppercase, 0.06em tracking, deep-teal text, 99px radius, about 40% of the wordmark's cap height.

• Clear space: one eye-width, 13.5% of the mark's height, on all four sides at minimum.
• Minimum sizes: the mark at 20px, a lockup at 120px wide.
• Never recolor the facets, add an outline, rotate, stretch or drop-shadow the mark.
• Never place the full-color mark on a mid-tone background; use the reversed mark instead.

02 · Color

Six colors carry the brand. Four more support them.

• Deep teal

  #14454E · Primary, nav, headings

• Slate teal

  #3E6B74 · Secondary surfaces, icons

• Mist

  #7CA0A8 · Borders, muted, disabled

• Amber

  #E9A13B · CTAs, the “fold”, active states

• Cream

  #F8F3E9 · Page background, never pure white

• Dark ground

  #0C2A30 · Dark sections and dark mode

• Amber ink

  #B06F14 · Eyebrows and amber text on cream

• Body secondary

  #4A5B5E · Secondary copy on cream

• Muted on dark

  #A9C3C9 · Secondary copy on dark grounds

• Dark card

  #10333A · Cards on a dark ground

• Amber hover, on dark

  #FFD9A0 · The amber button lightens

• Amber hover, on light

  #D8912E · The amber button darkens

No new hues: every UI state derives from these tokens through opacity or a lightness shift. Amber clears contrast on deep teal for large text and icons only, never for body copy. Body copy on cream is deep teal at full strength, or #4A5B5E when it is secondary.

• Verdict green

  #146E50 · An included capability, and nothing else

• Verdict red

  #B23A2C · An absent capability, and destructive states

Green and red are reserved for verdicts and destructive states. Nothing else on any Peerfold surface may use them, so a reader who sees either one on a Peerfold page is looking at a verdict.

03 · Typography

Space Grotesk above, Instrument Sans below.

Both faces come from Google Fonts and are loaded once, in the app's root layout, as CSS variables. Nothing on any Peerfold surface asks for a third family.

04 · Radii, spacing and badges

The measurements that make it one system.

• ✓IncludedThe capability is there.#146E50 on rgba(20,110,80,0.12)
• ✗Not availableThe capability is not there.#B23A2C on rgba(178,58,44,0.1)
• ~LimitedIt is there in a narrower form.#B06F14 on rgba(176,111,20,0.12)
• +Costs extraIt is there, and it is a separate purchase.#B06F14 on rgba(176,111,20,0.12)
• ?Not publicly documentedThe public record does not answer.#3E6B74 on rgba(124,160,168,0.18)

999px radius, 5px by 12px padding, 13px at weight 600, glyph first and the word beside it. The word is always rendered: a badge that exists only as a glyph is a cell a screen reader skips.

05 · Cards and surfaces

Where each of the four card shapes belongs.

• Standard card

  White on cream, a 1px border at rgba(12,42,48,0.12), radius 14 to 18px, padding 30 by 32.

• 372%

  Stat block

  An amber top rule, the number in Space Grotesk 700, and a one-line caption under it.

• Dark panel

  #10333A on the #0C2A30 ground. Feature callouts and the TL;DR block.

• ◆ Diamond bullet card

  The amber beak-diamond marks list items and achievements.