# Chevron — Design System
> Global energy corporation focused on meeting the world's growing demand for energy through innovation and human ingenuity.
- **Canonical:** https://uiuxskills.com/library/chevron
- **Source:** https://www.chevron.com/
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-08-05T04:16:41.134Z

---

---
version: alpha
name: Chevron
tagline: Human Energy
description: >-
  Chevron Corporation is a multinational energy corporation focused on meeting the world's growing
  demand for energy.
tone: professional
color-scheme: light
colors:
  primary: "#0066B2"
  secondary: "#114B95"
  tertiary: "#D62027"
  neutral: "#F4F4F4"
  surface: "#FFFFFF"
  surface-dim: "#EAEAEA"
  on-surface: "#0B2D71"
  on-primary: "#FFFFFF"
  outline: "#8091B3"
  error: "#FF4500"
typography:
  display-lg:
    fontFamily: GothamBold
    fontSize: 64px
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: GothamBold
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: GothamBold
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: normal
  headline-md:
    fontFamily: GothamBold
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.4"
    letterSpacing: normal
  headline-sm:
    fontFamily: GothamBold
    fontSize: 20px
    fontWeight: 700
    lineHeight: "1.4"
    letterSpacing: normal
  body-lg:
    fontFamily: GothamNarrowBook
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: normal
  body-md:
    fontFamily: GothamBook
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.6"
    letterSpacing: normal
  body-sm:
    fontFamily: GothamBook
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: normal
  label-md:
    fontFamily: GothamNarrowBook
    fontSize: 14px
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: GothamNarrowBook
    fontSize: 12px
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: "{colors.secondary}"
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.primary}"
    outlineOffset: 2px
  link:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  hero-banner:
    backgroundColor: rgba(11, 45, 113, 0.8)
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: 48px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  button-tertiary:
    backgroundColor: "{colors.tertiary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 2px 4px rgba(0, 0, 0, 0.2)
  lg: 0 4px 8px rgba(0, 0, 0, 0.3)
---

## Overview

Chevron's visual system projects corporate stability, global scale, and established trust. The aesthetic balances a highly professional enterprise tone with accessible, clean layouts that emphasize human energy and industrial innovation. The visual identity relies on a structured, high-contrast presentation to communicate reliability and forward-looking energy solutions.

## Colors

The color strategy utilizes a classic, high-contrast corporate palette built around iconic blue and red tones. Deep navy is used for primary readability, while bright blues and reds serve as brand anchors and interactive cues.

*   Primary (`{colors.primary}`): #0066B2. Chevron Blue, used for primary brand accents and key navigation highlights.
*   Secondary (`{colors.secondary}`): #114B95. Darker blue accent used for primary buttons and prominent interactive elements.
*   Tertiary (inferred) (`{colors.tertiary}`): #D62027. Chevron Red, used sparingly for brand recognition and specific accents.
*   Neutral (`{colors.neutral}`): #F4F4F4. Light gray background color used to separate content sections.
*   Surface (`{colors.surface}`): #FFFFFF. Pure white used for card backgrounds and primary content areas.
*   Surface-dim (inferred) (`{colors.surface-dim}`): #EAEAEA. Slightly darker gray surface variant for subtle containment.
*   On-surface (`{colors.on-surface}`): #0B2D71. Deep navy blue used for high-contrast, readable body text and headings.
*   On-primary (`{colors.on-primary}`): #FFFFFF. White text used on primary and secondary colored backgrounds.
*   Outline (`{colors.outline}`): #8091B3. Muted blue-gray used for borders, dividers, and subtle outlines.
*   Error (`{colors.error}`): #FF4500. Vibrant orange-red used for error states and critical alerts.

## Typography

The typography relies entirely on the Gotham family, establishing a clean, geometric, and authoritative voice. Bold weights are reserved for structural headings, while Book and Narrow Book variants ensure high readability across dense corporate reports and body copy.

*   Display Large (`{typography.display-lg}`): GothamBold, 64px. Used for major hero announcements and quarterly results headlines.
*   Display Medium (inferred) (`{typography.display-md}`): GothamBold, 48px. Used for secondary hero titles and prominent section headers.
*   Headline Large (inferred) (`{typography.headline-lg}`): GothamBold, 36px. Used for standard section headings and article titles.
*   Headline Medium (inferred) (`{typography.headline-md}`): GothamBold, 24px. Used for card titles and sub-sections.
*   Headline Small (inferred) (`{typography.headline-sm}`): GothamBold, 20px. Used for small headings and featured list items.
*   Body Large (`{typography.body-lg}`): GothamNarrowBook, 18px. Used for introductory paragraphs and lead-in copy.
*   Body Medium (`{typography.body-md}`): GothamBook, 16px. Standard body text size for articles and general descriptions.
*   Body Small (inferred) (`{typography.body-sm}`): GothamBook, 14px. Used for captions, metadata, and secondary body copy.
*   Label Medium (inferred) (`{typography.label-md}`): GothamNarrowBook, 14px. Used for button labels and navigation links.
*   Label Small (inferred) (`{typography.label-sm}`): GothamNarrowBook, 12px. Used for small tags, badges, and micro-copy.

## Layout

The layout is structured on a strict grid with consistent vertical rhythm defined by the spacing scale.
*   Spacing Strategy: Section margins utilize large spacing steps like `{spacing.xl}` and `{spacing.2xl}` to separate distinct content blocks, while internal card padding relies on `{spacing.lg}` (32px) or `{spacing.md}` (16px) to maintain clean containment.
*   Page Flow: The standard page layout follows a top-to-bottom sequence of `nav` -> `hero` -> `features` -> `newsroom` -> `footer`.
*   Hero Pattern: Features a centered headline and subhead with a single primary CTA button overlaid on a full-bleed photographic background, utilizing `{components.hero-banner}` styling.
*   Responsive Behavior: Layouts are mobile-first. Multi-column news grids stack vertically on viewport widths below 768px, and the global navigation collapses into a mobile drawer.

## Elevation & Depth

The interface maintains a primarily flat aesthetic, utilizing low-elevation shadows to indicate interactivity and distinct color blocks to establish hierarchy.

*   `elevation.sm`: Used for subtle card lift and interactive elements in their default state.
*   `elevation.md`: Applied to active or hovered interactive cards to provide a clear tactile response.
*   `elevation.lg`: Reserved for overlay elements, dropdowns, or modal dialogs requiring maximum separation from the background.

## Shapes

The shape philosophy balances corporate structure with approachable modern design by applying moderate corner rounding.

*   Standard interactive elements like buttons and input fields utilize `{rounded.md}` to maintain a consistent, friendly but professional appearance.
*   Larger container elements, such as cards and hero banners, use `{rounded.lg}` or `{rounded.xl}` to soften the visual boundaries of large content blocks.
*   Pill shapes using `{rounded.full}` are strictly reserved for badges, tags, and micro-indicators, preventing them from being confused with standard buttons.

## 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 the main call-to-action element, styled with `{colors.secondary}` background and `{colors.on-primary}` text. It transitions to `{colors.primary}` on hover, utilizing `{typography.label-md}` and `{rounded.md}` for a clean, professional appearance. Use this for the single most important action on a page or section.

### Secondary Button
The secondary button is used for alternative or supporting actions. It features a `{colors.neutral}` background with `{colors.on-surface}` text, transitioning to `{colors.surface-dim}` on hover. It maintains the same `{rounded.md}` and `{typography.label-md}` as the primary button to ensure visual alignment.

### Tertiary Button
A specialized action button utilizing the brand's accent color `{colors.tertiary}` as its background. It is used sparingly for specific brand recognition actions or secondary highlights, featuring `{typography.label-md}` and `{rounded.md}` with tighter padding.

### Card
Cards are content containers used to group related information, such as news articles or feature highlights. The standard `{components.card}` uses `{colors.surface}` background, `{rounded.md}` corners, and `{colors.outline}` for a subtle border. The `{components.card-elevated}` variant removes the border in favor of subtle depth.

### Input Field
Input fields are designed for clean form entry, utilizing `{colors.surface}` background, `{colors.on-surface}` text, and `{colors.outline}` border. On focus, the border transitions to `{colors.primary}` with an outline offset of 2px to ensure high accessibility.

### Link
Standard inline and block links use `{colors.on-surface}` text and `{typography.body-md}`. On hover, they transition to `{colors.primary}` to clearly indicate interactivity without requiring a full button container.

### Badge
Badges are small, non-interactive status or category indicators. The standard `{components.badge}` uses `{colors.neutral}` background, `{colors.on-surface}` text, and `{rounded.full}` to create a distinct pill shape.

### Badge Error
A critical status indicator styled with `{colors.error}` background and `{rounded.sm}` corners. It is used exclusively for system errors, critical alerts, or warning states.

### Divider
A structural rule used to separate content sections or list items. It uses `{colors.outline}` background with a fixed height of 1px to maintain a minimal, clean separation.

### Hero Banner
A prominent, high-contrast container designed to overlay full-bleed imagery. It utilizes a semi-transparent dark navy background (`rgba(11, 45, 113, 0.8)`), `{colors.on-primary}` text, and `{rounded.lg}` corners to ensure text readability over complex photographic backgrounds.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary brand accents and key navigation highlights. | Never use `{colors.primary}` as a background for body text without ensuring proper contrast. |
| Apply `{colors.on-surface}` for high-contrast, readable body text on light backgrounds. | Never place `{colors.on-surface}` text directly on dark backgrounds without switching to white or light variants. |
| Ensure all primary actions use `{colors.secondary}` with white text for maximum visibility. | Do not use `{colors.tertiary}` for standard primary actions; reserve it for specific brand recognition accents. |
| Use `{rounded.md}` consistently across all standard buttons and input fields. | Avoid applying `{rounded.full}` to standard content cards; reserve it for badges or tags. |
| Maintain clear separation between sections using `{colors.neutral}` backgrounds. | Do not mix multiple font families; stick to the Gotham family defined in `{typography.body-md}`. |
| Use `{typography.display-lg}` exclusively for major hero announcements and quarterly results. | Do not use `{typography.display-lg}` for standard body copy or minor section headers. |
| Apply `{elevation.sm}` or `{elevation.md}` to interactive cards to provide subtle depth. | Avoid using high-elevation shadows like `{elevation.lg}` on standard informational cards. |
| Reserve `{colors.error}` and `{components.badge-error}` strictly for critical alerts and error states. | Do not use `{colors.error}` for decorative elements or standard category badges. |

## Content Style

Call-to-action labels must use clear, imperative verbs in sentence case, typically limited to two or three words (e.g., "Read the article", "Learn more", "See our solutions"). Avoid generic labels like "Click here" or "Submit".

Headlines and section titles must project a professional, declarative tone focused on concrete benefits, corporate achievements, and community or environmental impact. Phrasing should be direct, authoritative, and free of unnecessary marketing jargon.

Body copy must maintain a low density to ensure high scannability. Paragraphs should be kept short, typically containing one to three sentences, and paired with clear, descriptive headings to allow quick reading.

## Imagery & Icons

The visual system relies heavily on high-quality, editorial photography rather than abstract illustrations or heavy iconography. Imagery must depict real employees, industrial facilities, and community initiatives in bright, natural light. Photos should feel authentic, professional, and grounded in real-world operations. Avoid overly stylized filters, isometric graphics, or generic stock photography that lacks human connection.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Chevron, a professional enterprise brand projecting stability, global scale, and corporate trust. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font names directly.
2. Render only the components listed under `components:` (`button-primary`, `card`, `input-field`, etc.). Do not invent variants or states the spec does not define.
3. Follow the Layout and Shapes notes when structuring grids and applying corner radii: block-based sections with clear margins, `{rounded.md}` on buttons and inputs, `{rounded.sm}` or `{rounded.md}` on cards, `{rounded.full}` reserved for badges only.
4. Treat the Do's and Don'ts table as authoritative. If a user's request conflicts with it (e.g., requesting `{colors.primary}` as a body-text background), surface the conflict explicitly before proceeding.
5. Apply CTA copy style — imperative, sentence case, 2–3 words — only when generating placeholder label text; never rewrite product-supplied copy.

## Output contract

**Must:**
- Use token names for every color, type, spacing, and radius decision.
- Implement hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Set body text and headings to `{colors.on-surface}` on light surfaces; switch to `{colors.on-primary}` on `{colors.secondary}` or `{colors.primary}` backgrounds.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, gap, and margin values.
- Reserve `{colors.tertiary}` and `{colors.error}` for their designated roles only — brand accents and critical alerts, respectively.

**Must NOT:**
- Invent colors, radii, font families, or spacing values absent from the spec.
- Apply generic system defaults when a brand token exists.
- Use `{rounded.full}` on content cards or `{colors.error}` for decorative purposes.
- Add emoji, filler copy, or marketing language.
- Rewrite page copy, button labels, headings, or navigation items supplied by the product team.
- Alter page structure or information architecture 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 spec components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.neutral}` for section separation.
- For unspecified breakpoints, follow the Layout block notes; if absent, apply mobile-first with one breakpoint at 768px.
- Tokens described in prose without explicit YAML entries are inferred approximations; defer to any authoritative theme file or Storybook source if available.