---
site: v0 by Vercel - Build Full-Stack Web Apps with AI
url: "https://v0.dev"
generated_at: "2026-06-25T08:31:41.026Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: shadcn/ui
tokens:
  colors:
    background: "#f4f4f4"
    foreground: "#000000"
  typography:
    sans: GeistSans
    mono: GeistMono
    base: 13
  spacing:
    base: 4
    scale: "[1, 64, 96, 108, 128, 192, 208]"
  radii:
    sm: 4
    md: 8
    lg: 16
    full: 35
  shadows:
    sm: "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.25) 0px 25px 50px -12px"
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **flat** material.

Component library appears to be **shadcn/ui** (0.65).

> "What do you want to create?"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `content → faq → nav → testimonials → hero → testimonials → content → hero → cta → footer → footer`.

Source: <https://v0.dev>.

# Colors

| role | hex | usage |
|---|---|---|
| background | `#f4f4f4` | — |
| foreground | `#000000` | — |

**Neutrals:** `#d2d2d2` · `#020202` · `#222222` · `#ffffff` · `#f4f4f4`

**Total unique colors detected:** 9.

# Typography

**Families**
- `GeistSans` · 2368 uses
- `GeistMono` · 6 uses
- `Times` · 4 uses

**Body size:** `13px` / line-height `19.5px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `48px` | `600` | `56px` |
| h2 | `32px` | `600` | `40px` |
| h3 | `24px` | `600` | `32px` |
| h4 | `20px` | `600` | `26px` |

# Layout

**Spacing base:** `4px` increments.
**Scale:** `1px` · `64px` · `96px` · `108px` · `128px` · `192px` · `208px`

**Layout primitives:** 7 grid containers · 745 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `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) 0px 0px 0px 0px`
- `sm` — `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.08) 0px 0px 0px 1px`
- `sm` — `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.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px`
- `sm` — `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.25) 0px 25px 50px -12px`
- `xs` — `rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px -4px, rgba(0, 0, 0, 0.06) 0px 16px 24px -8px`

**Z-index layers:** 9

# Shapes

**Radius scale**
- `sm` — `4px`
- `md` — `8px`
- `lg` — `12px`
- `lg` — `16px`
- `full` — `35px`

# Components

**Detected patterns:** `buttons` · `cards` · `links` · `navigation` · `footer` · `dropdowns` · `badges` · `tabs`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | outline | medium | 28 |

# Do's and Don'ts

**Do's**
- Use `templates`, `resources`, `v` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't no clear primary brand color detected.
- Don't 300 !important rules — prefer specificity over overrides.
- Don't 5442 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://v0.dev>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._