SubmitLog inSign up
Brand

CompassPad identity

The mark, the palette, and the rules for using them. Everything on this page is the live asset the site ships.

The mark

A four-point compass rose. The needle points up-right in orange, the counterweight sits down-left in purple, and a white hub marks the centre. The shape reads as a direction finder at any size, which is what a discovery directory does.

CompassPad markPrimary
CompassPad mark on darkOn dark
CompassPad mono markMono
CompassPad lockup

Palette

Orange is the single accent. Purple is reserved for premium and paid placement so the two never compete. Neutrals are cool grey, never warm.

Primary#F97316

Buttons, links, active states, the up-needle.

Primary hover#EA580C

Hover and pressed states only.

Premium#9333EA

Paid tiers, premium badges, the down-needle.

Premium border#A855F7

2px border on premium cards.

Premium soft#FAF5FF

Tinted background behind premium content.

Ink#111827

Headings and primary text.

Body#4B5563

Paragraph text.

Muted#6B7280

Secondary labels and captions.

Border#E5E7EB

Card borders and dividers.

Surface#F9FAFB

Page section backgrounds.

Type

Inter for everything, at two weights. Headings are 800 or 900 with tight tracking. Body is 400 at 1.6 to 1.75 line height. The mono face is reserved for hex values and code.

Display

Find what was just built.

Heading

Recently Listed

Body

A directory of new startup projects. Upvote what you like and browse by category.

Assets

Every file below is in the repository under public/brand/. Use the SVG wherever the target supports it.

  • Mark/brand/compasspad-mark.svg

    Primary mark on a light surface. Use from 24px up.

  • Mark on dark/brand/compasspad-mark-dark.svg

    For dark surfaces and dark-mode headers.

  • Mark mono/brand/compasspad-mark-mono.svg

    Single-colour. Inherits currentColor.

  • Lockup/brand/compasspad-lockup.svg

    Mark plus wordmark. Use where the name needs to be read.

  • Lockup on dark/brand/compasspad-lockup-dark.svg

    Lockup for dark surfaces.

  • Favicon/brand/compasspad-favicon.svg

    Tightened mark for 16px and 32px.

  • Social card/brand/og-image.png

    1200 by 630. Used for link previews.

Usage

  • Keep clear space around the mark equal to a quarter of its width.
  • Do not recolour the mark, add a gradient, or apply a shadow.
  • Do not rotate the mark. The needle points up-right by design.
  • Below 24px use the favicon file, which has a tightened silhouette.
  • On a coloured background use the mono mark in a single contrasting colour.