> ## Documentation Index
> Fetch the complete documentation index at: https://bkey.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Design tokens

> BMONI colours and typography — the raw material for every component.

All tokens are exported from `package:bkey_uikit/bkey_uikit.dart`.

***

## Colours

### Static palette — `BMoniColors`

Use raw palette values directly when you need a specific shade regardless of the current theme:

```dart theme={null}
Container(color: BMoniColors.brand500)
Container(color: BMoniColors.grey100)
```

The palette covers:

* **Brand** — `brand50` through `brand900`
* **Grey** — `grey50` through `grey900`
* **Semantic** — `success`, `warning`, `error`, `info` at multiple tones

### Theme-aware tokens — `context.colors`

For colour values that automatically adapt to dark / light mode, use the `BuildContext` extension:

```dart theme={null}
// Background slots
context.colors.bg.greyWhite
context.colors.bg.greySubtle
context.colors.bg.primary

// Text slots
context.colors.text.primary
context.colors.text.greyMuted
context.colors.text.successDefault
context.colors.text.errorDefault

// Border slots
context.colors.border.default_
context.colors.border.subtle
```

These semantic tokens resolve to the correct palette value for the active `BMoniTheme`.

***

## Typography — `BMoniTextStyles`

The type scale covers four levels, each with multiple weights.

### Display

```dart theme={null}
Text('Hero text', style: BMoniTextStyles.d1Bold)
Text('Hero text', style: BMoniTextStyles.d2Semibold)
```

### Headings

```dart theme={null}
Text('Section', style: BMoniTextStyles.h1Bold)
Text('Card title', style: BMoniTextStyles.h4Semibold)
Text('Label', style: BMoniTextStyles.h6Semibold)
```

### Body

```dart theme={null}
Text('Paragraph', style: BMoniTextStyles.p1Regular)
Text('Small body', style: BMoniTextStyles.p2Regular)
Text('Tiny body',  style: BMoniTextStyles.p3Regular)
```

### Label

```dart theme={null}
Text('Caption', style: BMoniTextStyles.l1Medium)
Text('Tag',     style: BMoniTextStyles.l2Regular)
```

All styles are `TextStyle` values — pass them directly to `Text.style` or extend them with `copyWith`.

***

## TextTheme integration

`BMoniTheme` wires the type scale into Flutter's `TextTheme` so you can also use the standard Material accessors:

```dart theme={null}
Theme.of(context).textTheme.titleLarge
Theme.of(context).textTheme.bodyMedium
```

When both approaches are available, prefer the `BMoniTextStyles.*` constants for explicitness.