# Brand guidelines

A practical foundation for making with the Hedra brand.

## Brand foundations

Start with black and white, with a preference for dark backgrounds. A piece can stay entirely monochrome. Use color only occasionally; Coral is the first choice when a spot of color helps. Use the original logo assets and exact palette values, give the work room to breathe, and let meaningful headlines introduce their content. This toolkit covers brand and marketing work; product UI follows the product design system.

- Required rules protect the identity and must be followed.
- Recommended defaults are a confident starting point. Adapt the composition to the audience, message, and format.
- Flexible choices leave room for the audience, message, and format.
- When a decision is undocumented, treat it as an open choice. Do not present a guess as an approved brand rule.

## Applications

For a campaign, social post, or presentation, begin with the brand palette and original logo assets. For a marketing website, use the same foundations and adapt the composition to the viewport. For product UI, use the product system’s semantic surfaces, controls, and accessibility rules rather than substituting campaign colors.

- Preserve native, editable text in layouts and design files.
- Use meaningful headlines without section-label strips, category eyebrows, or chapter numbers.
- Explain the offer directly. Keep copy concrete, approachable, and concise.

## Color approach

Default to black and white, with a preference for dark backgrounds. Most pieces can stay entirely monochrome. Use small spots of color only occasionally; reach for Coral first when color helps. A colored background is not the default. Think in proportions: approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt. These describe a philosophy of restraint, not quotas for every piece.

These proportions describe the overall balance of the brand, not a quota for each piece. Think approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt. Many pieces can stay entirely monochrome. Do not add color just to use up a percentage.

## Exact palette

- Carbon: #141414 (`--color-carbon`). Preferred dark background; pair with White text and marks. Also used as ink on light grounds.
- Black: #0A0A0A (`--color-black`). Deep black background for monochrome layouts.
- White: #FFFFFF (`--color-white`). Text and marks on dark backgrounds; light background alternative.
- Stone: #F2F1ED (`--color-stone`). Neutral light background alternative.
- Coral: #FF6740 (`--color-coral`). First choice for an occasional spot of color. Optional; keep the overall composition neutral.
- Indigo: #5657FE (`--color-indigo`). Occasional background alternative; pair with a White mark; never use as text color.
- Volt: #E9FE14 (`--color-volt`). Occasional background alternative; pair with a Carbon mark; never use as text color.
- Taupe: #A79D91 (`--color-taupe`). Occasional background alternative; pair with a Carbon mark; never use as text color.
- Graphite: #333333 (`--color-graphite`). Supporting dark neutral.
- Grey 600: #525252 (`--color-grey-600`). Secondary text on light grounds.
- Grey 500: #8A8A8A (`--color-grey-500`). Supporting neutral; check contrast before using for text.
- Grey 400: #A8A6A0 (`--color-grey-400`). Supporting neutral; check contrast before using for text.
- Grey 200: #E4E2DE (`--color-grey-200`). Light rules and media wells.
- Stone Dark: #E4E2DB (`--color-stone-dark`). Supporting Stone surface.

## Approved logo pairings

- White mark on Carbon.
- White mark on Black.
- Carbon mark on White.
- Carbon mark on Coral.
- Carbon mark on Stone.
- White mark on Indigo.
- Carbon mark on Taupe.
- Carbon mark on Volt.

## Continue with your task

- [Logo rules](/logo.md)
- [Color rules](/color.md)
- [Asset catalog](/assets.json)
- [Structured rules](/rules.json)

## Agent prompt

Use https://brand.hedra.com/guidelines.md as the brand guide. Read the relevant chapter, use the exact tokens from /tokens.json, and select original assets from /assets.json. Default to black and white, with a preference for dark backgrounds. Use color only occasionally, reaching for Coral first when a spot of color helps. Think approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt as an overall philosophy, not quotas for each piece. A piece can stay entirely monochrome; do not add color to fill a percentage. Follow required rules, start from the recommended defaults, and remix the flexible choices. Preserve the logo proportions and keep all copy editable. If a decision is undocumented, say so rather than inventing a brand rule.

# Logo

Original symbol, wordmark, and lockups.

## Logo variants

The horizontal lockup is the default. Choose the stacked lockup for a square or tall composition, the wordmark when the name does the work, and the standalone mark when the context already establishes Hedra. Prefer a White logo on a Carbon background. Carbon on White or Stone is the light alternative. Colored grounds are occasional choices.

- Use Carbon assets on White or Stone. Coral, Taupe, and Volt are occasional alternatives.
- Use White assets on Carbon or Black. Indigo is an occasional alternative.
- Download an original SVG for layout and web work. Use a transparent PNG when a tool needs a bitmap.

## Logo proportions

The mark has a fixed proportion of approximately 3.46:1. Its outside blocks are square. Scale the entire asset uniformly; the grid adapts to the format, the shape does not.

- Never stretch, squash, skew, or redraw the mark.
- In a graphic crop, scale uniformly and bleed off the edge while keeping the waist in frame.
- Graphic rotations use 90° steps. Use the supplied horizontal or stacked lockup for a signature.
- Lines, pixels, and imagery may live inside the shape as a graphic treatment without warping its outline.

## Clear space

Keep the signature separate from busy imagery and surrounding text. Test it at the final output size. Leave enough clear space for it to read cleanly.

- For a brand signature, show the complete asset with an approved ground and colorway.
- Treat a cropped or repeated mark as a graphic element, not a replacement for a legible signature.

## Files

- [Exact tokens](/tokens.json)
- [Original assets](/assets.json)
- [Guidelines](/guidelines.md)

# Color

Primarily black and white. Dark backgrounds preferred. Color used occasionally.

## Primary palette

Prefer Carbon or Black backgrounds with White text and marks. White and Stone provide light alternatives. Most pieces can stay entirely neutral; a piece can feel fully Hedra without an accent color.

- Use dark backgrounds as the starting point, choosing a light ground when the content calls for it.
- Use the exact values provided here. Avoid inventing near-matching shades.
- Use semantic roles for application UI; these palette primitives do not replace a product theme.

## Color proportions

Think approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt. The exact numbers describe a philosophy of restraint. They are not a formula to apply to every composition.

- A piece can use no color at all. Never add an accent to satisfy a percentage.
- Coral is the first occasional color; Indigo is rarer, and Volt is used very sparingly.
- Judge the overall impression: the work should read as black and white, with small moments of color.

## Accent colors

Use color very occasionally. When a spot of color adds something useful, Coral is the first color to reach for. Keep the overall composition neutral. Coral is an option, not an expected feature of every piece.

- An entirely black-and-white composition is a complete expression of the brand.
- Keep colored moments small and deliberate. Do not make a colored background the default.
- Indigo, Volt, and Taupe remain available as occasional background alternatives, never as text colors.
- Pair Indigo with a White mark; pair Coral, Volt, and Taupe with a Carbon mark.
- An approved logo pairing does not automatically make every text size accessible. Check text contrast independently.

## Color approach

Default to black and white, with a preference for dark backgrounds. Most pieces can stay entirely monochrome. Use small spots of color only occasionally; reach for Coral first when color helps. A colored background is not the default. Think in proportions: approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt. These describe a philosophy of restraint, not quotas for every piece.

These proportions describe the overall balance of the brand, not a quota for each piece. Think approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt. Many pieces can stay entirely monochrome. Do not add color just to use up a percentage.

## Exact palette

- Carbon: #141414 (`--color-carbon`). Preferred dark background; pair with White text and marks. Also used as ink on light grounds.
- Black: #0A0A0A (`--color-black`). Deep black background for monochrome layouts.
- White: #FFFFFF (`--color-white`). Text and marks on dark backgrounds; light background alternative.
- Stone: #F2F1ED (`--color-stone`). Neutral light background alternative.
- Coral: #FF6740 (`--color-coral`). First choice for an occasional spot of color. Optional; keep the overall composition neutral.
- Indigo: #5657FE (`--color-indigo`). Occasional background alternative; pair with a White mark; never use as text color.
- Volt: #E9FE14 (`--color-volt`). Occasional background alternative; pair with a Carbon mark; never use as text color.
- Taupe: #A79D91 (`--color-taupe`). Occasional background alternative; pair with a Carbon mark; never use as text color.
- Graphite: #333333 (`--color-graphite`). Supporting dark neutral.
- Grey 600: #525252 (`--color-grey-600`). Secondary text on light grounds.
- Grey 500: #8A8A8A (`--color-grey-500`). Supporting neutral; check contrast before using for text.
- Grey 400: #A8A6A0 (`--color-grey-400`). Supporting neutral; check contrast before using for text.
- Grey 200: #E4E2DE (`--color-grey-200`). Light rules and media wells.
- Stone Dark: #E4E2DB (`--color-stone-dark`). Supporting Stone surface.

## Approved logo pairings

- White mark on Carbon.
- White mark on Black.
- Carbon mark on White.
- Carbon mark on Coral.
- Carbon mark on Stone.
- White mark on Indigo.
- Carbon mark on Taupe.
- Carbon mark on Volt.

## Files

- [Exact tokens](/tokens.json)
- [Original assets](/assets.json)
- [Guidelines](/guidelines.md)

## Asset catalog

{
  "version": "1.5.0",
  "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1265-2",
  "colorPolicy": {
    "defaultBackground": "carbon",
    "defaultForeground": "white",
    "colorUse": "occasional",
    "firstAccent": "coral",
    "guidance": "Default to black and white, with a preference for dark backgrounds. Most pieces can stay entirely monochrome. Use small spots of color only occasionally; reach for Coral first when color helps. A colored background is not the default. Think in proportions: approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt. These describe a philosophy of restraint, not quotas for every piece.",
    "proportions": {
      "interpretation": "philosophical",
      "scope": "overall-brand-expression",
      "guidance": "These proportions describe the overall balance of the brand, not a quota for each piece. Think approximately 95% neutrals, 3% Coral, 1.5% Indigo, and 0.5% Volt. Many pieces can stay entirely monochrome. Do not add color just to use up a percentage.",
      "shares": [
        {
          "id": "neutrals",
          "color": "carbon",
          "percent": 95
        },
        {
          "id": "coral",
          "color": "coral",
          "percent": 3
        },
        {
          "id": "indigo",
          "color": "indigo",
          "percent": 1.5
        },
        {
          "id": "volt",
          "color": "volt",
          "percent": 0.5
        }
      ]
    }
  },
  "assets": [
    {
      "id": "logo-banner-carbon",
      "name": "Horizontal lockup · Carbon",
      "format": "banner",
      "color": "carbon",
      "width": 567,
      "height": 56,
      "nodeId": "1289:234",
      "backgrounds": [
        "white",
        "stone",
        "coral",
        "taupe",
        "volt"
      ],
      "svg": "https://brand.hedra.com/assets/v1/logo-banner-carbon.svg",
      "png": "https://brand.hedra.com/assets/v1/logo-banner-carbon.png",
      "pngWidth": 2268,
      "pngHeight": 224,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-234",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    },
    {
      "id": "logo-banner-white",
      "name": "Horizontal lockup · White",
      "format": "banner",
      "color": "white",
      "width": 567,
      "height": 56,
      "nodeId": "1289:239",
      "backgrounds": [
        "carbon",
        "black",
        "indigo"
      ],
      "svg": "https://brand.hedra.com/assets/v1/logo-banner-white.svg",
      "png": "https://brand.hedra.com/assets/v1/logo-banner-white.png",
      "pngWidth": 2268,
      "pngHeight": 224,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-239",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    },
    {
      "id": "logo-stacked-carbon",
      "name": "Stacked lockup · Carbon",
      "format": "stacked",
      "color": "carbon",
      "width": 324,
      "height": 168,
      "nodeId": "1289:253",
      "backgrounds": [
        "white",
        "stone",
        "coral",
        "taupe",
        "volt"
      ],
      "svg": "https://brand.hedra.com/assets/v1/logo-stacked-carbon.svg",
      "png": "https://brand.hedra.com/assets/v1/logo-stacked-carbon.png",
      "pngWidth": 1296,
      "pngHeight": 672,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-253",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    },
    {
      "id": "logo-stacked-white",
      "name": "Stacked lockup · White",
      "format": "stacked",
      "color": "white",
      "width": 324,
      "height": 168,
      "nodeId": "1289:258",
      "backgrounds": [
        "carbon",
        "black",
        "indigo"
      ],
      "svg": "https://brand.hedra.com/assets/v1/logo-stacked-white.svg",
      "png": "https://brand.hedra.com/assets/v1/logo-stacked-white.png",
      "pngWidth": 1296,
      "pngHeight": 672,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-258",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    },
    {
      "id": "wordmark-carbon",
      "name": "Wordmark · Carbon",
      "format": "wordmark",
      "color": "carbon",
      "width": 648,
      "height": 96,
      "nodeId": "1289:272",
      "backgrounds": [
        "white",
        "stone",
        "coral",
        "taupe",
        "volt"
      ],
      "svg": "https://brand.hedra.com/assets/v1/wordmark-carbon.svg",
      "png": "https://brand.hedra.com/assets/v1/wordmark-carbon.png",
      "pngWidth": 2592,
      "pngHeight": 384,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-272",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    },
    {
      "id": "wordmark-white",
      "name": "Wordmark · White",
      "format": "wordmark",
      "color": "white",
      "width": 648,
      "height": 96,
      "nodeId": "1289:277",
      "backgrounds": [
        "carbon",
        "black",
        "indigo"
      ],
      "svg": "https://brand.hedra.com/assets/v1/wordmark-white.svg",
      "png": "https://brand.hedra.com/assets/v1/wordmark-white.png",
      "pngWidth": 2592,
      "pngHeight": 384,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-277",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    },
    {
      "id": "mark-carbon",
      "name": "Mark · Carbon",
      "format": "mark",
      "color": "carbon",
      "width": 388,
      "height": 112,
      "nodeId": "1289:291",
      "backgrounds": [
        "white",
        "stone",
        "coral",
        "taupe",
        "volt"
      ],
      "svg": "https://brand.hedra.com/assets/v1/mark-carbon.svg",
      "png": "https://brand.hedra.com/assets/v1/mark-carbon.png",
      "pngWidth": 1552,
      "pngHeight": 448,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-291",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    },
    {
      "id": "mark-white",
      "name": "Mark · White",
      "format": "mark",
      "color": "white",
      "width": 388,
      "height": 112,
      "nodeId": "1289:296",
      "backgrounds": [
        "carbon",
        "black",
        "indigo"
      ],
      "svg": "https://brand.hedra.com/assets/v1/mark-white.svg",
      "png": "https://brand.hedra.com/assets/v1/mark-white.png",
      "pngWidth": 1552,
      "pngHeight": 448,
      "source": "https://www.figma.com/design/wem5VlFje6HzFgrPrXes4p/Brand-Foundations?node-id=1289-296",
      "usage": "Preserve the original aspect ratio. Use an approved background. Use the full asset as a signature; graphic crops are separate treatments."
    }
  ]
}