DESIGN.md · measured November 5, 2026

Outpero design system

Outpero’s website (outpero.com) uses the Geist font and #7A50DC as its main color on a #FCFCFD background. Measured by Sitepeel on November 5, 2026.

#FCFCFD
#FFFFFF
#0F0F14
#7A50DC

Download DESIGN.md

From outpero.com ↗ · 378 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Outpero

Outpero color palette

18 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Snow#FCFCFDbackground · --color-pagePage background · 2×

White#FFFFFFsurface-container-low · --tw-ring-offset-colorRaised areas one step from the page · 26×

White 90%#FFFFFFE6surface-containerCards and panels · 1×

Snow#F6F6F8surface-container-highHover and pressed fills · 4×

Pale Teal#E1F6ECsurface-container-highestHighest raised elements · 5×

White 5%#FFFFFF0DoverlayTranslucent fill for cards and controls · 5×

White 10%#FFFFFF1Aoverlay-strongStronger translucent fill · 4×

Text

Charcoal#0F0F14on-surfacePrimary text and headings · 13×

Deep Violet#1B1031on-surface-variant · --color-stageSecondary text · 2×

Cool Graphite#3D3D48on-surface-mutedMuted text and metadata · 21×

Cool Slate#6B6B78on-surface-subtleSubtle text and placeholders · 51×

White#FFFFFFon-primaryText and icons on primary

Accents

Violet#7A50DCprimary · --color-brand-600Primary buttons and calls to action · 21×

Violet#673FC4secondary · --color-brand-700Accent (CSS variable) · 7×

Light Violet#BDA2F3tertiary · --color-brand-300Accent in text, fills and borders · 21×

Borders

Mist#E4E4E9outline · --color-lineBorders and dividers · 36×

White 15%#FFFFFF26outline-variantSecondary dividers · 7×

Status

Dark Teal#149E6Asuccess · --color-okSuccess and positive states · 1×

Gradients

Outpero fonts and type scale

One family carries the whole interface.

AaGeistWeights 400, 500, 600Geist, Geist Fallback, ui-sans-serif, system-ui

headline-displayPage title (h1)Outpero76px · 600 · 1.02 · -0.045em
mobile 45px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog37.5px · 600 · 1.1 · -0.03em
mobile 28px

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog30px · 600 · 1.1 · -0.03em

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog20px · 600 · 1.5 · -0.025em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1.5

captionCaptions and fine printThe quick brown fox jumps over the lazy dog13px · 400 · 1.5

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog15px · 600 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14.5px · 500 · 1.5

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 500 · 1.5

Contrast

Text on #FCFCFD

AaAAA18.6:1

AaAAA17.5:1

AaAAA10.4:1

AaAA5.1:1

Spacing

No strict grid · 59% are multiples of 4px

xs4px

sm6px

md12px

lg20px

xl64px

gutter8px

section64px

margin20px

Breakpoints: 429px 767px 768px

Shapes

Corner radii, most used first.

lg12px · 108×

md8px · 60×

xl16px · 52×

sm6px · 8×

Depth

Shadow

Ring

Outpero UI components

Rebuilt from the measured CSS.

Start free

button-primaryFilled button

Build my employee

button-outlineOutlined button

हिन्दी

button-secondaryFilled button

Product

button-ghostText button

e.g. Remind customers whose

input-fieldInput field

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.15s0.25s0.2s0.35s

cubic-bezier(0.4, 0, 0.2, 1)ease

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

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

Outpero DESIGN.md254 lines

---
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).

Fonts

What font does Outpero use?

Outpero uses Geist (weights 400, 500 and 600) on outpero.com. Page titles are 76px at weight 600 (45px on phones) and body text is 16px. Measured on November 5, 2026.

AaGeist · 400, 500, 600

Find every font on outpero.com with Font finder →

Colors

Outpero colors: palette and hex codes

Outpero’s main colors are #FCFCFD (snow) for the background, #0F0F14 (charcoal) for text and #7A50DC (violet) as the main accent, with #673FC4 (violet) and #BDA2F3 (light violet) as other accents. Measured on November 5, 2026.

#FCFCFD · snow
#0F0F14 · charcoal
#1B1031 · deep violet
#3D3D48 · cool graphite
#6B6B78 · cool slate
#FFFFFF · white
#F6F6F8 · snow
#E1F6EC · pale teal

Get outpero.com’s palette as CSS or Tailwind with Colors →

Tech stack

What is Outpero built with?

Outpero’s website (outpero.com) is built with Next.js, React, Tailwind CSS, Vercel and Lucide. Measured on November 5, 2026.

JavaScript framework: Next.js 16.1.6, React 19.3.0-canary-f93b9fd4-2
Hosting & CDN: Vercel
Analytics: Vercel Web Analytics
UI & CSS: Tailwind CSS 4.x
Fonts & icons: Lucide

Check outpero.com live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

YAAS Energy yaas-energy.com · Soledago

DS Enterprises dsenterprises.ai.studio · Inter Tight

Nexsoll nexsoll.com · system-ui

BootstrapBrand getbootstrap.com · Geist

Magic UIBrand magicui.design · Geist

shadcn/uiBrand ui.shadcn.com · Geist

Another site? Make a DESIGN.md from any link.

FAQ

Outpero design system questions

What font does Outpero use?

Outpero’s website uses Geist (weights 400, 500 and 600). Page titles are 76px at weight 600 (45px on phones) and body text is 16px. Measured on November 5, 2026.

What are the Outpero colors and hex codes?

On outpero.com: #FCFCFD (snow) for the background, #0F0F14 (charcoal) for text and #7A50DC (violet) as the main accent, with #673FC4 (violet) and #BDA2F3 (light violet) as other accents. The color palette above lists all 18 colors with their hex codes and where each one is used.

What is the Outpero design system?

The design system on this page is outpero.com’s, as measured on November 5, 2026: Geist type, #7A50DC as the main color and 12px corners, written down as a DESIGN.md. It is not Outpero’s own documentation.

What is Outpero built with?

Outpero’s website (outpero.com) is built with Next.js, React, Tailwind CSS, Vercel and Lucide. The full tech stack Sitepeel found: Next.js, Vercel, React, Vercel Web Analytics, Tailwind CSS and Lucide. Measured on November 5, 2026.

What is the Outpero DESIGN.md?

A plain-text file with Outpero’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Outpero’s official design system?

No. Sitepeel measured it from outpero.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by Outpero.

Can I use Outpero’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Outpero’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.