# Deloitte — Design System
> A leading global provider of audit, consulting, financial advisory, risk management, and tax services.
- **Canonical:** https://uiuxskills.com/library/deloitte
- **Source:** https://www.deloitte.com/in/en.html
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-07-10T21:54:22.991Z

---

---
version: alpha
name: Deloitte
tagline: Making an impact that matters
description: >-
  A leading global provider of audit, consulting, financial advisory, risk management, and tax
  services.
tone: professional
color-scheme: light
colors:
  primary: "#1076A8"
  secondary: "#0076A8"
  accent: "#86BC25"
  background: "#FFFFFF"
  surface: "#F3F4F6"
  surface-dim: "#0B2316"
  on-primary: "#FFFFFF"
  on-surface: "#000000"
  on-surface-variant: "#D0D0CE"
  outline: "#E0E0E0"
  error: "#D93025"
  success: "#2E7D32"
typography:
  display-lg:
    fontFamily: Aptos
    fontSize: 48px
    fontWeight: 300
    lineHeight: "1.2"
  display-md:
    fontFamily: Aptos
    fontSize: 36px
    fontWeight: 300
    lineHeight: "1.2"
  headline-lg:
    fontFamily: Aptos
    fontSize: 30px
    fontWeight: 400
    lineHeight: "1.3"
  headline-md:
    fontFamily: Aptos
    fontSize: 24px
    fontWeight: 600
    lineHeight: "1.3"
  body-lg:
    fontFamily: Open Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.5"
  body-md:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: "1"
  label-sm:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1"
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    borderColor: "{colors.secondary}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  hero-banner:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-primary}"
  button-accent:
    backgroundColor: "{colors.accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  duration-long: 1000ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 4px 8px rgba(0, 0, 0, 0.2)
  lg: 0 8px 16px rgba(0, 0, 0, 0.3)
---

## Overview

Deloitte's visual identity balances corporate authority with digital accessibility. It utilizes a striking contrast between deep, dark backgrounds and clean, highly readable white content areas, anchored by the iconic Deloitte green dot and professional blue accents. This creates a trustworthy, authoritative, and highly professional environment for enterprise clients.

## Colors

The color strategy focuses on establishing corporate credibility through a dominant palette of blues and clean neutrals, punctuated by a highly controlled brand accent. High contrast is maintained across all surfaces to ensure digital accessibility and an editorial, publication-like presentation.

* Primary `{colors.primary}` (#1076A8): The primary brand blue used for key interactive elements, links, and primary call-to-actions.
* Secondary `{colors.secondary}` (#0076A8): A slightly darker blue variant used for hover states and secondary interactive elements.
* Accent `{colors.accent}` (#86BC25): The iconic Deloitte green, used sparingly as a brand signature and accent highlight.
* Background `{colors.background}` (#FFFFFF): The clean white background used for the main content areas to ensure maximum readability.
* Surface (inferred) `{colors.surface}` (#F3F4F6): A light grey surface color used for container backgrounds and subtle section grouping.
* Surface Dim (inferred) `{colors.surface-dim}` (#0B2316): The deep dark green gradient background observed in high-impact hero sections.
* On Primary `{colors.on-primary}` (#FFFFFF): High-contrast white text used on primary blue buttons and dark hero surfaces.
* On Surface `{colors.on-surface}` (#000000): The primary text color used on light backgrounds for maximum legibility.
* On Surface Variant `{colors.on-surface-variant}` (#D0D0CE): A muted grey text color used for secondary metadata, placeholders, and captions.
* Outline (inferred) `{colors.outline}` (#E0E0E0): A light grey border color used for dividers, input fields, and card outlines.
* Error (inferred) `{colors.error}` (#D93025): Standard semantic red used for error states and critical alerts.
* Success (inferred) `{colors.success}` (#2E7D32): Standard semantic green used for success states and positive indicators.

## Typography

The typography system uses Aptos for display and headline levels to deliver an authoritative editorial tone, while relying on Open Sans for body copy and labels to optimize readability across digital screens.

* Display Large `{typography.display-lg}`: Aptos font family, used for high-impact hero titles and major section headers.
* Display Medium (inferred) `{typography.display-md}`: Aptos font family, used for secondary hero titles and prominent landing page headers.
* Headline Large `{typography.headline-lg}`: Aptos font family, used for standard section headings and article titles.
* Headline Medium (inferred) `{typography.headline-md}`: Aptos font family, used for sub-sections and card titles within content grids.
* Body Large (inferred) `{typography.body-lg}`: Open Sans font family, used for introductory paragraphs and featured callouts.
* Body Medium `{typography.body-md}`: Open Sans font family, the standard body copy size used for articles, descriptions, and general text.
* Label Medium `{typography.label-md}`: Open Sans font family, used for interactive labels, button text, and navigation links.
* Label Small (inferred) `{typography.label-sm}`: Open Sans font family, used for small metadata, tags, and caption labels.

## Layout

* The layout is structured around a clean, multi-column grid system with generous vertical spacing, utilizing standard spacing units like `{spacing.md}` for gutters and up to `{spacing.2xl}` for section blocks.
* Page sections follow a strict top-to-bottom order: `nav`, `hero`, `social-proof`, `features`, and `footer`.
* The hero banner features a centered headline and subhead utilizing `{typography.display-lg}` and a single primary CTA, paired with an asymmetric product screenshot offset to the right.
* Responsive containers collapse gracefully on mobile viewports, with the navigation collapsing to a hamburger drawer below 768px.

## Elevation & Depth

Depth is primarily conveyed through flat, high-contrast color blocks, utilizing subtle single-layer shadows only when necessary to preserve a clean, professional aesthetic.

* `elevation.sm`: Used for low-intensity card lift and interactive element states.
* `elevation.md`: Applied to dropdown menus, popovers, and floating navigation elements.
* `elevation.lg`: Reserved for modal overlays, dialog windows, and deep drawer elements.

## Shapes

The brand employs a hybrid shape strategy that balances approachable interactivity with structured, corporate discipline. Interactive elements like primary and secondary CTA buttons utilize fully rounded pill shapes via `{rounded.full}` to clearly invite user action. 

In contrast, structural elements such as cards, input fields, and content containers use sharp or subtly rounded corners, specifically `{rounded.sm}` and `{rounded.md}`, to maintain a highly structured, corporate tone.

## 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`

### Primary Button
The primary button is a fully rounded pill shape using `{rounded.full}` with a background of `{colors.primary}` and text in `{colors.on-primary}`. It transitions to `{colors.secondary}` during hover states. Use this component for the single most important action on a page or section.

### Secondary Button
The secondary button features a transparent or `{colors.background}` fill with a border and text colored in `{colors.primary}`. It maintains a `{rounded.full}` shape and is used for supporting actions that accompany a primary call to action.

### Card
A structural container utilizing `{rounded.md}` and a subtle border of `{colors.outline}`. It is used to group related content, articles, or insights in a clean, flat grid layout.

### Elevated Card
An alternative card container that relies on `{elevation.sm}` or `{elevation.md}` instead of a border to establish depth. Use this component to draw attention to featured insights or interactive grid items.

### Input Field
A text entry field with a subtle `{rounded.sm}` corner radius and `{colors.outline}` border. It transitions to a `{colors.primary}` border during focus states to provide clear interactive feedback.

### Link
Inline text elements styled with `{colors.primary}` and `{typography.body-md}` that transition to `{colors.secondary}` on hover. Use these for inline text navigation and editorial redirects.

### Badge
A small, compact label utilizing `{rounded.sm}` and `{colors.surface}` to categorize content. Semantic variants like `{colors.error}` and `{colors.success}` are used to represent system alerts or status indicators.

### Divider
A thin, 1px horizontal rule colored in `{colors.outline}`. Use this component to cleanly segment vertical content blocks and maintain editorial structure.

### Hero Banner
A high-impact, full-width container utilizing `{colors.surface-dim}` as a background and `{colors.on-primary}` for text. Use this at the top of landing pages to establish a premium, editorial tone.

### Accent Button
A specialized button utilizing `{colors.accent}` and `{rounded.md}`. Use this sparingly for brand-specific actions directly tied to the core Deloitte identity.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons to ensure high visibility. | Do not use `{colors.accent}` as a background color for primary buttons or large text blocks. |
| Apply `{colors.accent}` sparingly, primarily for brand-specific accents like the Deloitte logo dot. | Do not saturate the interface with `{colors.accent}` or use it for standard interactive states. |
| Use `{colors.surface-dim}` for high-impact hero sections to create a premium, editorial feel. | Do not use `{colors.surface-dim}` without high-contrast text like `{colors.on-primary}`. |
| Ensure all body copy uses `{typography.body-md}` with `{colors.on-surface}` on light backgrounds for optimal readability. | Do not mix font families by using `{typography.display-lg}` for body copy or paragraph blocks. |
| Use `{rounded.full}` exclusively for interactive buttons like primary and secondary CTAs. | Never apply `{rounded.full}` to structural cards or content containers. |
| Separate content blocks cleanly using `{colors.outline}` for dividers. | Avoid tight spacing; maintain a minimum of `{spacing.md}` between adjacent content elements. |
| Apply `{elevation.sm}` or flat designs to interactive cards to maintain the corporate aesthetic. | Avoid using heavy shadows or values exceeding `{elevation.lg}` for standard UI elements. |
| Use `{colors.surface}` to group secondary metadata or tags in a neutral container. | Do not use `{colors.primary}` or `{colors.secondary}` for static, non-interactive badge backgrounds. |

## Content Style

* **CTA Style**: Action buttons must use imperative verbs in sentence case without exclamation marks. Labels should be concise, typically limited to 2-3 words (e.g., "Explore more", "Who we are").
* **Heading Tone**: Headlines must present concrete benefit statements rather than marketing superlatives. Use a professional mix of declarative statements and product-named features to establish authority.
* **Copy Density**: Keep paragraphs short and highly scannable, ideally ranging from 1 to 3 sentences. Incorporate bullet lists and inline product names frequently to break up dense blocks of text.

## Imagery & Icons

Editorial photography is combined with vibrant, conceptual vector illustrations to represent complex business concepts. Illustrations must feature flat colors, clean geometric shapes, and a diverse color palette. Icons must remain clean, stroke-based, and highly legible. Avoid complex gradients or skeuomorphic details in visual assets to maintain the clean, corporate aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Deloitte, a minimal, enterprise-grade brand with a professional, authoritative tone. 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.lg}`) — never hardcode hex values, font sizes, or pixel values.
2. Render only the components listed under `components:` (`button-primary`, `card`, `hero-banner`, etc.). Do not invent variants the spec does not define.
3. Apply the shape strategy from Shapes notes: `{rounded.full}` for interactive buttons only; `{rounded.sm}` or flat corners for cards, inputs, and containers.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.accent}` as a large background — surface the conflict before proceeding.
5. Follow Layout notes when building multi-column grids: use the responsive container, collapse to single-column on mobile, and maintain generous vertical rhythm with `{spacing.xl}` or `{spacing.2xl}` between sections.

## Output contract

**Must:**
- Use named tokens for every color, type style, spacing value, and radius.
- Cover hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Enforce minimum `{spacing.md}` between adjacent content elements per the Don'ts.
- Write CTAs in imperative sentence case, 2–3 words, no exclamation marks (`Explore more`, `Get started`).
- Render hero sections with `{colors.surface-dim}` background and `{colors.on-primary}` text only.
- Maintain ≥ 4.5:1 contrast on all body text.

**Must NOT:**
- Invent colors, radii, or font families outside the spec.
- Apply `{rounded.full}` to cards, containers, or input fields.
- Use `{colors.accent}` as a background for any text-bearing block.
- Add emoji, marketing superlatives, or filler copy.
- Rewrite existing page copy, button labels, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface}`; for text on light backgrounds, default to `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations; defer to any authoritative theme file if one exists.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.