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, andbg-primary. - Do not paste arbitrary component collections or introduce a second token system.