# Brands

Aquex and USWDS, applied to the same Subscription list and detail. Change the brand or theme to see the difference.

Generated from @oods/foundry 0.10.2

## Same screens. Your brand.

Aquex is this site's neutral palette with a teal accent. USWDS brings blue controls, grey and navy surfaces, and Public Sans.

[Subscription list screen generated by OODS Foundry in React](https://oods-foundry.com/brands/screens/aquex-list-react)

React app · sample records Maturity: beta `sha256:1a4469913d0d…` [Open full size: Subscription list screen generated by OODS Foundry in React](https://oods-foundry.com/brands/screens/aquex-list-react)

Vue app · sample records Maturity: beta `sha256:b952f0e283b5…` [Open full size: Subscription list screen generated by OODS Foundry in Vue](https://oods-foundry.com/brands/screens/aquex-list-vue)

React app · sample records Maturity: beta `sha256:dde1d1ded91c…` [Open full size: Subscription detail screen generated by OODS Foundry in React](https://oods-foundry.com/brands/screens/aquex-detail-react)

Vue app · sample records Maturity: beta `sha256:5f818219f92b…` [Open full size: Subscription detail screen generated by OODS Foundry in Vue](https://oods-foundry.com/brands/screens/aquex-detail-vue)

What `design_compose` reported for every screen here:

- `OODS-V121` Object 'Subscription' has maturity 'beta' — composed output may change.
- `OODS-V117` Subscription refines 11 fields its traits define, and its own definitions are used: lifecycle/Stateful (status); lifecycle/Cancellable (cancel_at_period_end, cancellation_reason, cancellation_requested_at); financial/Billable (amount, currency, billing_interval, current_period_start, current_period_end, current_period_progress, next_payment_due_at).

The receipt and calls for the Subscription list apps, in React and Vue

### React receipt

#### Checked

- schema-structure
- component-registry
- state-contract
- target-readiness
- normalization-fidelity
- binding-contract
- props-contract
- slots-contract
- events-contract
- dependency-closure

#### Not checked

- fallback-policy
- rendered-evidence
- interaction-evidence
- accessibility-evidence
- theme-evidence
- determinism-evidence
- performance-evidence
- certification-evidence

### Vue receipt

#### Checked

- schema-structure
- component-registry
- state-contract
- target-readiness
- normalization-fidelity
- binding-contract
- props-contract
- slots-contract
- events-contract
- dependency-closure

#### Not checked

- fallback-policy
- rendered-evidence
- interaction-evidence
- accessibility-evidence
- theme-evidence
- determinism-evidence
- performance-evidence
- certification-evidence

3 calls, as the pipeline sent them

```
design_compose {
  "object": "Subscription",
  "context": "list",
  "preferences": {
    "brand": "Aquex",
    "theme": "light"
  }
}

code_generate {
  "schemaRef": "compose-1ccf1a69",
  "framework": "react",
  "profile": "build",
  "options": {
    "output": "application",
    "brand": "Aquex",
    "theme": "light",
    "payloadMode": "file"
  }
}

code_generate {
  "schemaRef": "compose-1ccf1a69",
  "framework": "vue",
  "profile": "build",
  "options": {
    "output": "application",
    "brand": "Aquex",
    "theme": "light",
    "payloadMode": "file"
  }
}
```

The React app's content hash: `sha256:1a4469913d0d7e8a40c141b1eeb6f439096cf3521c687b20becc05d18ce44294`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, main.tsx, oods-brand-aquex.css

The Vue app's content hash: `sha256:b952f0e283b5d5ea4a8ad98b10992e2f01e0aaec2c17c176d70f5be30caa2855`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, main.ts, oods-brand-aquex.css

The receipt and calls for the Subscription detail apps, in React and Vue

### React receipt

#### Checked

- schema-structure
- component-registry
- state-contract
- target-readiness
- normalization-fidelity
- binding-contract
- props-contract
- slots-contract
- events-contract
- dependency-closure

#### Not checked

- fallback-policy
- rendered-evidence
- interaction-evidence
- accessibility-evidence
- theme-evidence
- determinism-evidence
- performance-evidence
- certification-evidence

### Vue receipt

#### Checked

- schema-structure
- component-registry
- state-contract
- target-readiness
- normalization-fidelity
- binding-contract
- props-contract
- slots-contract
- events-contract
- dependency-closure

#### Not checked

- fallback-policy
- rendered-evidence
- interaction-evidence
- accessibility-evidence
- theme-evidence
- determinism-evidence
- performance-evidence
- certification-evidence

3 calls, as the pipeline sent them

```
design_compose {
  "object": "Subscription",
  "context": "detail",
  "preferences": {
    "brand": "Aquex",
    "theme": "light"
  }
}

code_generate {
  "schemaRef": "compose-c0e926c8",
  "framework": "react",
  "profile": "build",
  "options": {
    "output": "application",
    "brand": "Aquex",
    "theme": "light",
    "payloadMode": "file"
  }
}

code_generate {
  "schemaRef": "compose-c0e926c8",
  "framework": "vue",
  "profile": "build",
  "options": {
    "output": "application",
    "brand": "Aquex",
    "theme": "light",
    "payloadMode": "file"
  }
}
```

The React app's content hash: `sha256:dde1d1ded91c3a9f489ea363826a798de88c849366ffc8cdc0c9ec38dbcabf21`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, charts/, main.tsx, oods-brand-aquex.css

The Vue app's content hash: `sha256:5f818219f92bbe3a0267ea4a82d419b7b7ffc0e71f4940004d165adc3b77b33f`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, charts/, main.ts, oods-brand-aquex.css

Canvas colours set the background; panel colours set the cards and subtle areas. Controls and charts have their own colour roles. Each brand carries light, dark and high-contrast values.

## The values and the checks

USWDS colours come from its [published theme tokens](https://designsystem.digital.gov/design-tokens/color/theme-tokens/), checked against a recorded site scan. We mapped them into OODS Foundry's roles. The dark and high-contrast views are our adaptations; unmapped roles retain the OODS starting values. These screens use OODS components.

Aquex: documents, contrast and calls

- light

  84 of 84 pairs pass; 7 of 7 chart colours clear

- dark

  84 of 84 pairs pass; 7 of 7 chart colours clear

- high contrast

  83 of 83 pairs pass; 1 pair is exempt; 7 of 7 chart colours clear. System colours graded as resolved in Chromium 141.0.7390.37 without forced colours (macOS and Linux, light and dark color-scheme), 2026-09-29

[Full brand documents](https://oods-foundry.com/brands/record/Aquex/documents.json) · [Full contrast report](https://oods-foundry.com/brands/record/Aquex/contrast.json)

- [brand_create: template](https://oods-foundry.com/brands/record/calls/01-Aquex-template.json)
- [brand_create: validate](https://oods-foundry.com/brands/record/calls/02-Aquex-validate.json)
- [brand_create: create](https://oods-foundry.com/brands/record/calls/03-Aquex-create.json)
- list, react: [sample app](https://oods-foundry.com/brands/record/Aquex/Subscription/list/react/src/App.tsx) · [generated screen](https://oods-foundry.com/brands/record/Aquex/Subscription/list/react/src/GeneratedUI.tsx) · [generation record](https://oods-foundry.com/brands/record/calls/05-Subscription-list-react.json)
- list, vue: [sample app](https://oods-foundry.com/brands/record/Aquex/Subscription/list/vue/src/App.vue) · [generated screen](https://oods-foundry.com/brands/record/Aquex/Subscription/list/vue/src/GeneratedUI.vue) · [generation record](https://oods-foundry.com/brands/record/calls/06-Subscription-list-vue.json)
- detail, react: [sample app](https://oods-foundry.com/brands/record/Aquex/Subscription/detail/react/src/App.tsx) · [generated screen](https://oods-foundry.com/brands/record/Aquex/Subscription/detail/react/src/GeneratedUI.tsx) · [generation record](https://oods-foundry.com/brands/record/calls/08-Subscription-detail-react.json)
- detail, vue: [sample app](https://oods-foundry.com/brands/record/Aquex/Subscription/detail/vue/src/App.vue) · [generated screen](https://oods-foundry.com/brands/record/Aquex/Subscription/detail/vue/src/GeneratedUI.vue) · [generation record](https://oods-foundry.com/brands/record/calls/09-Subscription-detail-vue.json)

USWDS: documents, contrast and calls

- light

  84 of 84 pairs pass; 7 of 7 chart colours clear

- dark

  84 of 84 pairs pass; 7 of 7 chart colours clear

- high contrast

  83 of 83 pairs pass; 1 pair is exempt; 7 of 7 chart colours clear. System colours graded as resolved in Chromium 141.0.7390.37 without forced colours (macOS and Linux, light and dark color-scheme), 2026-09-29

[Full brand documents](https://oods-foundry.com/brands/record/USWDS/documents.json) · [Full contrast report](https://oods-foundry.com/brands/record/USWDS/contrast.json)

- [brand_create: template](https://oods-foundry.com/brands/record/calls/10-USWDS-template.json)
- [brand_create: validate](https://oods-foundry.com/brands/record/calls/11-USWDS-validate.json)
- [brand_create: create](https://oods-foundry.com/brands/record/calls/12-USWDS-create.json)
- list, react: [sample app](https://oods-foundry.com/brands/record/USWDS/Subscription/list/react/src/App.tsx) · [generated screen](https://oods-foundry.com/brands/record/USWDS/Subscription/list/react/src/GeneratedUI.tsx) · [generation record](https://oods-foundry.com/brands/record/calls/14-Subscription-list-react.json)
- list, vue: [sample app](https://oods-foundry.com/brands/record/USWDS/Subscription/list/vue/src/App.vue) · [generated screen](https://oods-foundry.com/brands/record/USWDS/Subscription/list/vue/src/GeneratedUI.vue) · [generation record](https://oods-foundry.com/brands/record/calls/15-Subscription-list-vue.json)
- detail, react: [sample app](https://oods-foundry.com/brands/record/USWDS/Subscription/detail/react/src/App.tsx) · [generated screen](https://oods-foundry.com/brands/record/USWDS/Subscription/detail/react/src/GeneratedUI.tsx) · [generation record](https://oods-foundry.com/brands/record/calls/17-Subscription-detail-react.json)
- detail, vue: [sample app](https://oods-foundry.com/brands/record/USWDS/Subscription/detail/vue/src/App.vue) · [generated screen](https://oods-foundry.com/brands/record/USWDS/Subscription/detail/vue/src/GeneratedUI.vue) · [generation record](https://oods-foundry.com/brands/record/calls/18-Subscription-detail-vue.json)

[USWDS source values and role mapping](https://oods-foundry.com/brands/record/uswds-source.json) · [Every recorded file and its hash](https://oods-foundry.com/brands/record/manifest.json)

The contrast report checks colour pairs. Each generated app's receipt separately lists what was built and checked.

Shipped brands and the Aquex recipe

## The shipped brands

OODS Foundry ships 2 brands, each in light, dark and high contrast. You can make your own from a recipe, or from your own colour values.

Brands A and B in each theme, as their components render.

### Brand A

Ships with OODS Foundry. Neutral first: the primary action takes the neutral (near-black in light), with grey structure, an indigo accent and Geist. Its charts lead with indigo.

Brand A in the light theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

Brand A in the dark theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

Brand A in the high contrast theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

### Brand B

Ships with OODS Foundry. Brand A's neutral, with a violet primary and DM Sans. Its charts lead with violet.

Brand B in the light theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

Brand B in the dark theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

Brand B in the high contrast theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

## Make your own

This site's brand, Aquex, was made this way from a neutral recipe with aquex.ai's teal as its one accent, with the published OODS Foundry. Each step shows its real call.

Harbor is the example team brand in the package's quickstart, made the same way from the quickstart's colour values. [The system overview](https://oods-foundry.com/system#contexts) shows the quickstart's Warehouse in it.

1. **Template.** `brand_create` lists every slot, with what it's for and a starting value from a shipped brand or a preset. Or give it a recipe: the neutral's hue and tint, the accent's hue, which of them is the primary action, the corner radius and the font. It returns the whole brand the recipe gives, graded.

   This site's call, with its recipe

   ```
   {
     "action": "template",
     "from": {
       "recipe": {
         "neutralHue": 250,
         "neutralChroma": 0.008,
         "accentHue": 183,
         "primary": "neutral",
         "radius": 8,
         "font": "DM Sans"
       }
     }
   }
   ```

   It returned each theme's slots and the presets:

   ```
   {
     "slots": {
       "base": 103,
       "dark": 96,
       "hc": 96
     },
     "presets": [
       "corporate-blue",
       "dark-minimal",
       "startup-warm"
     ]
   }
   ```

2. **Validate.** It checks every slot and colour, the contrast of every text, icon, control border and focus ring pair, and that the chart colours reach 3:1 against the canvas, in each theme. It writes nothing.

   This site's call, with its recipe

   ```
   {
     "action": "validate",
     "brand_id": "Aquex",
     "recipe": {
       "neutralHue": 250,
       "neutralChroma": 0.008,
       "accentHue": 183,
       "primary": "neutral",
       "radius": 8,
       "font": "DM Sans"
     }
   }
   ```

   Its report:

   ```
   {
     "action": "validate",
     "valid": true,
     "brand_id": "Aquex",
     "themes": {
       "base": {
         "label": "light",
         "slots": 103,
         "provided": 103
       },
       "dark": {
         "label": "dark",
         "slots": 96,
         "provided": 96
       },
       "hc": {
         "label": "high contrast",
         "slots": 96,
         "provided": 96
       }
     },
     "issues": [],
     "contrast": {
       "base": {
         "graded": 84,
         "passed": 84,
         "failed": 0,
         "ungraded": 0,
         "charts": {
           "graded": 7,
           "passed": 7,
           "failed": 0,
           "ungraded": 0
         }
       },
       "dark": {
         "graded": 84,
         "passed": 84,
         "failed": 0,
         "ungraded": 0,
         "charts": {
           "graded": 7,
           "passed": 7,
           "failed": 0,
           "ungraded": 0
         }
       },
       "hc": {
         "graded": 83,
         "passed": 83,
         "failed": 0,
         "ungraded": 0,
         "systemColoursResolvedIn": "Chromium 141.0.7390.37 without forced colours (macOS and Linux, light and dark color-scheme), 2026-09-29",
         "exempt": 1,
         "charts": {
           "graded": 7,
           "passed": 7,
           "failed": 0,
           "ungraded": 0
         }
       }
     },
     "files": [
       {
         "theme": "base",
         "path": "Aquex/base.json",
         "sha256": "fd02a715ec0811ae19fc0c845092e104eb6269933a9a708a0aec98117e59607f",
         "bytes": 32539
       },
       {
         "theme": "dark",
         "path": "Aquex/dark.json",
         "sha256": "d16368b455b291d2ba5d839e75a964a542e9fb23aa72cbe465dbdc9be749a212",
         "bytes": 30976
       },
       {
         "theme": "hc",
         "path": "Aquex/hc.json",
         "sha256": "81b4883cc956a429a9829eb072c4502ac0021bbd3c460194b987fbadfccdc4fd",
         "bytes": 19759
       }
     ]
   }
   ```

3. **Create.** It writes the brand to your brands folder and builds it. Previews, generated apps, charts and dashboards can use it at once.

   This site's call

   ```
   {
     "action": "create",
     "brand_id": "Aquex",
     "recipe": {
       "neutralHue": 250,
       "neutralChroma": 0.008,
       "accentHue": 183,
       "primary": "neutral",
       "radius": 8,
       "font": "DM Sans"
     }
   }
   ```

   Its result:

   ```
   {
     "created": true,
     "brand_id": "Aquex",
     "folder": "~/.oods-foundry/brands",
     "build": {
       "exitCode": 0,
       "durationMs": 13126
     },
     "brands": [
       "A",
       "Aquex",
       "B"
     ]
   }
   ```

### This site's contrast report

What `validate` reported for Aquex:

- light

  84 of 84 pairs pass; 7 of 7 chart colours clear 3:1

- dark

  84 of 84 pairs pass; 7 of 7 chart colours clear 3:1

- high contrast

  83 of 83 pairs pass; 1 pair is exempt; 7 of 7 chart colours clear 3:1. System colours graded as resolved in Chromium 141.0.7390.37 without forced colours (macOS and Linux, light and dark color-scheme), 2026-09-29

Aquex in the light theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

Aquex in the dark theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

Aquex in the high contrast theme

Button, intent primary

Button

Banner

**Payment failed**

Update the card

StatusBadge

Past Due

Input

Email

Use a work address

Enter a valid email

Card

Account summary

Tabs

**Overview**

Summary

### Limits

- A brand is OODS Foundry's own slots, 103 in light, 96 in dark and 96 in high contrast, filled from a recipe or by you.
- A recipe fills the slots without your own token names. Your team's DTCG token file keeps the names, aliases and modes it supports once you accept the draft: [Keep your token names](https://oods-foundry.com/guides/brands#keep-your-token-names).
- The shipped brands can't be edited from npm.