First Vibe-Coded App

---
version: alpha
name: First Vibe-Coded App
description: Safe, good-looking defaults for someone building their first app with an agent. Nothing here needs a design vocabulary.
colors:
  paper: "#f8f7f4"
  surface: "#ffffff"
  surface-2: "#efede8"
  ink: "#17181a"
  ink-2: "#55575c"
  ink-3: "#7d8087"
  line: "#e3e1dc"
  line-strong: "#c9c6bf"
  primary: "#0f766e"
  primary-soft: "#e6f4f2"
  on-primary: "#ffffff"
  success: "#15803d"
  success-soft: "#ecfdf3"
  error: "#b42318"
  error-soft: "#fef3f2"
typography:
  title:
    fontFamily: DM Sans
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.02em
  heading:
    fontFamily: DM Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  small:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  mono:
    fontFamily: DM Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 6px
  md: 8px
  lg: 12px
  full: 9999px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  gutter: 16px
  measure: 640px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
    height: 40px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
    height: 40px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm}"
    height: 40px
  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.small}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs}"
  list-item:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    padding: "{spacing.md}"
    rounded: "{rounded.md}"
---

# First Vibe-Coded App

## Overview

You are building something for the first time and you do not want it to look like a demo. This contract gives you a look that is hard to get wrong: warm off-white pages, dark grey text, one teal for buttons and links, soft corners, a friendly typeface. It is deliberately plain. Plain and consistent beats interesting and messy every time.

Everything in this file is a default. Change a value only when you have a reason you can say out loud.

## Colors

Five greys, one colour, two statuses. Learn what each is for and you will never need to pick a colour again.

- **Paper (#f8f7f4):** the page background. Not pure white, so white cards stand out a little.
- **Surface (#ffffff):** cards, forms, dialogs. Surface 2 (#efede8) is for things that sit back, like a sidebar or a disabled state.
- **Ink (#17181a):** headings and body text. Ink 2 for less important text. Ink 3 for hints and placeholders. Never lighter than ink 3 for anything someone has to read.
- **Line (#e3e1dc):** borders. All of them.
- **Primary (#0f766e):** teal. The main button, links, the active tab, the focus ring. One teal thing per screen is ideal; two is fine; a screen that is mostly teal is wrong.
- **Success and Error:** messages after the user does something. Not for decoration.

## Typography

One typeface, DM Sans, in five sizes. A second one, DM Mono, only for code or IDs.

- Page title 32px semibold. Section heading 20px semibold. Body 16px. Small text 14px. Buttons and form labels 14px medium.
- Line height is generous (1.6 on body). Text blocks stop at 640px wide.
- Do not add a third size between these. If something feels like it needs one, change its colour to ink 2 instead.

## Layout

Everything sits on a 4px grid: 8 between related things, 16 inside cards and between form fields, 24 between groups, 48 between sections. Page padding is 16px on mobile and 24px on desktop. The content column is at most 1040px wide and centred.

Put things in a single column until you have a reason for two. Mobile first: if it works at 390px wide, it will work everywhere.

## Elevation & Depth

Flat with one exception. Cards are white on paper with a line border and no shadow. Dialogs and dropdowns get one soft shadow because they float above the page. No gradients, no glow, no glass.

## Shapes

Softly rounded: 6px on badges and small controls, 8px on buttons and inputs, 12px on cards. Pills only for badges and avatars. Keep the same radius on every button.

## Components

- **Buttons:** 40px tall. Primary is teal with white text. Secondary is white with a line border. One primary button per screen.
- **Inputs:** 40px tall, white, line border, teal ring on focus. Label above in label style, help or error text below in small.
- **Cards:** white, line border, 12px radius, 24px padding, a heading and some body text. Not a card inside a card.
- **Lists:** rows with 16px padding and a hairline between them. Use Auto Animate so adding and removing rows feels smooth.
- **Badges:** pill, teal-soft background, teal text, small size.
- **Empty state:** one sentence saying what will appear here and one button to make it appear.
- **Navigation:** a top bar with the app name on the left and at most four links. Active link in teal.

## Do's and Don'ts

- Do use only DM Sans and DM Mono. If a font you did not choose shows up, remove it.
- Do use only the colours in this file. When you want a new one, use ink 2 or surface 2 instead.
- Do keep text readable: 4.5:1 contrast, 16px body, never grey-on-grey.
- Do respect `prefers-reduced-motion`: animations turn off when the user asks.
- Don't use gradients, purple, glow effects or glass. These are the tells of a generated app.
- Don't centre everything. Left-align text and let the layout breathe.
- Don't add icons to every button and heading. Icons go where they carry meaning.
- Don't ask the agent to "make it pop". Ask it to check this file.