# Shadcnstudio Design System

> A stark, monochrome utility canvas relying on Geist typography and subtle borders to define structure.

**Source:** https://shadcnstudio.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Shadcnstudio operates on a strictly monochrome foundation, utilizing pure white (`#ffffff`) and black (`#000000`) to create a high-contrast, developer-focused aesthetic. The system relies heavily on the Geist typeface for both display and body copy, occasionally introducing Kalam for handwritten accents. Structural hierarchy is achieved through subtle borders (`oklch(0.922 0 0)`) and varied border radii, ranging from sharp 0px edges to fully rounded 9999px pills, rather than relying on elevation shadows.

## Signature DNA
1. **Monochrome starkness** (The entire palette is restricted to black and white, forcing reliance on typography and spacing for hierarchy. Observed across all pages.)
2. **Geist typography** (The system exclusively uses Geist for its primary UI, leveraging its technical, geometric sans-serif qualities to reinforce the developer-tooling aesthetic. Observed in headings and body text.)
3. **Subtle structural borders** (Instead of deep shadows, cards and surfaces are defined by thin, light gray borders (`oklch(0.922 0 0)`), maintaining a flat, clean interface. Observed on cards and surfaces.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-white` | `#ffffff` | surface_bg, button_text, text | 21 | 1 | computed_style, css_variable |
| `--color-black` | `#000000` | surface_bg | 1 | 1 | computed_style, css_variable |

### Accent
Not captured in source.

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Geist | 400, 500, 600, 700, 800 | heading, body | Inter | SIL Open Font License |
| Kalam | 500 | body | Kalam | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `heading-lg` | 36px | 40px | normal | 600 | Section headers | `h2.text-2xl.font-semibold` |
| `heading-lg-bold` | 36px | 40px | normal | 700 | Emphasized headers | `span.font-bold` |
| `heading-sm` | 24px | 32px | normal | 400 | Subheadings | `p.text-muted-foreground.text-xl` |
| `heading-sm-semibold` | 20px | 28px | normal | 600 | Card titles | `h3.text-xl.font-semibold` |
| `heading-sm-regular` | 20px | 28px | normal | 400 | Secondary subheadings | `p.text-muted-foreground.text-xl` |
| `body-lg` | 18px | 28px | normal | 400 | Large body text | `p.text-muted-foreground.z-10` |
| `body-lg-semibold` | 18px | 28px | normal | 600 | Emphasized large body | `span.font-semibold` |
| `body` | 16px | 24px | normal | 400 | Default body text | `section#hero` |
| `body-semibold` | 16px | 24px | normal | 600 | Emphasized body | `div.px-4.py-3` |
| `body-kalam` | 16px | 24px | normal | 500 | Handwritten accents | `span.font-kalam.font-medium` |
| `body-sm` | 14px | 20px | normal | 400 | Small body text | `p.text-muted-foreground.text-left` |
| `caption` | 12px | 16px | normal | 500 | Badges, small labels | `span.bg-background.absolute` |

### Principles
- **Geist for structure:** Geist is used for almost all text, providing a clean, technical feel.
- **Kalam for annotation:** Kalam is used sparingly for handwritten-style accents.
- **Weight for hierarchy:** Contrast is achieved through font weight (400 vs 600/700) rather than color.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|---|---|---|
| `spacing-2` | 2px | 117 |
| `spacing-4` | 4px | 3 |
| `spacing-6` | 6px | 3 |
| `spacing-8` | 8px | 22 |
| `spacing-10` | 10px | 10 |
| `spacing-12` | 12px | 13 |
| `spacing-14` | 14px | 23 |
| `spacing-16` | 16px | 4 |
| `spacing-18` | 18px | 3 |
| `spacing-22` | 22px | 4 |
| `spacing-24` | 24px | 132 |
| `spacing-28` | 28px | 3 |
| `spacing-32` | 32px | 14 |
| `spacing-96` | 96px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Sharp edges | 876 occurrences |
| `radius-input-sm` | 2px | Small inputs | 18 occurrences |
| `radius-input` | 6px | Standard inputs | 109 occurrences |
| `radius-control-sm` | 8px | Small controls | 63 occurrences |
| `radius-control` | 10px | Standard controls | 19 occurrences |
| `radius-card` | 14px | Standard cards | 237 occurrences |
| `radius-pill` | 9999px | Badges, rounded buttons | 181 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | `none` | Default state for most elements | 113 occurrences |
| Focus | `oklch(1 0 0) 0px 0px 0px 3px` | Focus rings | 5 occurrences |
| Inner | `oklab(1 0 5.96046e-8 / 0.2) 0px 1px 8px 0px inset, oklch(0.205 0 0) 0px 0px 0px 1px, oklch(0.205 0 0) 0px 0px 0px 1px, oklab(1 0 5.96046e-8 / 0.3) 0px 0px 0px 1.5px inset, oklab(0 none none / 0.2) 0px 2px 2px 0px` | Inset elements | 3 occurrences |
| Drop | `oklch(0 0 0 / 0.2) 0px 25px 50px -12px` | Elevated modals/dropdowns | 3 occurrences |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Base container for content.
**Pages observed:** https://shadcnstudio.com
**Spec:** Background rgba(0, 0, 0, 0) / Text oklch(0.145 0 0) / Border oklch(0.922 0 0) / Radius 14px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Surface (Small Radius)
**Role:** Secondary container.
**Pages observed:** https://shadcnstudio.com
**Spec:** Background rgba(0, 0, 0, 0) / Text oklch(0.145 0 0) / Border oklch(0.922 0 0) / Radius 6px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns
#### Card (Pricing/About)
**Role:** Content grouping.
**Pages observed:** https://shadcnstudio.com/pricing, https://shadcnstudio.com/about
**Spec:** Background oklch(0.205 0 0) / Text oklch(0.985 0 0) / Border oklch(0.922 0 0) / Radius 3.35544e+07px / Padding 8px 16px / Typography 14px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Card (Main)
**Role:** Primary content card.
**Pages observed:** https://shadcnstudio.com
**Spec:** Background oklch(1 0 0) / Text oklch(0.145 0 0) / Border oklch(0.922 0 0) (1px) / Radius 14px / Padding 24px 0px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Pill / Badge
**Role:** Status indicators and tags.
**Pages observed:** https://shadcnstudio.com
**Spec:** Background rgba(0, 0, 0, 0) / Text oklch(0.145 0 0) / Border oklch(0.922 0 0) / Radius 3.35544e+07px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 3: Surface-specific
#### Card (Padded)
**Role:** Content card with internal padding.
**Pages observed:** https://shadcnstudio.com
**Spec:** Background oklch(0.97 0 0) / Text oklch(0.145 0 0) / Border oklch(0.922 0 0) (1px) / Radius 8px / Padding 10px 14px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
The brand relies on stark, structural UI components and abstract geometric shapes rather than photography. It avoids saturated colors, keeping the focus on the monochrome palette and typography.

## Do's
- Use `#ffffff` for primary backgrounds to maintain the stark aesthetic.
- Rely on Geist for all structural typography.
- Use thin borders (`oklch(0.922 0 0)`) to separate content areas instead of shadows.
- Employ `9999px` border radii for pills and badges to contrast with the sharper `14px` cards.
- Use Kalam sparingly for handwritten-style annotations.

## Don'ts
- Do not introduce saturated colors; stick to the monochrome palette.
- Do not use heavy drop shadows for standard cards; rely on borders.
- Do not use serif fonts; maintain the technical feel with Geist.
- (Wrong) Using a bright blue for a primary CTA. (Right) Using `#000000` for the primary CTA. (Reason) The brand is strictly monochrome.
- (Wrong) Applying a 24px border radius to a card. (Right) Using 14px for cards. (Reason) 14px is the established standard for card components.
- (Wrong) Using a sub-brand color as the parent primary. (Right) Using `#ffffff` as the parent primary. (Reason) The parent brand is defined by its achromatic foundation.

## Similar brands
- Vercel
- Linear
- Raycast

## Quick start
```css
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --tw-ring-offset-color: #ffffff;
}
```

## Agent prompt examples
- "Create a pricing card using a 14px border radius, a 1px border of oklch(0.922 0 0), and Geist typography for the headings."
- "Design a hero section with a pure white (#ffffff) background, using Geist 600 at 36px for the main headline."
- "Build a badge component with a 9999px border radius and no background, using a thin border for definition."

## Known gaps
Hover, focus, active, and disabled states were not captured in the source evidence. Layout grids and responsive breakpoints are also missing from the dataset.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://shadcnstudio.com | Desktop | 2026-06-06T05:00:42.033Z |
| Pricing | https://shadcnstudio.com/pricing | Desktop | 2026-06-06T05:00:42.033Z |
| About | https://shadcnstudio.com/about | Desktop | 2026-06-06T05:00:42.033Z |