# Contentstack Design System

> A dark, high-contrast digital canvas punctuated by vibrant "Amethyst" accents and elegant, large-scale serif display type.

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

## TL;DR
Contentstack utilizes a "monochrome-plus-one" strategy where a deep achromatic foundation (#151515, #212121) is electrified by a signature Amethyst primary (#ac75ff). The system leans heavily into high-contrast typography, pairing the utilitarian Inter sans-serif with the sophisticated, high-contrast Tercia Regular for massive display headlines (up to 140px). Layouts are characterized by sharp-edged surfaces (0px radius) and generous vertical rhythm, using color-coded "accent" zones in blue (#899cfa) and green (#b0f7ba) to differentiate product capabilities without breaking the dark-mode aesthetic.

## Signature DNA
1. **Amethyst Voltage** (The use of #ac75ff as the singular high-energy action color for primary CTAs and key brand moments against dark surfaces.)
2. **Tercia Display Scale** (Massive, low-tracking serif headlines using Tercia Regular at 140px or 72px to create an editorial, "premium tech" authority.)
3. **Sharp Geometry** (A strict rejection of rounded corners for primary UI components, using 0px radius for buttons and cards to maintain a precise, architectural feel.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.surface.1}` | `#151515` | Primary page background / Deepest surface | 7 | 1 | `css_variable:--color-docs-s1` |
| `{color.surface.2}` | `#1a1919` | Secondary surface / Card background | 3 | 1 | `css_variable:--Surfaces-Docs-Surface-2` |
| `{color.surface.3}` | `#212121` | Tertiary surface / Hover states | 40 | 1 | `css_variable:--color-surface-3` |
| `{color.text.primary}` | `#ffffff` | Primary body and heading text | 327 | 1 | `css_variable:--color-white` |
| `{color.text.inverse}` | `#151515` | Text on Amethyst primary buttons | 7 | 1 | `css_variable:--color-gray975-white` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#ac75ff` | Primary CTA background / Amethyst accent | 9 | 1 | `css_variable:--color-primary-accent` |
| `{color.primary.light}` | `#d2b7f9` | Secondary Amethyst / Action text | 10 | 1 | `css_variable:--color-amethyst-light` |
| `{color.accent.blue}` | `#899cfa` | Product category accent (Blue) | 4 | 1 | `css_variable:--color-blue-accent` |
| `{color.accent.green}` | `#b0f7ba` | Product category accent (Green) | 4 | 1 | `css_variable:--color-green-accent` |
| `{color.decorative.purple}` | `#654a8c` | Deep decorative purple (decorative_only) | 1 | 1 | `css_variable:--color-amethyst-shade` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| TerciaRegular | 400 | Display / Hero Headlines | Bodoni Moda | Proprietary |
| Inter | 200, 300, 400, 500, 600 | Body / UI / Subheadings | Inter (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 140px | 140px | -2.8px | 400 | Hero Banner Title | `h2.why-contentstack-banner__title` |
| `{type.display.xl}` | 72px | 93.6px | normal | 400 | Section Headlines | `h2.inline-block.w-fit` |
| `{type.display.lg}` | 48px | 62.4px | normal | 400 | Sub-hero Display | `p` |
| `{type.heading.md}` | 32px | 51.2px | normal | 200 | Light Intro Text | `p.text-[32px]` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 400 | Card Titles | `div.cs-h3` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Lead Paragraphs | `p` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `section.home-hero-slider-gradient` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | UI Labels / Small Body | `div.cs-s-body` |
| `{type.caption}` | 12px | 16px | normal | 400 | Metadata / Captions | `button.cursor-pointer.text-xs` |

### Principles
1. **Extreme Display Contrast**: Headlines use TerciaRegular with negative tracking (-2.8px) to create a dense, "ink-heavy" visual weight.
2. **Lightweight Sans-Serif**: Inter is frequently used at weight 200 or 300 for large-scale subheaders (32px) to provide a modern counterpoint to the serif display.
3. **Tight Line Heights**: Display type often uses a 1:1 ratio (140px size / 140px leading) to maintain block-like headline structures.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 4px | 8 |
| `{space.sm}` | 8px | 8 |
| `{space.md}` | 16px | 61 |
| `{space.lg}` | 24px | 24 |
| `{space.xl}` | 32px | 10 |
| `{space.section}` | 80px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Buttons, Cards, Inputs, Sections | 409 occurrences |
| `{radius.pill}` | 9999px | Badges, specific decorative tags | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.none}` | none | Default state for cards and buttons | Observed on primary surfaces |
| `{shadow.sm}` | `0 4px 6px -1px rgba(0,0,0,0.1)` | Hovered navigation or small cards | 8 occurrences |
| `{shadow.md}` | `0 10px 15px -3px rgba(0,0,0,0.1)` | Floating modals or dropdowns | 4 occurrences |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action
**Pages observed:** contentstack.com, contentstack.com/pricing
**Spec:** Background `{color.primary}` (#ac75ff) / Text `{color.text.inverse}` (#151515) / Radius `{radius.sharp}` (0px) / Padding 16px 12px / Typography `{type.body.sm}` (14px/500)
**States observed:** Default | Hover: Not captured | Active: Captured

#### Surface Dark
**Role:** Primary section container
**Pages observed:** contentstack.com, contentstack.com/about
**Spec:** Background `{color.surface.1}` (#151515) / Text `{color.text.primary}` (#ffffff) / Radius `{radius.sharp}` (0px)
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Product capability display
**Pages observed:** contentstack.com
**Spec:** Background `{color.surface.2}` (#1a1919) / Border 1px `{color.surface.3}` (#212121) / Radius `{radius.sharp}` (0px) / Padding 24px
**States observed:** Default | Hover: Not captured

#### Product Accent Card
**Role:** Categorized content (e.g., Blue/Green categories)
**Pages observed:** contentstack.com
**Spec:** Background `#2b2d3b` (Blue variant) / Border 6px `{color.accent.blue}` (#899cfa) / Radius `{radius.sharp}` (0px)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Pricing plan selection
**Pages observed:** contentstack.com/pricing
**Spec:** Background `{color.surface.2}` (#1a1919) / Border 1px `rgba(255,255,255,0.04)` / Radius `{radius.sharp}` (0px) / Padding 16px
**States observed:** Default: Captured

#### Cookie Banner
**Role:** Legal compliance
**Pages observed:** contentstack.com
**Spec:** Background `#2b2d3b` / Text `#ffffff` / Border 1px `#ffffff` / Radius `{radius.sharp}` (0px)
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px |
| Section Gap | 80px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, menu transforms to hamburger, display type scales down. |
| Desktop | 1440px | Full 12-column spread, mega-display type (140px) enabled. |

## Imagery & decoration
- **Abstract 3D Prisms**: High-gloss, translucent geometric shapes in Amethyst, Blue, and Green.
- **Gradient Overlays**: Subtle radial gradients behind hero sections to lift text from the #151515 background.
- **Avoidance**: No rounded corners on UI elements; no photography without heavy color grading or dark overlays.

## Do's
- Use `#ac75ff` for the primary action in every view.
- Set display headlines in TerciaRegular with negative tracking.
- Keep all border radii at `0px` for a sharp, architectural look.
- Use `#151515` as the base canvas for all high-impact pages.
- Differentiate product sections using the Blue (#899cfa) or Green (#b0f7ba) accent tokens.

## Don'ts
- **Wrong**: Using `#d2b7f9` as a button background. **Right**: Use `#ac75ff`. **Reason**: `#d2b7f9` lacks sufficient contrast against white text (1.8:1).
- **Wrong**: Applying rounded corners to primary CTAs. **Right**: Use `0px` radius. **Reason**: The brand identity is built on sharp, precise geometry.
- **Wrong**: Using TerciaRegular for body copy. **Right**: Use Inter. **Reason**: Tercia is a display face optimized for large sizes.
- **Wrong**: Introducing a new accent color (e.g., Orange). **Right**: Stick to the Amethyst/Blue/Green triad.

## Similar brands
- Vercel (Dark mode, sharp geometry)
- Linear (High-contrast dark UI, specific accent color)
- Framer (Editorial typography, dark canvas)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #ac75ff;
  --color-surface-1: #151515;
  --color-surface-2: #1a1919;
  --color-text-primary: #ffffff;
  --font-display: "TerciaRegular", serif;
  --font-sans: "Inter", sans-serif;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Contentstack Amethyst (#ac75ff) background, sharp 0px corners, and 14px Inter Medium text in #151515."
- "Design a hero section with a 140px TerciaRegular headline on a #151515 background, ensuring the letter spacing is set to -2.8px."
- "Generate a feature card pattern with a #1a1919 background, 0px border radius, and a 1px border using #212121."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the computed style evidence.
- The specific line-height for the 72px display type varied between 72px and 108px in evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://contentstack.com | 1440x900 | 2026-06-06 |
| Pricing | https://contentstack.com/pricing | 1440x900 | 2026-06-06 |
| About | https://contentstack.com/about | 1440x900 | 2026-06-06 |