---
title: "Design system"
description: "The shadcn-based white and red StackShip visual language."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.stackship.run/llms.txt
> Use this file to discover all available pages before exploring further.

# Design system

StackShip uses shadcn/ui primitives with semantic CSS variables. The look is
inspired by the clarity of mature infrastructure control planes such as HCP
Terraform and Scalr, combined with EZGH Cloud's crisp white-and-red visual
language. StackShip does not reproduce another product's navigation or visual
identity.

## Core palette

| Token | Value | Use |
| --- | --- | --- |
| `primary` | `#c32940` | Primary actions, active states, brand emphasis |
| `primary-hover` | `#a91f34` | Hover and pressed actions |
| `primary-soft` | `#f2b8c1` | Dark-surface labels and quiet accents |
| `background` | `#f6f8fb` | Application canvas |
| `card` | `#ffffff` | Panels, dialogs, forms, tables |
| `muted` | `#eef2f7` | Secondary surfaces |
| `border` | `#d8dee8` | Dividers and control borders |
| `foreground` | `#172033` | Headlines and primary body text |
| `secondary-foreground` | `#253044` | Navigation and supporting text |
| `muted-foreground` | `#64748b` | Metadata and descriptions |
| `terminal` | `#111722` | Plan output and terminal headers |
| `success` | `#177245` | Passing checks and healthy state |
| `success-on-dark` | `#8ce0b5` | Passing checks on terminal surfaces |
| `warning` | `#9a5b13` | Drift, pending review, and attention states |
| `info` | `#315a92` | Active runs and informational state |

Do not use red as the only signal for destructive state. Destructive controls
need explicit labels, confirmation, and an icon or structural cue.

## Typography

- Space Grotesk for display headings
- Inter for interface and prose
- JetBrains Mono for Terraform addresses, run IDs, hashes, timestamps, and code

## Shape and motion

Cards use 12px radii, compact controls use 6–8px radii, and primary marketing
actions may use pill shapes. Shadows remain soft and low contrast. The canvas
may use a 22px radial dot grid with restrained red ambient glows.

Motion uses a fast ease-out curve, approximately
`cubic-bezier(.16, 1, .3, 1)`, and respects `prefers-reduced-motion`.

## Product shell

The dashboard is an operational control plane, not a marketing page:

- A persistent left sidebar establishes organization and platform hierarchy.
- The page header keeps global search, documentation, notifications, and the
  current identity available.
- Overview pages lead with health and run state, followed by workspace
  inventory and audit activity.
- Run interfaces expose source, plan, policy, approval, and apply as a visible
  lifecycle.
- Dense data lives in tables; cards are reserved for summaries and bounded
  workflows.
- Sample data must identify itself as preview data until connected to a real
  organization.

At narrow widths the sidebar becomes a sheet, tables hide secondary columns,
and run stages become a vertical list. Primary actions remain visible without
horizontal scrolling.

## Identity surfaces

Sign-in and OAuth consent share the control-plane visual language. They pair a
focused form with product and security context, preserve clear error states,
and keep enterprise SSO distinct from consumer login methods. OAuth consent
must explain scopes in plain language and tell users where access can be
revoked.

## shadcn rules

- Generate primitives through the shadcn CLI.
- Keep primitives in `components/ui`.
- Build product-specific components by composing primitives.
- Use semantic variables such as `bg-background`, `bg-card`, `text-foreground`,
  `border-border`, and `bg-primary`.
- Do not paste arbitrary component collections or introduce a second token
  system.

Source: https://docs.stackship.run/design-system/index.mdx