# Sitecore — Design System
> AI-powered digital experience platform (DXP) and content management system.
- **Canonical:** https://uiuxskills.com/library/sitecore
- **Source:** https://www.sitecore.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-08-12T21:05:02.491Z

---

---
version: alpha
name: Sitecore
tagline: AI-powered digital experiences that convert
description: AI-powered digital experience platform (DXP) and content management system.
tone: professional
color-scheme: light
colors:
  primary: "#000050"
  secondary: "#E21D24"
  accent: "#E11D48"
  surface: "#FFFFFF"
  surface-dim: "#F8FAFC"
  surface-container: "#F1F5F9"
  on-primary: "#FFFFFF"
  on-surface: "#1E1C22"
  outline: "#C1BDC7"
  error: "#F44336"
typography:
  display-lg:
    fontFamily: DM Sans
    fontSize: 72px
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: DM Sans
    fontSize: 56px
    fontWeight: 700
    lineHeight: "1.15"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: DM Sans
    fontSize: 40px
    fontWeight: 700
    lineHeight: "1.2"
  headline-md:
    fontFamily: DM Sans
    fontSize: 32px
    fontWeight: 600
    lineHeight: "1.25"
  headline-sm:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: "1.3"
  body-lg:
    fontFamily: DM Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.5"
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.4"
  label-lg:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.02em
  label-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.01em
  label-sm:
    fontFamily: DM Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 48px
  button-primary-hover:
    backgroundColor: "#C1123F"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 48px
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-flat:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 24px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 16px
    height: 44px
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 16px
    height: 44px
    width: 100%
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.accent}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
    width: 100%
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: ease-in-out
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Sitecore's visual identity balances enterprise authority with modern, AI-driven dynamism. The design pairs a deep, trustworthy navy base with high-energy magenta and red accents to signal innovation and precision. It creates a professional yet cutting-edge environment tailored for digital experience leaders.

## Colors

The color strategy relies on a high-contrast palette that establishes strong hierarchy and brand presence. A deep navy primary color anchors the interface, while a vibrant magenta accent drives user interaction and highlights key features.

*   `colors.primary` (#000050): Deep navy blue used for brand authority, hero backgrounds, and primary text elements.
*   `colors.secondary` (#E21D24): The signature Sitecore red, used primarily for the brand logo and strategic accents.
*   `colors.accent` (#E11D48): Vibrant magenta/pink-purple used for high-visibility primary call-to-actions and interactive highlights.
*   `colors.surface` (#FFFFFF): Pure white used for clean page backgrounds and card surfaces.
*   `colors.surface-dim` (inferred) (#F8FAFC): Off-white background tint used to differentiate content sections.
*   `colors.surface-container` (inferred) (#F1F5F9): Light gray container background for badges, input fields, and structural blocks.
*   `colors.on-primary` (#FFFFFF): White text used on primary dark backgrounds and primary buttons for maximum contrast.
*   `colors.on-surface` (#1E1C22): Near-black dark charcoal used for primary body copy and headings on light surfaces.
*   `colors.outline` (#C1BDC7): Muted gray used for borders, dividers, and secondary button outlines.
*   `colors.error` (#F44336): Standard red used for error states and critical alerts.

## Typography

The typography system relies entirely on the clean, geometric sans-serif DM Sans to convey clarity, scalability, and modern professionalism across all screen sizes.

*   `typography.display-lg` (DM Sans): Ultra-bold display size used for high-impact hero headlines.
*   `typography.display-md` (inferred) (DM Sans): Secondary display size for prominent section introductions.
*   `typography.headline-lg` (DM Sans): Standard heading size for major page sections.
*   `typography.headline-md` (inferred) (DM Sans): Medium heading size for sub-sections and feature blocks.
*   `typography.headline-sm` (inferred) (DM Sans): Small heading size for card titles and minor groupings.
*   `typography.body-lg` (DM Sans): Large body copy used for hero subheadings and introductory paragraphs.
*   `typography.body-md` (DM Sans): Standard body copy size for general reading and descriptions.
*   `typography.body-sm` (inferred) (DM Sans): Small body copy for secondary details, captions, and footer links.
*   `typography.label-lg` (inferred) (DM Sans): Bold label text used for primary buttons and navigation items.
*   `typography.label-md` (inferred) (DM Sans): Medium label text used for secondary buttons and form labels.
*   `typography.label-sm` (inferred) (DM Sans): Small label text used for badges and micro-copy.

## Layout

*   The layout utilizes a structured, high-density grid system anchored on a 4px base unit, with standard spacing steps like `{spacing.md}` (16px) for internal padding and `{spacing.xl}` (32px) to `{spacing.2xl}` (48px) for section margins.
*   The observed section order top-to-bottom is: `announcement-bar` → `nav` → `hero` → `features` → `benefits` → `social-proof` → `analyst-recognition` → `footer`.
*   The hero composition pattern features a centered bold headline and subhead on a deep navy gradient background, showcasing a prominent embedded video player and an interactive chat assistant overlay.
*   Responsive behavior ensures a mobile-friendly navigation drawer, fluid typography scaling, and stacked grid columns on smaller viewports.

## Elevation & Depth

Depth is applied selectively to maintain a clean, modern aesthetic, relying on three observed levels of shadow weight.

*   `elevation.sm` — Used for subtle card lift and interactive element hover states.
*   `elevation.md` — Applied to dropdown menus, popovers, and floating widgets like the conversational assistant.
*   `elevation.lg` — Reserved for modal overlays, drawer menus, and high-impact floating elements.

## Shapes

The brand employs a mixed corner-radius strategy to balance interactive friendliness with structural stability. Interactive elements like primary CTAs and secondary buttons use fully rounded pill shapes (`{rounded.full}`) to invite user interaction. 

Structural containers, cards, and media embeds use soft, modern rounded corners (`{rounded.lg}`) to frame content cleanly. Smaller UI badges use tighter radii (`{rounded.sm}`) to maintain crisp alignment, while input fields utilize `{rounded.md}` for a balanced form appearance.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary
Anatomy consists of a fully rounded pill shape (`{rounded.full}`) filled with `{colors.accent}` and white text (`{colors.on-primary}`) styled with `{typography.label-lg}`. On hover, the background transitions to a deeper red shade (`button-primary-hover`). Use this component exclusively for the primary call-to-action on a page or section to ensure maximum visibility.

### button-secondary
Anatomy consists of a fully rounded pill shape (`{rounded.full}`) with a `{colors.surface}` background, `{colors.on-surface}` text, and a border using `{colors.outline}`. It utilizes `{typography.label-lg}` for its label. Use this component for secondary actions, alternative paths, or outline-based buttons that sit alongside primary actions.

### card
A structural container utilizing `{rounded.lg}` corners, a `{colors.surface}` background, and a border using `{colors.outline}`. It includes `{spacing.lg}` (24px) internal padding. Use this flat, bordered container to group related information or feature lists without adding visual weight.

### card-elevated
A structural container utilizing `{rounded.lg}` corners, a `{colors.surface}` background, and an elevation shadow (`elevation.sm` or `elevation.md`). It contains `{spacing.lg}` (24px) internal padding. Use this component for high-impact content, customer stories, or interactive cards that need to stand out from the background.

### card-flat
A structural container utilizing `{rounded.lg}` corners, a `{colors.surface-dim}` background, and no border or shadow. It contains `{spacing.lg}` (24px) internal padding. Use this component to create subtle visual divisions between content blocks on a pure white canvas.

### input-field
A form element with a `{colors.surface}` background, `{colors.on-surface}` text, and a border using `{colors.outline}` with `{rounded.md}` corners. It transitions to `input-field-focus` with a `{colors.primary}` border when focused. Use this component for all text inputs, search fields, and form entries.

### link
A text link styled with `{typography.body-md}` using `{colors.primary}` text. On hover (`link-hover`), the text color transitions to `{colors.accent}`. Use this component for inline text links and navigation items.

### badge
A small metadata tag utilizing `{rounded.sm}` corners, a `{colors.surface-container}` background, and `{colors.on-surface}` text styled with `{typography.label-sm}`. Use this component to display categories, tags, or status indicators.

### badge-error
A small alert tag utilizing `{rounded.sm}` corners, a `{colors.error}` background, and `{colors.on-primary}` text styled with `{typography.label-sm}`. Use this component to highlight critical errors, system alerts, or failed validation states.

### divider
A thin horizontal line with a height of 1px and a background color of `{colors.outline}`. Use this component to separate content blocks and maintain clean visual hierarchy.

### swatch-secondary
A small decorative element of size 32px utilizing `{rounded.sm}` corners and a `{colors.secondary}` background. Use this component strictly for brand accents, logo marks, or small decorative highlights.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.accent}` for primary call-to-action buttons like `{components.button-primary}` to ensure maximum visibility. | Never use `{colors.secondary}` for primary action buttons, reserving it strictly for brand accents and logo marks. |
| Apply `{colors.primary}` as the background for high-impact hero sections to establish brand authority. | Avoid pairing `{typography.display-lg}` with low-contrast text colors on `{colors.surface}`. |
| Set body copy to `{typography.body-lg}` or `{typography.body-md}` using `{colors.on-surface}` for optimal readability. | Never use `{colors.accent}` for body text, keeping it reserved for CTAs and interactive hover states. |
| Use `{rounded.full}` exclusively for interactive button components like `{components.button-secondary}`. | Avoid using sharp corners on interactive elements, always defaulting to `{rounded.full}` or `{rounded.md}`. |
| Separate content blocks cleanly using `{components.divider}` with `{colors.outline}`. | Do not crowd layout sections; maintain consistent breathing room using `{spacing.xl}` and `{spacing.2xl}`. |
| Apply `{rounded.lg}` to structural containers like `{components.card}` to maintain a modern, approachable feel. | Avoid applying heavy shadows to standard `{components.card}` elements; rely on `{colors.outline}` for flat containment. |
| Use `{colors.surface-dim}` for `{components.card-flat}` background to create subtle visual contrast on white pages. | Do not use `{colors.error}` for standard badges; reserve it strictly for `{components.badge-error}`. |
| Transition focused inputs to `{colors.primary}` border using `{components.input-field-focus}` for clear focus states. | Do not mix `{rounded.full}` and `{rounded.sm}` on the same component container; keep radii consistent within component types. |

## Content Style

*   **CTA Style:** Button labels must be action-oriented, concise, and use imperative verbs (e.g., "Request a demo", "Activate agentic AI", "Discover SitecoreAI"). Avoid passive phrasing or overly long text.
*   **Heading Tone:** Headlines must be authoritative, benefit-driven, and forward-looking. Focus on AI capabilities, digital transformation, and business outcomes rather than purely technical feature lists.
*   **Copy Density:** Maintain a medium copy density. Combine bold, high-impact headlines with short, scannable paragraphs and structured feature grids to prevent cognitive overload.

## Imagery & Icons

The brand imagery uses a mixed treatment that combines high-fidelity product dashboard screenshots, clean vector diagrams of AI workflows, and embedded video thumbnails featuring real customer stories. Icons are clean, minimal, and stroke-based to align with the professional, enterprise-grade aesthetic. Ensure that logos and partner marks are presented in clean, uncluttered grids with ample whitespace.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Sitecore, a professional enterprise brand pairing deep navy authority with bold magenta-driven dynamism. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.xl}` — never hardcode hex values, font sizes, or pixel measurements.
2. Restrict component usage to the canonical list under `components:` (`button-primary`, `card`, `badge`, etc.). Do not invent variants the spec does not define.
3. Follow the Layout notes when composing sections: full-width color blocks for hero areas, multi-column grids for features, generous vertical separation using `{spacing.xl}` and `{spacing.2xl}`.
4. Apply the Shapes strategy precisely: `{rounded.full}` on all interactive buttons, `{rounded.lg}` on cards and containers, `{rounded.sm}` on badges.
5. Treat the Do's and Don'ts as authoritative. If a user request conflicts — for example, using `{colors.secondary}` on a CTA or adding heavy card shadows — surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Render hover, focus, and disabled states whenever the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` exclusively for all padding, margin, and gap values.
- Write CTA labels in the imperative, action-oriented style defined in Voice and Content ("Request a demo", "Activate agentic AI").
- Maintain WCAG AA contrast minimums; `{colors.on-primary}` on `{colors.primary}` and `{colors.on-surface}` on `{colors.surface}`.

**Must NOT:**
- Invent colors, radii, or typefaces outside the spec.
- Apply generic utility defaults when a brand token exists.
- Use `{colors.secondary}` for CTA buttons or `{colors.accent}` for body text.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite, replace, or restructure existing page copy, headings, or navigation items.

## When in doubt
- If a token for a needed value is absent, ask the user before approximating.
- For ambiguous backgrounds, default to `{colors.surface-dim}` for section differentiation and `{colors.surface-container}` for structural blocks.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Tokens noted as inferred approximations yield to any authoritative Figma token file or theme configuration the product team provides.
- Prefer composing existing components over introducing new structural patterns.