Five Dots / Design system / v1.0

Connect the dots.
Keep the identity.

A practical reference for the approved website direction: confident typography, a blue connecting point, clear product stories and purposeful motion.

Download the designer PDF · Read the complete style guide · Design tokens · Social banners
01 / Identity

Four foundations. One connecting point.

Five Dots
Five Dots

Mark geometry matches the favicon. These specimens pair the mark with DM Sans. Existing standalone SVG wordmarks still use Arial and need a reviewed outlined version for external distribution.

Logo downloads

Ready for your next profile.

Use the square PNG for LinkedIn and other profile images. Both exports are 1024 × 1024 px, with padding for square or circular crops. Use SVG for scalable design work.

Transparent marks

Download mark for light backgrounds (SVG)
Download mark for dark backgrounds (SVG)

For the full wordmark, pair the mark with DM Sans. The legacy full-lockup SVGs contain live Arial text and are not the preferred masters for new external work.

Social banner downloads

One identity. Every channel.

Ready-to-upload banners for LinkedIn company pages, YouTube and X. Each layout uses the approved line “Your RevOps consultant in your AI.” Download PNG to upload, or outlined SVG for design work.

Download all banners (ZIP)

SVG lettering is outlined to preserve the fonts. Confirm the crop in each platform’s upload preview before publishing. Read the format and upload notes.

02 / Color

Blue with room to breathe.

paper#FAFBFE
ink#202733
muted#526078
accent#3563E9
accentHover#254CBE
accentLight#E8EFFF
line#DDE3ED
white#FFFFFF
inverseText#F5F7FC
inverseAccent#82A5FF

Use blue for actions, active states and the fifth dot. Keep large surfaces pale and type dark. Avoid green brand accents and orange primary buttons.

03 / Typography
Clear thinking.
Human expression.

DM Sans

Primary headings, body and interface. Strong hierarchy, moderate weights and generous line height.

Newsreader italic

Short editorial emphasis within headings.

IBM PLEX MONO

Steps, section labels and small technical details.

For new components: 16px body, 14px secondary, at least 12px essential helper copy. Do not inherit tiny demo labels into forms.

04 / Components

Make the next step clear.

Your RevOps consultant in your AI assistant.

Pair one clear primary action with a quieter alternative.

Primary action ↗ Secondary action ↗

Specimen buttons navigate within this guide. 50px height · 7px radius · 13px label. Cards use 12–14px radii; major section panels use 18px.

05 / Rhythm & motion

Space to understand.

  • 1240px content wrapper; 100px desktop section spacing.
  • Collapse columns for narrow screens; typically 55–65px mobile section spacing.
  • Use open, pale and dark sections to vary rhythm.
  • Hero flows directly into the problem.

Motion with a purpose.

  • Hero story: 5 seconds per stage.
  • Client logos: 25-second continuous loop.
  • Pause on hover/focus and honour reduced motion.
  • Never hide essential information behind animation.
06 / Reuse

Extend the system deliberately.

Every future recommendation should state the user need, existing pattern reused, mobile behaviour and accessibility implications. New colors, typefaces and logo treatments require an intentional brand decision.

This reference documents the approved direction. Proposed reuse standards and remaining CSS/asset inconsistencies are listed in the full guide; it is not an accessibility certification.