---
version: alpha
name: Outpero
description: "Light interface measured from outpero.com: Geist type, violet accents, tonal surfaces and 12px corners."
colors:
  background: "#FCFCFD"
  surface: "#FCFCFD"
  on-surface: "#0F0F14"
  on-background: "#0F0F14"
  on-surface-variant: "#1B1031"
  on-surface-muted: "#3D3D48"
  on-surface-subtle: "#6B6B78"
  surface-container-low: "#FFFFFF"
  surface-container: "#FFFFFFE6"
  surface-container-high: "#F6F6F8"
  surface-container-highest: "#E1F6EC"
  overlay: "#FFFFFF0D"
  overlay-strong: "#FFFFFF1A"
  outline: "#E4E4E9"
  outline-variant: "#FFFFFF26"
  primary: "#7A50DC"
  on-primary: "#FFFFFF"
  secondary: "#673FC4"
  tertiary: "#BDA2F3"
  success: "#149E6A"
typography:
  headline-display:
    fontFamily: Geist
    fontSize: 76px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: Geist
    fontSize: 37.5px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Geist
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.03em
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Geist
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.025em
  body-sm:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: Geist
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Geist
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
  label-md:
    fontFamily: Geist
    fontSize: 14.5px
    fontWeight: 500
    lineHeight: 1.5
  label-sm:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Geist
    fontSize: 45px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.045em
  headline-lg-mobile:
    fontFamily: Geist
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.03em
rounded:
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
spacing:
  xs: 4px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 64px
  gutter: 8px
  section: 64px
  margin: 20px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    padding: 0px 18px
    height: 40px
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: 0px 24px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.lg}"
    padding: 0px 14px
    height: 36px
  button-ghost:
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.caption}"
    padding: 0px 12px
  input-field:
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 14px 16px
  card:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    padding: 0px 16px 0px 6px
  link:
    textColor: "{colors.on-surface-subtle}"
---

# Outpero Design System

## Overview

Outpero describes itself as: “Outpero is AI telecalling software: voice agents that call every new lead in under 30 seconds, work through your lists in 7 Indian languages, and log every outcome. From ₹5/min.” The interface is light, built on **Snow (#FCFCFD)** with **Charcoal (#0F0F14)** text, and **Violet (#7A50DC)** as the main accent.

Type is set in **Geist**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 12px.

Measured from [outpero.com](https://outpero.com/) on November 5, 2026 at 1440×900 and 390×844 from 378 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 18 roles, plus gradient stops #9B72F0, #E7B84B, #7C5CFF, #5B3BE0.

- **Snow (#FCFCFD):** Page background, seen 2 times. Token `background`, CSS `--color-page`.
- **Charcoal (#0F0F14):** Primary text and headings, seen 13 times. Token `on-surface`.
- **Deep Violet (#1B1031):** Secondary text, seen 2 times. Token `on-surface-variant`, CSS `--color-stage`.
- **Cool Graphite (#3D3D48):** Muted text and metadata, seen 21 times. Token `on-surface-muted`.
- **Cool Slate (#6B6B78):** Subtle text and placeholders, seen 51 times. Token `on-surface-subtle`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 26 times. Token `surface-container-low`, CSS `--tw-ring-offset-color`.
- **White 90% (#FFFFFFE6):** Cards and panels, seen 1 time. Token `surface-container`.
- **Snow (#F6F6F8):** Hover and pressed fills, seen 4 times. Token `surface-container-high`.
- **Pale Teal (#E1F6EC):** Highest raised elements, seen 5 times. Token `surface-container-highest`.
- **White 5% (#FFFFFF0D):** Translucent fill for cards and controls, seen 5 times. Token `overlay`.
- **White 10% (#FFFFFF1A):** Stronger translucent fill, seen 4 times. Token `overlay-strong`.
- **Mist (#E4E4E9):** Borders and dividers, seen 36 times. Token `outline`, CSS `--color-line`.
- **White 15% (#FFFFFF26):** Secondary dividers, seen 7 times. Token `outline-variant`.
- **Violet (#7A50DC):** Primary buttons and calls to action, seen 21 times. Token `primary`, CSS `--color-brand-600`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Violet (#673FC4):** Accent (CSS variable), seen 7 times. Token `secondary`, CSS `--color-brand-700`.
- **Light Violet (#BDA2F3):** Accent in text, fills and borders, seen 21 times. Token `tertiary`, CSS `--color-brand-300`.
- **Dark Teal (#149E6A):** Success and positive states, seen 1 time. Token `success`, CSS `--color-ok`.

## Typography

**Geist** carries the whole interface. Fallback stack: `Geist, Geist Fallback, ui-sans-serif, system-ui`. Other loaded fonts: Geist Mono, Outfit.

- **headline-display:** Geist 76px at weight 600, line height 1.02, tracking -0.045em (45px on mobile). Page title (h1).
- **headline-lg:** Geist 37.5px at weight 600, line height 1.1, tracking -0.03em (28px on mobile). Section headings (h2).
- **headline-md:** Geist 30px at weight 600, line height 1.1, tracking -0.03em. Sub-section headings.
- **body-md:** Geist 16px at weight 400, line height 1.5. Body text.
- **body-lg:** Geist 20px at weight 600, line height 1.5, tracking -0.025em. Lead paragraphs.
- **body-sm:** Geist 14px at weight 400, line height 1.5. Secondary and small text.
- **caption:** Geist 13px at weight 400, line height 1.5. Captions and fine print.
- **label-lg:** Geist 15px at weight 600, line height 1.5. Large buttons and tabs.
- **label-md:** Geist 14.5px at weight 500, line height 1.5. Buttons, navigation and labels.
- **label-sm:** Geist 14px at weight 500, line height 1.5. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 59% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 6px, md 12px, lg 20px, xl 64px.
- **Sections:** 64px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 20px on each side of full-width sections.
- **Breakpoints:** 429px, 767px, 768px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(20, 16, 40, 0.04) 0px 1px 2px 0px, rgba(20, 16, 40, 0.08) 0px 4px 16px -6px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(122, 80, 220, 0.6) 0px 6px 14px -4px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(20, 16, 40, 0.05) 0px 1px 2px 0px, rgba(40, 22, 90, 0.28) 0px 24px 56px -24px`

Hairline rings and inset highlights also appear: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.

## Shapes

Most elements use 12px corners. Measured radii, most used first:

- **lg (12px):** 108 elements.
- **md (8px):** 60 elements.
- **xl (16px):** 52 elements.
- **sm (6px):** 8 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Start free”):** #7A50DC fill, #FFFFFF text, 13px/500, 3.35544e+07px radius, padding 0px 18px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.18) 0px 1px 0px 0px inset, rgba(122, 80, 220, 0.7) 0px 8px 20px -8px`.
- **button-outline (“Build my employee”):** #FFFFFF fill, #1B1031 text, 15px/600, 12px radius, padding 0px 24px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(155, 114, 240, 0.8) 0px 10px 30px -10px`.
- **button-secondary (“हिन्दी”):** #0F0F14 fill, #FFFFFF text, 14px/500, 12px radius, padding 0px 14px.
- **button-ghost (“Product”):** transparent fill, #3D3D48 text, 13px/500, 3.35544e+07px radius, padding 0px 12px.
- **input-field (“e.g. Remind customers whose EMI ”):** transparent fill, #FFFFFF text, 16px/400, 16px radius, padding 14px 16px.
- **card:** transparent fill, #0F0F14 text, 16px/400, 3.35544e+07px radius, padding 0px 16px 0px 6px, border 1px solid #E4E4E9, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(20, 16, 40, 0.04) 0px 1px 2px 0px, rgba(20, 16, 40, 0.08) 0px 4px 16px -6px`.
- **link:** transparent fill, #6B6B78 text, padding 0px.

## Do's and Don'ts

- Do use #FCFCFD for the page and lift surfaces in small steps: #FFFFFF, #FFFFFFE6, #F6F6F8, #E1F6EC.
- Do keep text in 4 levels: #0F0F14, #1B1031, #3D3D48, #6B6B78.
- Do reserve #7A50DC for primary actions and key highlights.
- Do set headlines in Geist with tight tracking (-0.045em).
- Do reuse the measured spacing steps (6px, 12px, 20px).
- Do use 12px corners on most elements; larger surfaces also use 8px, 16px and 6px.
- Don't introduce new font families beyond Geist.
- Don't use #7A50DC for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.15s, 0.25s, 0.2s, 0.35s. Longer ambient animations run 0.8s, 3.6s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`, `cubic-bezier(0.2, 0.7, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/outpero.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).