---
title: "BrandDesignSystem"
description: "the brand's visual system made from its pages held whole: every value with its basis and the artefacts it was read from, and the same values in the platform's token shape"
section: concepts
address: /concepts/branddesignsystem
contract: 0476e35e6e275db5
---

# BrandDesignSystem

the brand's visual system made from its pages held whole: every value with its basis and the artefacts it was read from, and the same values in the platform's token shape

[figure: BrandDesignSystem is a definition at brand scope. The drawing shows its fields and the objects that they point at.]

| property | value |
|---|---|
| kind | definition |
| scope | brand |
| key | the brand and its version |
| store | postgres |
| family | market |



## Fields


| field | type | required | note |
|---|---|---|---|
| `brand` | `id` | yes |  |
| `website` | `address` | yes | the site the pages were captured from |
| `pages_read` | `[hash]` | yes | the captures whose documents were read whole |
| `site_tokens` | [BrandSiteToken](/concepts/brandsitetoken) | yes | the custom properties the site declares on its root |
| `colours` | [BrandColour](/concepts/brandcolour) | yes | every colour declared, with its count, and the roles |
| `modes` | `[text]` | yes | the colour modes measured: light, and dark where the site declares one |
| `faces` | [BrandFace](/concepts/brandface) | yes | the body, heading and fixed-width faces |
| `type_scale` | [BrandTypeStep](/concepts/brandtypestep) | yes |  |
| `scale_ratio` | [BrandRatio](/concepts/brandratio) | no | the ratio between consecutive sizes when the scale is modular, inferred by the named rule |
| `hierarchy` | [BrandHierarchyLevel](/concepts/brandhierarchylevel) | yes | the visual hierarchy and what makes it up: each level's size, line, weight, colour and the space below it, from the rules on the heading elements, the body and the small text |
| `spacing` | [BrandStep](/concepts/brandstep) | yes |  |
| `spacing_unit` | [BrandStep](/concepts/brandstep) | no | inferred by the named rule from the most used steps |
| `rhythm` | [BrandRhythm](/concepts/brandrhythm) | no | the vertical rhythm: the baseline and the share of vertical steps on it, inferred by the named rule |
| `radii` | [BrandStep](/concepts/brandstep) | yes |  |
| `borders` | [BrandBorder](/concepts/brandborder) | yes | every border width and style declared |
| `shadows` | [BrandShadow](/concepts/brandshadow) | yes |  |
| `gradients` | [BrandGradient](/concepts/brandgradient) | yes | every gradient declared, with its colours |
| `durations` | [BrandDuration](/concepts/brandduration) | yes | every transition and animation duration declared |
| `easings` | [BrandEasing](/concepts/brandeasing) | yes | every timing function declared |
| `keyframes` | [BrandKeyframes](/concepts/brandkeyframes) | yes | every keyframes block declared: the site's own animations |
| `breakpoints` | [BrandBreakpoint](/concepts/brandbreakpoint) | yes | every width the media queries turn on |
| `z_layers` | [BrandLayer](/concepts/brandlayer) | yes | every z-index declared: the site's stacking layers |
| `grid` | [BrandGrid](/concepts/brandgrid) | no | the layout grid: container widths, column counts and gutters |
| `icons` | [BrandIconography](/concepts/brandiconography) | no | the icon system the pages use and the sizes drawn |
| `components` | [BrandComponent](/concepts/brandcomponent) | yes | the recurring parts of the pages: a class the stylesheet styles as a surface, used on the pages, with its declarations |
| `elements` | [BrandElement](/concepts/brandelement) | yes | the brand's elements by kind: logo, icon, mark, texture, illustration, imagery, photo, shape; the held file of each where one is held |
| `assets` | [BrandAsset](/concepts/brandasset) | yes | every file the pages load that is held: images, animated images, icons, fonts and media, each by its bytes |
| `traits` | [BrandTrait](/concepts/brandtrait) | yes | the motifs read from the measured values by named rules: the palette's shape, the corners, the depth, the type, the grid, the buttons, the cards, the fields, the badges, the iconography; imagery and composition come from the rendered pass |
| `frameworks` | `[text]` | yes | the style frameworks the pages show signs of (Tailwind, Bootstrap), measured from the class names and the compiled stylesheet |
| `variants` | [BrandVariant](/concepts/brandvariant) | yes | the base and every variant: the dark mode measured or derived, the densities, the high contrast, and the media, each a sparse delta over its parent with its derivation and its rules; the resolver reads the effective system at any coordinate |
| `templates` | [BrandTemplate](/concepts/brandtemplate) | yes | the templates of every format on the base variant, derived by rule: the frames, their scaffolds and their CSS |
| `logo` | [BrandLogo](/concepts/brandlogo) | no |  |
| `gaps` | [CoverageGap](/concepts/coveragegap) | yes | what was not measured and what would measure it |
| `platform_tokens` | `json` | yes | the measured values in the DesignSystem row's token shape, generated from the typed values and nowhere else |
| `exports` | [BrandExports](/concepts/brandexports) | yes | the same values as CSS custom properties, a Tailwind theme extension, Figma variables with modes and a design-tokens (DTCG) file, generated from the typed values and nowhere else |



## Routes that use it
- [`/v1/read/brand_design_system`](/reference/read/brand_design_system) returns it
- [`/v1/act/make_brand_design_system`](/reference/act/make_brand_design_system) returns it