Skip to content
DesignMunkDesignMunk Submit a site

UseDots

usedots.com
Pay out people at scale.
Finance Fintech Astro Tailwind Homepage Aktiv Grotesk PT Serif
Share Visit site
usedots.com DESKTOP · 1440
UseDots

AI Breakdown

Design export

---
version: alpha
name: UseDots
description: Pay out people at scale.
colors:
  primary: "#000000"
  secondary: "#242424"
  tertiary: "#f5f543"
  neutral: "#f6f6f6"
  brand-orange-jelly: "#fcc304"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: PT Serif
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.018em
  headline-md:
    fontFamily: PT Serif
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.028em
  headline-sm:
    fontFamily: AktivGrotesk
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.3
  headline-xs:
    fontFamily: AktivGrotesk
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: AktivGrotesk
    fontSize: 16.8px
    fontWeight: 400
    lineHeight: 1.49
rounded:
  sm: 4px
  md: 5px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "#ffffff"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 7px 20px
---

# Dots: Calm Serif Headlines, Neon CTAs, Developer-first Grid

## Overview

A fintech interface built for trust and speed: calm serif headlines signal reliability while a workmanlike grotesk handles dense operational copy. The palette is high-contrast (black on fog-light surfaces) with a single electric-yellow accent to drive conversion. Layouts are compact but not cramped, using an 8px base to stack cards, tables, and feature rows in a predictable rhythm. Aim for clarity, brevity, and scannability across all sections.

## Colors

- **primary (#000000):** Deep ink for headlines, primary buttons, and essential text.
- **secondary (#242424):** Graphite for secondary text, hairline borders, and table rules.
- **tertiary (#f5f543):** Electric lemon accent for high-intent CTAs like "Schedule Demo".
- **neutral (#f6f6f6):** Overcast fog background for page sections and app chrome.
- **brand-orange-jelly (#fcc304):** Warm accent used sparingly for highlights and badges.
- **surface (#f6f6f6):** Default light surface behind cards and modules.
- **on-surface (#000000):** Ink on light surfaces to maintain maximum legibility.

## Typography

- PT Serif (Google, free): Display voice for headline-lg (56px/1.15, letter-spacing -0.018em) and headline-md (36px/1.15, -0.028em). Use for hero headings and major section intros only.
- AktivGrotesk (custom, self-hosted): System UI and supporting headings (headline-sm 26px/1.3, headline-xs 20px/1.5) and body-md (16.8px/1.49). Since it is not freely obtainable, substitute Inter, IBM Plex Sans, or Source Sans 3 when Aktiv Grotesk is unavailable. Match regular (400) and medium (500) weights for hierarchy.
- Headlines stay light (400) to keep the serif calm; emphasis is achieved by scale and spacing rather than weight. Use the grotesk for UI labels, buttons, tables, FAQs, and long-form copy.

## Layout

Spacing follows an 8px base: xs 8, sm 16, md 24, lg 32, xl 64. Section top/bottom paddings typically sit at lg–xl; intra-card spacing at sm–md. Grids favor two-column hero and 3-up feature/card rows that collapse to single column on narrow viewports. Maintain consistent gutters in multiples of 8 and keep card padding aligned to the provided 7px×20px spec for visual consistency.

## Elevation & Depth

Depth is minimal. Use measured shadows for functional hierarchy: sm for subtle lifts, md for menus/popovers, lg for modals/overlays; xl is none. Focus and selected states can rely on the inner inset ring. When shadows are avoided, rely on 1px secondary (#242424) borders, tonal surfaces (neutral vs white), and whitespace to separate regions.

## Shapes

Corners are deliberately restrained: sm 4px for interactive controls (buttons, inputs) and md 5px for containers (cards, feature blocks). The near-square language reads utilitarian and trustworthy; avoid introducing larger radii that would soften the tone.

## Components

- Button Primary: 40px height, 8px×16px padding, 4px radius, black background (#000000) with light text (#f6f6f6). Default CTA for actions like "Sign Up".
- Button Secondary: 40px height, 8px×16px padding, 4px radius, text in black on light surfaces; use for low-emphasis actions.
- Button Link: Text-only, white text for dark surfaces, 0px radius.
- Card: White background, black text, 5px radius, 7px×20px padding; optional sm shadow or a 1px secondary border for separation.

### Announcement Bar
A slim full-width strip at the very top for time-sensitive news. Surface uses neutral with on-surface text; links may adopt the brighter tertiary (#f5f543) underline or badge.

### Global Header Nav
Compact top navigation with product menus on the left and three CTAs on the right. "Sign up" uses the primary button; "Schedule Demo" uses tertiary (#f5f543); all buttons are 40px tall with 4px radii.

### Hero with KPI Ticker
Left column: headline-lg in PT Serif (56px), body in Aktiv Grotesk (16.8px). Right column: illustrative API/rails mock. Two CTAs stacked or inline: Primary (black) and Tertiary (electric yellow). Above or within the hero sits a live "money moved" ticker styled in Aktiv.

### Stats Strip
A full-width band directly under the hero with three KPIs (volume, payees, countries). Use Aktiv for numerals at headline-xs (20px) to headline-sm (26px) depending on space; ensure sufficient contrast over any texture.

### Feature Trio Cards
Three cards highlighting Onboard, Payouts, and Tax. Each card follows the card token (white bg, 5px radius, 7px×20px padding) with a 40px primary or secondary action.

### Testimonial Stack
Quote blocks with customer name/title. Keep quotes in Aktiv body-md; names can use headline-xs. Maintain lg (32px) spacing between items.

### Comparison Matrix
A multi-column table contrasting features. Use secondary (#242424) 1px rules, Aktiv body-md for cells, headline-xs for row headers, and a primary "Get Started" CTA below.

### Code Example Tabs
Language tabs above a code block. Tabs use body-md in Aktiv with a bottom border in secondary; selected tab may use on-surface text and a subtle sm shadow; container is a card.

## Do's and Don'ts

- Do set major headlines in PT Serif at the specified sizes (56px, 36px) and keep weight at 400.
- Do reserve the tertiary #f5f543 for primary conversion actions; pair it with on-surface text for maximum contrast.
- Do build all spacing in 8px multiples and keep card padding at 7px×20px as specified.
- Don't use the electric yellow for body text on white or fog surfaces; limit it to buttons, badges, and highlights.
- Don't introduce larger radii; keep 4px for controls and 5px for containers for a consistent, utilitarian feel.
- Don't rely solely on heavy shadows; prefer borders or tonal separation, using shadows sm–md only where interaction benefits.

## Agent Prompt Guide

Quick color reference — Text: #000000. Background: #f6f6f6. Border: #242424. Accent/CTA: #f5f543.

1) Build a two-column hero
- Background: #f6f6f6, max-width container.
- H1: PT Serif, 56px, line-height 1.15, letter-spacing -0.018em, color #000000.
- Subhead: Aktiv Grotesk (or Inter), 16.8px, line-height 1.49, color #000000.
- Buttons: Primary — 40px height, 8px 16px, radius 4px, bg #000000, text #f6f6f6. Demo — 40px height, 8px 16px, radius 4px, bg #f5f543, text #000000.

2) Create a 3-up feature card row
- Grid gap: 24px.
- Card: bg #ffffff, text #000000, radius 5px, padding 7px 20px, 1px border #242424 at 20% opacity or use sm shadow.
- Title: Aktiv Grotesk 20px/1.5.
- Body: Aktiv Grotesk 16.8px/1.49.
- CTA: Primary button spec above.

3) Build a testimonial stack
- Container bg: #f6f6f6. Each quote on white card (radius 5px, padding 20px).
- Quote: Aktiv Grotesk 16.8px/1.49, color #000000.
- Name: Aktiv Grotesk 20px/1.5, color #000000; role in secondary tone (#242424).

4) Comparison matrix table
- Table text: Aktiv Grotesk 16.8px/1.49, color #000000.
- Cell padding: 16px; row gap 0 with 1px rules in #242424.
- Section heading: PT Serif 36px/1.15.
- CTA below table: Primary button spec; optional secondary link nearby.

## Similar Brands

- Stripe: Similar high-contrast black/white with focused developer narrative; Stripe leans fully sans-serif, while Dots uses a serif for headlines.
- Wise Business: Operational clarity and global-payments positioning; Wise is greener and more spacious, Dots is denser and more conversion-forward.
- Tipalti: Enterprise payouts with large comparison tables; Tipalti's palette is cooler and more corporate.
- Trolley: Feature parity and comparison focus; Trolley uses softer shapes and more color, Dots keeps stricter black/acid-yellow accents.
- PayPal Payouts: Recognizable rails and trust markers; PayPal's branding dominates, Dots maintains neutral product-first visuals.

More like this

Browse Finance →
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 6 days ago
quinngtl.com
Quinn Global Tax Law Finance
Quinn Global Tax Law
Protect what’s yours with integrated global tax and legal strategy
Homepage · 7 days ago