Deck

---
version: alpha
name: Deck
description: Design and deploy agents to automate workflows like a human.
colors:
  primary: "#ffffff"
  secondary: "#1c4b3c"
  tertiary: "#fdfac3"
  neutral: "#0d100f"
  brand-iron-earth: "#8ca4a4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Plain
    fontSize: 47px
    fontWeight: 500
    lineHeight: 1.01
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Plain
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.28
    letterSpacing: -0.035em
  headline-sm:
    fontFamily: Plain
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.006em
  headline-xs:
    fontFamily: Plain
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.19
  body-md:
    fontFamily: Plain
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.01em
rounded:
  sm: 4px
  md: 10px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 40px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "#f6f6f6"
    rounded: "{rounded.md}"
    padding: 16px
---

# Deck: Dark Canvas, Butter-Yellow CTAs, Real App Demos

## Overview

Deck is a developer-focused, dark-mode system built to communicate capability and trust. The tone is technical, calm, and concise—white on near-black with one warm accent. Layouts feel spacious at the section level but dense inside cards to showcase real product states. When in doubt, prioritize clarity, minimal color, and proof via working screenshots or code.

## Colors

- **primary (#ffffff):** Primary text on dark surfaces and high-contrast UI copy.
- **secondary (#1c4b3c):** Deep green accent for subtle states, focus rings, or supportive icons—not primary CTAs.
- **tertiary (#fdfac3):** Butter-yellow used sparingly for primary buttons and key highlights.
- **neutral (#0d100f):** Near-black background for the entire interface and card surfaces.
- **brand-iron-earth (#8ca4a4):** Cool teal-gray accent for dividers, subdued tags, or metadata.
- **surface ({colors.neutral} → #0d100f):** Default surface token; matches the page background.
- **on-surface ({colors.primary} → #ffffff):** Text/icon color on the surface token.

## Typography

- Headline Large — Plain, 47px, weight 500, line-height 1.01, letter-spacing -0.03em. Use for hero claims and major section intros.
- Headline Medium — Plain, 36px, 500, 1.28, -0.035em. Secondary section headings.
- Headline Small — Plain, 27px, 500, 1.19, -0.006em. Card/group titles and inline section headers.
- Headline XS — Plain, 21px, 500, 1.19. Tertiary headings and component labels.
- Body — Plain, 16px, 400, 1.5, -0.01em. Default paragraph and UI copy.
Font availability: Plain is a custom, self-hosted family (not Google). Agents should substitute with obtainable, neutral grotesques: Inter (Google), Manrope (Google), or Space Grotesk (Google). Keep weights at 400/500 and track the provided letter-spacing where supported.

## Layout

Spacing scale drives rhythm: 6/14/24/40/80px. Use xl (80px) for section paddings, lg (40px) for major gaps, md (24px) for intra-section layout, sm (14px) for tight clusters, xs (6px) for micro gaps. Prefer a single-column reading width with feature panels and grids breaking out to 2–4 columns using md (24px) gutters. Inside cards, keep padding to 16–24px to present dense, proof-oriented content.

## Elevation & Depth

Depth is restrained. Cards and demo panels sit on the same neutral surface and rely on subtle shadows: sm adds a pale tertiary ring; md introduces a soft green glow; lg provides ambient lift for hero demos. When shadows are omitted, hierarchy comes from contrast (white on neutral), spacing (lg/xl), and the 10px card radius.

## Shapes

Two radii establish the language: 4px for interactive elements (buttons, inputs) and 10px for containers (cards, demo panels). Use 4px for small controls to stay crisp; use 10px to signal grouped content or embedded app previews. Keep link buttons square (0px) to read as text affordances.

## Components

Buttons and card variants are canonical.
- Primary Button — background #fdfac3, text #0d100f, 4px radius, 10px×20px padding, 40px height. Reserve for main CTAs.
- Secondary Button — text #ffffff, 4px radius, 10px×20px padding, 40px height. Use as a ghost/secondary action next to the primary.
- Link Button — text #ffffff, 0px radius. For inline navigational actions.
- Card — background #0d100f, text #f6f6f6, 10px radius, 16px padding. Use md or lg shadow when lift is needed.

### Hero Header
- Type: headline-lg (47px/500) with body-md support. Spacing: xl (80px) top/bottom, md (24px) gaps. Primary and secondary buttons placed as a pair.

### Product Demo Panel
- A large card (10px radius) showcasing a live-feel window. Apply shadow lg for prominence and sm ring for focus moments. Inner padding 16–24px.

### Workflow Gallery Strip
- Horizontal list of use-case tiles labeled "Running." Each tile is a card at md spacing (24px) with headline-xs titles and body-md metadata.

### Authentication Step Cards
- Three cards in a row: Connect, Verify Code, Connected. Use headline-xs for titles, body-md for inputs/help text, 10px radius, 16px padding, md shadow.

### Credential Vault Panel
- Dense list card with session rows and security labels. Use body-md, 16px padding, optional sm shadow ring to imply active state.

### Integrations Grid
- 2–3 column card grid with vendor rows. Gutter md (24px). Titles in headline-sm; statuses in body-md using brand-iron-earth for subdued accents.

### Action Queue + Agent Log
- Two stacked cards. Queue uses headline-xs and body-md with md spacing; Log is monospace-styled body-md with 16px padding and lg shadow for emphasis.

## Do's and Don'ts

Do
- Use #fdfac3 only for primary CTAs or rare highlights.
- Keep sections at 80px vertical padding and 24–40px internal gaps.
- Apply 10px radius to containers and 4px to controls consistently.
- Prefer md/lg shadows on hero demos; avoid heavy blurs elsewhere.

Don't
- Introduce new accent colors or bright gradients on dark surfaces.
- Overuse outlines; secondary actions should not rival the primary.
- Mix radii within a single component.
- Expand copy beyond body-md; this system relies on concise text.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #0d100f
- Border/subtle accents: #8ca4a4
- Accent/CTA: #fdfac3
- Support accent: #1c4b3c

1) Build a dark hero
- Background #0d100f. Max width 980px.
- H1 in Plain (or Inter fallback), 47px, weight 500, line-height 1.01, letter-spacing -0.03em, color #ffffff.
- Body copy 16px/1.5, color #ffffff.
- Primary button: bg #fdfac3, text #0d100f, radius 4px, padding 10px 20px, height 40px.
- Secondary button: text #ffffff, radius 4px, padding 10px 20px, height 40px.
- Vertical padding: 80px; gap between elements: 24px.

2) Create a workflow gallery strip
- Section bg #0d100f, text #ffffff.
- Horizontal list of 6 cards, each 10px radius, padding 16px, gap 24px.
- Card shadow sm: rgba(253, 250, 195, 0.08) 0 0 0 3px on hover.
- Titles in 21px (headline-xs, 500); metadata in 16px body.

3) Authentication step cards
- Three 10px-radius cards in a row, padding 16px, gap 24px, md shadow: rgba(96, 145, 126, 0.6) 0 0 6px 0.
- Titles 21px/500; inputs/buttons use 4px radius.
- Primary action button uses #fdfac3; secondary uses #ffffff text.

4) Code + integrations split
- Two columns with 24px gutter.
- Left: code block as a card (bg #0d100f, text #ffffff, padding 16px, radius 10px, shadow lg rgba(0, 0, 0, 0.4) 0 8px 30px 0).
- Right: 2-column integrations grid; each item uses 16px padding and 10px radius; labels in 27px (headline-sm) and statuses in 16px body.

5) Action queue with log
- Stack two cards with 24px gap. Each card radius 10px, padding 16px, text #ffffff.
- Use headline-xs for headings; body-md for rows.
- Apply md shadow to the queue and lg shadow to the log for emphasis.

## Similar Brands

- Vercel — Dark, reductionist marketing with developer proof; Deck adds a warmer CTA and more product state screenshots.
- Cohere — Dark theme with yellow accents; Deck's layouts are denser and show more OS-style panels.
- Linear — Precision dark UI and tight spacing; Deck is less purple/gradient and more monochrome with a single warm accent.
- Replit — Developer-first storytelling with code and terminals; Deck is more enterprise-oriented with authentication and credential vault demos.

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #1c4b3c;
  --color-tertiary: #fdfac3;
  --color-neutral: #0d100f;
  --color-brand-iron-earth: #8ca4a4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 47px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.01;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 36px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.28;
  --text-headline-md-tracking: -0.035em;
  --text-headline-sm-size: 27px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.006em;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.01em;
  --font-plain: "Plain";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 10px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 10px 20px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 20px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: #f6f6f6;
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Design and deploy agents to automate workflows like a human.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.11,
          0.294,
          0.235
        ],
        "hex": "#1c4b3c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.992,
          0.98,
          0.765
        ],
        "hex": "#fdfac3"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.063,
          0.059
        ],
        "hex": "#0d100f"
      }
    },
    "brand-iron-earth": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.549,
          0.643,
          0.643
        ],
        "hex": "#8ca4a4"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.063,
          0.059
        ],
        "hex": "#0d100f"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 80,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 10,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plain",
        "fontSize": {
          "value": 47,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plain",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.035,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plain",
        "fontSize": {
          "value": 27,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.006,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plain",
        "fontSize": {
          "value": 21,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plain",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.01,
          "unit": "em"
        }
      }
    }
  }
}