Grommet

# Grommet — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Hewlett Packard Enterprise. "Grommet" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Grommet
**Owner:** Hewlett Packard Enterprise
**Official documentation:** https://v2.grommet.io/
**Visual character:** HPE-born friendliness: big 18px body type, rounded 18px buttons, vivid status hues, and accessibility folded in from day one.

---

## Summary

React-based framework providing accessibility, modularity, responsiveness, and theming.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Brand Purple | `#7d4cdb` | `--grommet-brand` | Primary brand and actions |
| Text | `#444444` | `--grommet-text` | Primary text |
| White | `#ffffff` | `--grommet-white` | Surfaces |
| Light-2 | `#f2f2f2` | `--grommet-light-2` | Subtle background |
| Border | `#cccccc` | `--grommet-border` | Borders |
| Status Critical | `#ff4040` | `--grommet-status-critical` | Errors |
| Status OK | `#00c781` | `--grommet-status-ok` | Success |
| Status Warning | `#ffaa15` | `--grommet-status-warning` | Warnings |
| Accent Teal | `#00739d` | `--grommet-neutral-3` | Secondary accent |

## Typography

- **Body:** Metric / system — weights 400, 600, 700 — `Metric, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| xxlarge | `34px` | `40px` |
| xlarge | `26px` | `32px` |
| large | `22px` | `28px` |
| medium (body) | `18px` | `24px` |
| small | `14px` | `20px` |

## Spacing

Base unit: `12px (small)`

Scale: `6px` · `12px` · `24px` · `48px` · `96px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |
| button | `18px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| small | `0 2px 4px rgba(0,0,0,0.20)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms ease-in-out` |

## Quick start (CSS)

```css
/* Grommet — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://v2.grommet.io/ */

:root {
  /* Color */
  --grommet-brand: #7d4cdb; /* Primary brand and actions */
  --grommet-text: #444444; /* Primary text */
  --grommet-white: #ffffff; /* Surfaces */
  --grommet-light-2: #f2f2f2; /* Subtle background */
  --grommet-border: #cccccc; /* Borders */
  --grommet-status-critical: #ff4040; /* Errors */
  --grommet-status-ok: #00c781; /* Success */
  --grommet-status-warning: #ffaa15; /* Warnings */
  --grommet-neutral-3: #00739d; /* Secondary accent */

  /* Typography */
  --font-body: Metric, Arial, sans-serif;

  /* Type scale */
  --text-xxlarge: 34px /* line-height 40px */;
  --text-xlarge: 26px /* line-height 32px */;
  --text-large: 22px /* line-height 28px */;
  --text-medium-body-: 18px /* line-height 24px */;
  --text-small: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 24px;
  --space-4: 48px;
  --space-5: 96px;

  /* Radius */
  --radius-default: 4px;
  --radius-button: 18px;

  /* Elevation */
  --shadow-small: 0 2px 4px rgba(0,0,0,0.20);

  /* Motion */
  --motion-default: 200ms ease-in-out;
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Grommet by Hewlett Packard Enterprise — React-based framework providing accessibility, modularity, responsiveness, and theming. Character: HPE-born friendliness: big 18px body type, rounded 18px buttons, vivid status hues, and accessibility folded in from day one. Use a primary colour near #7d4cdb, the typeface "Metric / system" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 12px (small) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Grommet documentation](https://v2.grommet.io/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/grommet) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._