# Five Dots design system

Version 1.0 · 16 September 2026 · Baseline: approved Five Dots website preview.

Use this guide for future website changes, presentations, product visuals and creative recommendations. Preserve this identity unless a deliberate brand change is requested. This guide records the implemented direction and labels proposed standards separately; it does not claim that every existing component meets those standards.

## Shareable designer extract

[Download the nine-page designer PDF](./five-dots-design-system-extract.pdf) (30 September 2026). It covers brand voice, the palette, typography, logo use, components and design examples, with links to reusable assets. This is a dated extract; this guide and the current website remain the reference for subsequent changes.

## Logo downloads

Use the square PNG for LinkedIn and other profile images; SVG is the scalable master. These are the approved five-dot geometry with centered padding on a solid brand background, without a wordmark.

| Asset | PNG (1024 × 1024) | SVG |
|---|---|---|
| Square, light background | [Download PNG](https://fivedots.ai/brand/five-dots-square.png) | [Download SVG](https://fivedots.ai/brand/five-dots-square.svg) |
| Square, dark background | [Download PNG](https://fivedots.ai/brand/five-dots-square-dark.png) | [Download SVG](https://fivedots.ai/brand/five-dots-square-dark.svg) |
| Transparent mark, light-background use | — | [Download SVG](https://fivedots.ai/brand/five-dots-mark.svg) |
| Transparent mark, dark-background use | — | [Download SVG](https://fivedots.ai/brand/five-dots-mark-light.svg) |

Source files live in `website/public/brand/`. The new square-asset web links become available when this website change is released. Keep original aspect ratio and padding; do not add effects inside the mark. Existing full-lockup SVGs use live Arial text; pair the mark with DM Sans for new work.

## Brand direction

Professional, confident, editorial and animated. Explain the product through concrete visual examples: connected tools, an audit finding and a working fix. Combine large clear typography, spacious layouts, pale blue surfaces and occasional dark sections. Motion should explain progress or relationships.

- Primary positioning: your RevOps consultant in your AI assistant; audit **and** build.
- Brand line: “Connect the dots. Build systems.”
- Product name: **Five Dots**, two words, title case.
- Parent company: **Revenue Wizards B.V.** Link public “by Revenue Wizards” credits to https://revenuewizards.com.
- Name specific AI assistants in comparisons and examples; do not imply unverified integrations work.
- The PDF wireframe was a content source, not a visual reference.
- Inspiration discussed: The Software House for layout/type; Whispr and Monologue for tone; later Notion and Supabase for polished product presentation. These are references, not templates to copy.

## Colors — approved semantic palette

| Role | Value | Use |
|---|---|---|
| Paper | `#FAFBFE` | Main page background |
| Ink | `#202733` | Primary type, dark buttons, foundation dots |
| Secondary text | `#526078` | Supporting copy and labels |
| Brand blue | `#3563E9` | Main CTA, connecting dot, active states |
| Blue hover | `#254CBE` | Main CTA hover |
| Pale blue | `#E8EFFF` | Highlight surfaces |
| Line | `#DDE3ED` | Dividers and neutral borders |
| White | `#FFFFFF` | Cards and input surfaces |
| Inverse text | `#F5F7FC` | Light logo on dark surfaces |
| Inverse blue | `#82A5FF` | Center dot on dark surfaces |

Existing section surfaces: waitlist `#E5EDFF`, company section `#EDF2FB`, form `#F8FAFF`, hero core `#202C45`, cinema `#202328`.

Use blue sparingly to identify actions and the connecting point. Avoid green as a brand accent and orange primary CTAs. No decorative gradient backgrounds; the existing carousel fade mask is a functional exception. Never use color as the only indication of state.

## Typography

| Role | Family | Established treatment |
|---|---|---|
| Main UI, body, headings | DM Sans | Body 400; headings 500–550; navigation wordmark 650 |
| Editorial emphasis | Newsreader | Italic, weight 400; short phrases inside headings |
| Small labels / steps | IBM Plex Mono | Weight 400; restrained uppercase and tracking |

Desktop hero: `clamp(67px, 6.8vw, 98px)`, line-height `.98`, tracking `-6px`. Editorial second line is approximately `.86em` with `-4px` tracking. Use these compact settings only for large display type.

Section heading: `clamp(39px, 4.5vw, 64px)`, line-height `1.05`, tracking `-2.7px`. Body usually 15–17px with line-height 1.65–1.75. Proof-list content: 18px desktop / 16px mobile. Consent copy: 12px / 1.6.

**Recommended standard for new components:** body 16px, supporting text 14px, essential legal/helper text at least 12px; preserve readable contrast. Existing illustrative diagrams contain smaller labels—do not reuse those sizes for essential instructions. Serif italic is emphasis, not the default for whole paragraphs.

Fonts currently load from Google Fonts. Self-hosting is a planned improvement, not yet implemented.

## Logo and favicon

Four foundation dots surround a larger blue connecting dot. The arrangement is fixed: a 48×48 viewBox; outer centers at (10,10), (38,10), (10,38), (38,38), radius 7; center at (24,24), radius 8.

Approved assets, relative to the website folder:

- `public/brand/five-dots-mark.svg` — ink/blue mark on light backgrounds.
- `public/brand/five-dots-mark-light.svg` — inverse mark on dark backgrounds.
- `public/brand/five-dots-logo.svg` and `five-dots-logo-light.svg` — existing full lockups.
- `src/app/icon.svg` — favicon, same mark geometry.

Current application sizes: navigation 31px, footer 28px, hero byline 20px, closing mark 60px. Use the mark alone for favicons and very compact spaces.

**Proposed usage rules:** preserve aspect ratio; leave at least one outer-dot diameter of clear space around the mark; use at least 24px for general UI, with favicon sizes exempt. Do not rotate individual dots, recolor the center arbitrarily, add shadows inside the logo or use a row of five dots as the identity.

**Known asset mismatch:** the exported SVG lockups use live Arial/Helvetica text, while the website wordmark uses DM Sans. Prefer the mark plus DM Sans for new work. Before using a full lockup in print or external brand distribution, create a reviewed outlined DM Sans version. Do not assume SVG text is outlined or portable.

## Layout and spacing

Current content wrapper: max-width 1240px including 40px horizontal padding. Navigation: max-width 1280px. Hero: max-width 1440px, desktop padding 65px 60px 0. Main sections use 100px vertical padding; mobile sections typically 55–65px. Two-column sections collapse on narrow screens.

Existing breakpoint boundaries: 1440, 1100, 760 and 420px. Treat these as content-driven implementation boundaries, not device categories.

**Proposed reusable spacing scale:** 4, 8, 12, 16, 24, 32, 40, 56, 64, 80, 100px. Do not change working layouts merely to force every value onto this scale.

- Buttons: 7px radius; cards generally 12–14px; large section panels 18px.
- Card padding generally 24–38px; borders are subtle and typically 1px.
- Use shadows sparingly: a small lifted card, not a uniform shadow on every section.
- Keep multi-line proof entries aligned to a consistent text edge: 20px arrow column + 18px gap + flexible content.
- Company text is vertically centered beside the photo column on desktop.
- Hero now proceeds directly to “01 — The problem.” Do not restore the removed “Less patchwork” or trust strip without a content decision.

## Components

### Buttons and links

Primary: blue fill, white text, 50px minimum height, 13px label, 7px radius. Dark secondary: ink fill. Outline: transparent surface and subtle border. Use descriptive action labels, primarily “Join the waitlist.” Hover lift is 3px with a soft shadow; focus must remain visible.

Text links use an underline or bottom border. Privacy links must look clickable. Preserve meaningful names and keyboard operation; opening a new tab should not discard the form.

### Forms

Use persistent labels, white controls and a pale blue form panel. Keep errors next to the relevant field and announce submission results. Preserve native email validation and accessible select labels.

Current consent presentation: no checkbox. Immediately above the button, explain that signup joins the waitlist and includes occasional Five Dots product updates from Revenue Wizards B.V., with unsubscribe information and a privacy link. This is the current product decision; any future expansion of purposes needs review and matching backend consent records.

Current form is a visual preview: do not replace its honest “not submitted” message with a success claim until storage works. Do not claim signup, consent evidence or unsubscribe handling is implemented by styling alone.

### Cards and pricing

Use quiet surfaces and clear hierarchy, not heavy borders. The Team plan can be highlighted with pale blue and a small desktop elevation. Currency and billing switches must retain visible selected states and accessible labels. Reference currencies are not live exchange rates.

### Team and company proof

Team image: `public/team/revenue-wizards-team.png`. Zhenya Bankouski is on the left; Haris Odobasic is on the right. Caption: “Managing Partners.” Current frame: rounded 18px, aspect ratio 1.4, cropped above the people with image margin-top -30%.

Client caption: “Selected experiences.” Keep client marks intact and contained, never stretched. Desktop tiles 180×90px with 46px image height; mobile 145×78px. Company logos indicate selected experience, not automatic endorsements of Five Dots.

## Motion

- Hero story advances every 5 seconds; pauses off-screen and offers a pause control.
- Wire travel: 7 seconds; orbital decoration: 80 seconds.
- Client-logo loop: **25 seconds**, left-to-right, seamless duplicated group. Pause on hover, keyboard focus and global motion pause.
- Reduced-motion preference: static content, no looping carousel, duplicate logos hidden; allow manual horizontal access.
- Small hover transitions: roughly 200–350ms. Avoid using movement as the only way to reveal essential text.
- Keep “audit → finding → fix” illustrative; do not present simulated metrics as real customer results.

## Accessibility acceptance checks

Recommended release criteria: readable text contrast, keyboard-visible focus, labelled inputs, no clipped content at mobile widths or zoom, controls with generous touch areas, pause/reduced-motion support and useful image alternatives. Check real combinations rather than assuming token colors guarantee compliance. The current legacy tiny labels and arbitrary gray values still need a full audit.

## Writing and future recommendations

Use clear, specific verbs: connect, audit, build, review. Explain the outcome before the mechanism. Keep claims aligned with the actual release. Avoid decorative explanatory captions that repeat the section heading, unsupported urgency, and unrelated visual effects.

When proposing a future change, include: user need, reused component/token, desktop/mobile behavior, accessibility/motion implications and any new token required. Extend an existing pattern before creating a new one.

## Implementation and governance

`globals.css` supplies the base; `expressive.css` loads after it and later rules override earlier directions. The final blue palette and September readability overrides are authoritative. Old values such as `#316BDF` and the legacy `--green` variable are not additional approved brand colors.

The companion `tokens.json` is a documentation/export baseline, not yet imported by the app. Refactoring the CSS into one token layer is future maintenance, not part of this guide creation. Any intentional identity change should update this guide, token file, visual reference and relevant SVG assets together. Record the date and rationale below.

### Changelog

- 1.0 / 16 September 2026: extracted approved blue identity and current layout, assets and motion; recorded implementation inconsistencies and proposed reuse rules.

## Social banners

Download the approved LinkedIn company cover (4200 × 700), YouTube channel banner (2560 × 1440), and X header (1500 × 500) from [the social-banner section](/design-system#social-banners). Each includes a PNG upload and an outlined SVG master. [Download the complete pack](/design-system/social-banners/five-dots-social-banners.zip) or read the [upload notes](/design-system/social-banners/README.md).

The banners use “Your RevOps consultant in your AI.” to cover Claude and ChatGPT, as approved on 30 September 2026. This wording supersedes the Claude-specific positioning above for these assets.