<!-- Generated by ExtractVibe — https://extractvibe.com/brand/extractvibe.com -->
<!-- Extracted: 2026-04-06T18:56:10.003Z | Schema: v1 | Quality: n/a/100 -->
---
version: alpha
name: "ExtractVibe — The brand kit your website already has"
description: "ExtractVibe — The brand kit your website already has presents a professional web presence."
colors:
  primary: "#0a0a0a"
  tertiary: "#e55f06"
  neutral: "#737373"
  surface: "#fafafa"
  on-surface: "#0a0a0a"
  on-surface-secondary: "#737373"
  link: "#0a0a0a"
typography:
  display-lg:
    fontFamily: "DM Sans"
    fontSize: "60px"
    fontWeight: "400"
    lineHeight: "66px"
    letterSpacing: "-1.5px"
  headline-lg:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  headline-md:
    fontFamily: "DM Sans"
    fontSize: "36px"
    fontWeight: "400"
    lineHeight: "39.6px"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "8px"
  md: "12px"
  lg: "16px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#0a0a0a"
    textColor: "#fafafa"
    rounded: "3.35544e+07px"
    padding: "0px 16px"
    fontSize: "12px"
    fontWeight: "500"
    borderColor: "#e6e6e6"
  button-primary:
    backgroundColor: "#e55f06"
    textColor: "#ffffff"
    rounded: "12px"
    padding: "0px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#e6e6e6"
  button-outline:
    textColor: "#0a0a0a"
    rounded: "12px"
    padding: "16px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#e6e6e6"
    borderWidth: "1px"
---

# ExtractVibe — The brand kit your website already has — Design System

## Overview

ExtractVibe establishes a professional web presence. The design system is engineered for clarity and efficiency, reflecting a no-nonsense approach to brand identity. It prioritizes direct communication and functional aesthetics over ornamental flourishes. The visual language is clean, structured, and immediately understandable, aligning with a brand that provides essential tools without unnecessary complexity. This design is not playful, whimsical, or overtly artistic; its purpose is to facilitate the seamless integration of existing brand assets, demanding a design system that is equally streamlined and unobtrusive. The aesthetic is grounded in utility, ensuring that the interface serves as a transparent conduit for the user's objectives. Every design decision supports the core promise of effortless brand extraction, presenting information and functionality in an organized, accessible manner. The interface avoids any elements that might distract from the primary task, maintaining a consistent focus on professional utility and straightforward interaction. This commitment to functional design ensures that ExtractVibe's platform is perceived as reliable and authoritative, a direct reflection of its practical value.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The color palette, anchored by a dominant primary color of #0a0a0a and a complementary surface color of #fafafa, establishes a stark, high-contrast professional aesthetic. This binary scheme signals clarity, precision, and an unambiguous presentation of information. The absence of vibrant hues reinforces the brand's focus on utility and sophistication, avoiding distractions and emphasizing the core content. This deliberate restraint in color choice communicates a serious, dependable character, aligning with a tool that provides essential brand data without embellishment.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0a0a0a` | Black |
| accent / tertiary | `#e55f06` | Dark Orange |
| background | `#fafafa` | Off-White |
| text | `#0a0a0a` | Black |
| secondary text | `#737373` | Dim Gray |
| link | `#0a0a0a` | Black |
| muted | `#737373` | Dim Gray |

## Typography

The exclusive use of DM Sans across all typographic elements ensures a unified and consistent visual voice. This sans-serif typeface is chosen for its modern, legible, and unobtrusive qualities, which perfectly align with a professional and functional brand. The typographic hierarchy will be established through variations in weight and size, maintaining visual order without introducing additional font families. This approach guarantees clear readability and a streamlined information architecture, reinforcing the brand's commitment to efficiency and straightforward communication.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| DM Sans | body | google-fonts | 400, 500 |
| DM Sans | heading | google-fonts | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | DM Sans | 60px | 400 | 66px | -1.5px |
| Heading 2 | DM Sans | 16px | 400 | 24px | — |
| Heading 3 | DM Sans | 36px | 400 | 39.6px | — |
| Body | DM Sans | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `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(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |

## Shapes

Border-radius scale:

- `sm` — 8px
- `md` — 12px
- `lg` — 16px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#0a0a0a`
- Text — `#fafafa`
- Radius — `3.35544e+07px`
- Padding — `0px 16px`
- Font size — `12px`
- Font weight — `500`
- Border — ` solid #e6e6e6`
- Sample copy — "Get started"

**Primary**

- Background — `#e55f06`
- Text — `#ffffff`
- Radius — `12px`
- Padding — `0px`
- Font size — `14px`
- Font weight — `500`
- Border — ` solid #e6e6e6`

**Outline**

- Text — `#0a0a0a`
- Radius — `12px`
- Padding — `16px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #e6e6e6`
- Sample copy — "stripe.com"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | svg | [link](brands/extractvibe.com/logo-0.svg) | 95% |
| primary | — | svg | [link](brands/extractvibe.com/logo-1.svg) | 85% |
| primary | — | svg | [link](brands/extractvibe.com/logo-svg-2.svg) | 90% |

## Sources

- Live brand page — https://extractvibe.com/brand/extractvibe.com
- Raw JSON — https://extractvibe.com/api/brand/extractvibe.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/extractvibe.com/design.md
- Extracted — 2026-04-06T18:56:10.003Z
- Generator — ExtractVibe vv1