---
version: alpha
name: Araxxe Pattern Library
description: 'Design tokens of the Araxxe Pattern Library (telecom revenue-assurance web apps). All component CSS classes are prefixed araxxe-; component catalog: {DOMAIN}/ai/components-index.md'
colors:
  gold: '#b0971c'
  goldLighter: '#d6c261'
  goldFaded40: '#b0971c66'
  goldFaded60: '#b0971c99'
  accent: '#0078ca'
  accentLight: '#0097ff'
  error: '#ff0000'
  danger: '#ed5565'
  warning: '#fea962'
  success: '#48cfad'
  valid: '#a0d468'
  atRisk: '#feee5d'
  background: '#f8f7f5'
  shade0: '#000000'
  shade5: '#1d1d1d'
  shade10: '#23232a'
  shade20: '#3c3c3b'
  shade30: '#3a3c4d'
  shade35: '#4c4e5c'
  shade40: '#636771'
  shade50: '#808491'
  shade50Faded: '#80849140'
  shade75: '#bfbfbf'
  shade85: '#dadada'
  shade95: '#f8f8f9'
  shade100: '#ffffff'
  shade100Faded: '#ffffff80'
  shadow: '#50629129'
  graph1: '#b0971c'
  graph2: '#d6c261'
  graph3: '#0078ca'
  graph4: '#808491'
  graph5: '#3a3c4d'
  graph6: '#0097ff'
  graph7: '#ed5565'
  graph8: '#48cfad'
  graph9: '#1d1d1d'
  graph10: '#f9d7da'
  serviceEbv: '#3366cc'
  serviceA2psms: '#31af97'
  serviceSimbox: '#dd3a6e'
  serviceCtq: '#7030a0'
  serviceQos: '#7030a0'
  ott: '#7360f2'
typography:
  caption:
    fontFamily: 'Roboto, sans-serif'
    fontSize: 12px
    lineHeight: 16px
  bodySmall:
    fontFamily: 'Roboto, sans-serif'
    fontSize: 13px
    lineHeight: 19.5px
  body:
    fontFamily: 'Roboto, sans-serif'
    fontSize: 14px
  subheading:
    fontFamily: 'Roboto, sans-serif'
    fontSize: 16px
    lineHeight: 24px
  heading:
    fontFamily: 'Roboto, sans-serif'
    fontSize: 24px
    lineHeight: 36px
  display:
    fontFamily: 'Roboto, sans-serif'
    fontSize: 26px
    lineHeight: 32px
rounded:
  sm: 3px
  lg: 8px
spacing:
  '8': 8px
  '10': 10px
  '15': 15px
  '30': 30px
  '70': 70px
components:
  button:
    backgroundColor: '{colors.goldLighter}'
    textColor: '{colors.shade100}'
    rounded: '{rounded.lg}'
    padding: '0 10px'
    height: 44px
  inputText:
    backgroundColor: '{colors.shade100}'
    textColor: '{colors.shade30}'
    rounded: '{rounded.sm}'
    padding: '8px 15px'
    width: '100%'
  inputSelect:
    backgroundColor: '{colors.shade100}'
    textColor: '{colors.shade30}'
    rounded: '{rounded.sm}'
    padding: '8px 15px'
    width: '100%'
  badge:
    rounded: 12px
    padding: '0 10px'
    height: 24px
  card:
    backgroundColor: '{colors.shade100}'
    rounded: '{rounded.lg}'
    padding: '20px 25px'
  modal:
    backgroundColor: '{colors.shade100}'
    rounded: '{rounded.lg}'
    padding: '0'
  toast:
    backgroundColor: '{colors.shade100}'
    rounded: 10px
    padding: '13px 20px'
  tooltip:
    textColor: '{colors.shade100}'
    rounded: '{rounded.sm}'
    padding: '3px 6px'
---

<!-- GENERATED by scripts/generate-ai-docs.mjs - do not edit by hand. Prose: docs/ai/design-template.md. Regenerate with: npm run ai-docs. Source digest: sha256:528dec4229b050f64cfc42296b07e751b9f8808ecec021f9cd927e686ce97f13 -->

# Araxxe Pattern Library

<!-- Hand-written prose lives in docs/ai/design-template.md; token values and tables are
injected by scripts/generate-ai-docs.mjs. Edit the template, then run: npm run ai-docs -->

## Overview

The Araxxe design system styles the web applications of Araxxe, a company providing
telecom revenue-assurance and interconnect-fraud-detection services. The applications are
information-dense B2B dashboards: tables, charts, forms and monitoring views.

The visual identity is built on a **gold brand color** (`#b0971c`, lightened `#d6c261`)
over light, warm-grey surfaces (`#f8f7f5` page background), with **Roboto** as the
primary typeface at a compact **14px base size**. Semantic status colors (danger,
warning, valid, at-risk) carry meaning consistently across all products, and each Araxxe
service line (EBV, A2P SMS, SIM-box, CTQ/QoS) has its own accent color used in charts and
service-scoped views.

The single integration surface is CSS: consuming apps load `tikui.css` from the
pattern-library host and compose the documented `araxxe-*` classes. The complete
component usage reference (classes, modifiers, markup examples) lives in the component
catalog: `{DOMAIN}/ai/components-index.md`. This file documents the identity layer:
tokens and the rules for applying them.

## Colors

Gold is reserved for primary actions, active states and brand highlights. Neutral text
and surfaces use the shade ramp (0 = black … 100 = white); body text sits at `shade5` on
`shade100`/`background` surfaces. Status colors are semantic - use them only for their
meaning, never decoratively. Graph colors are a fixed categorical palette for charts;
service colors identify Araxxe product lines.

| Token         | Value       | Source SCSS variable                        |
| ------------- | ----------- | ------------------------------------------- |
| gold          | `#b0971c`   | `$araxxe-global-color-gold`                 |
| goldLighter   | `#d6c261`   | `$araxxe-global-color-gold-lighter`         |
| goldFaded40   | `#b0971c66` | `$araxxe-global-color-gold-40`              |
| goldFaded60   | `#b0971c99` | `$araxxe-global-color-gold-60`              |
| accent        | `#0078ca`   | `$araxxe-global-text-color-accent`          |
| accentLight   | `#0097ff`   | `$araxxe-global-fill-color-accent-light`    |
| error         | `#ff0000`   | `$araxxe-global-text-color-error`           |
| danger        | `#ed5565`   | `$araxxe-global-text-color-danger`          |
| warning       | `#fea962`   | `$araxxe-global-text-color-warning`         |
| success       | `#48cfad`   | `$araxxe-global-text-color-success`         |
| valid         | `#a0d468`   | `$araxxe-global-text-color-valid`           |
| atRisk        | `#feee5d`   | `$araxxe-global-text-color-at-risk`         |
| background    | `#f8f7f5`   | `$araxxe-global-fill-color-background`      |
| shade0        | `#000000`   | `$araxxe-global-text-color-shade-0`         |
| shade5        | `#1d1d1d`   | `$araxxe-global-text-color-shade-5`         |
| shade10       | `#23232a`   | `$araxxe-global-fill-color-shade-10`        |
| shade20       | `#3c3c3b`   | `$araxxe-global-text-color-shade-20`        |
| shade30       | `#3a3c4d`   | `$araxxe-global-text-color-shade-30`        |
| shade35       | `#4c4e5c`   | `$araxxe-global-text-color-shade-35`        |
| shade40       | `#636771`   | `$araxxe-global-text-color-shade-40`        |
| shade50       | `#808491`   | `$araxxe-global-text-color-shade-50`        |
| shade50Faded  | `#80849140` | `$araxxe-global-text-color-shade-50-faded`  |
| shade75       | `#bfbfbf`   | `$araxxe-global-text-color-shade-75`        |
| shade85       | `#dadada`   | `$araxxe-global-text-color-shade-85`        |
| shade95       | `#f8f8f9`   | `$araxxe-global-text-color-shade-95`        |
| shade100      | `#ffffff`   | `$araxxe-global-text-color-shade-100`       |
| shade100Faded | `#ffffff80` | `$araxxe-global-text-color-shade-100-faded` |
| shadow        | `#50629129` | `$araxxe-global-fill-color-shadow`          |
| graph1        | `#b0971c`   | `$araxxe-global-fill-color-graph-1`         |
| graph2        | `#d6c261`   | `$araxxe-global-fill-color-graph-2`         |
| graph3        | `#0078ca`   | `$araxxe-global-fill-color-graph-3`         |
| graph4        | `#808491`   | `$araxxe-global-fill-color-graph-4`         |
| graph5        | `#3a3c4d`   | `$araxxe-global-fill-color-graph-5`         |
| graph6        | `#0097ff`   | `$araxxe-global-fill-color-graph-6`         |
| graph7        | `#ed5565`   | `$araxxe-global-fill-color-graph-7`         |
| graph8        | `#48cfad`   | `$araxxe-global-fill-color-graph-8`         |
| graph9        | `#1d1d1d`   | `$araxxe-global-fill-color-graph-9`         |
| graph10       | `#f9d7da`   | `$araxxe-global-fill-color-graph-10`        |
| serviceEbv    | `#3366cc`   | `$araxxe-global-color-service-ebv`          |
| serviceA2psms | `#31af97`   | `$araxxe-global-color-service-a2psms`       |
| serviceSimbox | `#dd3a6e`   | `$araxxe-global-color-service-simbox`       |
| serviceCtq    | `#7030a0`   | `$araxxe-global-color-service-ctq`          |
| serviceQos    | `#7030a0`   | `$araxxe-global-color-service-qos`          |
| ott           | `#7360f2`   | `$araxxe-global-fill-color-ott`             |

Domain-specific chart palette - **Matching** (not exported as front-matter tokens):

| Key         | Value     | Source SCSS variable                        |
| ----------- | --------- | ------------------------------------------- |
| billed      | `#b0971c` | `$araxxe-global-color-matching-billed`      |
| rated       | `#3366cc` | `$araxxe-global-color-matching-rated`       |
| interco     | `#31af97` | `$araxxe-global-color-matching-interco`     |
| reversement | `#7030a0` | `$araxxe-global-color-matching-reversement` |

Domain-specific chart palette - **A2P SMS network roles** (not exported as front-matter tokens):

| Key | Value     | Source SCSS variable              |
| --- | --------- | --------------------------------- |
| o   | `#d6c261` | `$araxxe-global-a2psms-color-o`   |
| olo | `#ed7f21` | `$araxxe-global-a2psms-color-olo` |
| oio | `#5877dd` | `$araxxe-global-a2psms-color-oio` |
| gt  | `#e74577` | `$araxxe-global-a2psms-color-gt`  |
| wl  | `#808491` | `$araxxe-global-a2psms-color-wl`  |

Domain-specific chart palette - **SIM-box network roles** (not exported as front-matter tokens):

| Key | Value     | Source SCSS variable              |
| --- | --------- | --------------------------------- |
| o   | `#d6c261` | `$araxxe-global-simbox-color-o`   |
| olo | `#ed7f21` | `$araxxe-global-simbox-color-olo` |
| oio | `#5877dd` | `$araxxe-global-simbox-color-oio` |
| ozo | `#dd3a6e` | `$araxxe-global-simbox-color-ozo` |

## Typography

Roboto (300/400/700, with italics) is the primary typeface for all UI text. Titillium Web
(300/400/600) is the secondary typeface, used sparingly for display/branding accents.
Font sizes are authored in `rem` against the 14px root size; the resolved pixel values
are listed below.

| Level      | Font               | Size | Line height |
| ---------- | ------------------ | ---- | ----------- |
| caption    | Roboto, sans-serif | 12px | 16px        |
| bodySmall  | Roboto, sans-serif | 13px | 19.5px      |
| body       | Roboto, sans-serif | 14px | -           |
| subheading | Roboto, sans-serif | 16px | 24px        |
| heading    | Roboto, sans-serif | 24px | 36px        |
| display    | Roboto, sans-serif | 26px | 32px        |

Weights loaded: Roboto 300/400/700 (+ italics), Titillium Web 300/400/600 (+ italics).

## Layout

Pages are centered at a fixed content width, with a fixed-height application header.
Spacing inside components uses the quark padding steps; there is deliberately no free
per-pixel spacing scale.

- Page content width: 1170px (wide variant: 1600px)
- Application header height: 70px
- Chat modal width: 480px
- Padding steps: 8px / 10px / 15px / 30px / 70px (quark classes `-s/-v/-h<n>`)
- Fixed sizes, widths, heights and line-heights come from the quark scales - see `{DOMAIN}/ai/quarks.md`

## Elevation & Depth

Elevation is minimal: one soft ambient shadow, used for cards, popovers and floating
surfaces. Prefer flat surfaces separated by background tone over stacked shadows.

- Ambient shadow (quark `q-shadow`, class `-shadow` where offered): `box-shadow: 0 0 10px 0 #50629129;`
- Drop-shadow variant (quark `q-drop-shadow`): `filter: drop-shadow(0 0 10px #50629129);`

## Shapes

Two corner radii only. The small radius is the default for inputs and compact controls;
the large radius is used by buttons and secondary input styling. No pill or circle radius
tokens - circular elements (dots, pins, icon circles) are sized square by their component
styles.

- `sm` radius: 3px - inputs, compact controls
- `lg` radius: 8px - buttons, secondary inputs

## Components

Components are implemented as CSS classes shipped in `tikui.css` and documented per
component (base class, modifiers, elements, states, markup examples) in the catalog:

- Index of all components: `{DOMAIN}/ai/components-index.md`
- Full entries: `{DOMAIN}/ai/components/atom.md`, `…/molecule.md`, `…/organism.md`, `…/template.md`
- Utility modifier classes: `{DOMAIN}/ai/quarks.md` - icon glyphs: `{DOMAIN}/ai/icons.md`

The catalog is the source of truth for component markup. The token mapping below (also in
the front matter) is a styling summary of flagship components, extracted from the
compiled stylesheet:

| Component   | backgroundColor        | textColor           | rounded        | padding     | height |
| ----------- | ---------------------- | ------------------- | -------------- | ----------- | ------ |
| button      | `{colors.goldLighter}` | `{colors.shade100}` | `{rounded.lg}` | `0 10px`    | `44px` |
| inputText   | `{colors.shade100}`    | `{colors.shade30}`  | `{rounded.sm}` | `8px 15px`  | -      |
| inputSelect | `{colors.shade100}`    | `{colors.shade30}`  | `{rounded.sm}` | `8px 15px`  | -      |
| badge       | -                      | -                   | `12px`         | `0 10px`    | `24px` |
| card        | `{colors.shade100}`    | -                   | `{rounded.lg}` | `20px 25px` | -      |
| modal       | `{colors.shade100}`    | -                   | `{rounded.lg}` | `0`         | -      |
| toast       | `{colors.shade100}`    | -                   | `10px`         | `13px 20px` | -      |
| tooltip     | -                      | `{colors.shade100}` | `{rounded.sm}` | `3px 6px`   | -      |

## Do's and Don'ts

- **Do** load `tikui.css` (and the glyph font CSS) from the pattern-library host.
  **Don't** copy, fork or re-implement its styles inside application code.
- **Do** compose `araxxe-*` block/element classes with their leading-dash modifier
  classes (`class="araxxe-button -secondary"`). **Don't** invent new `araxxe-*` class
  names, restyle existing ones, or concatenate modifiers BEM-style.
- **Do** use quark modifier classes for spacing/sizing adjustments where a component's
  entry lists them. **Don't** write inline styles or custom CSS for anything the catalog
  covers.
- **Do** use status colors by meaning (danger = destructive/error, warning = caution,
  valid/success = positive, at-risk = attention). **Don't** pick them for decoration.
- **Do** use service colors to identify the matching Araxxe service line. **Don't** mix
  service colors outside their service context.
- **Do** use the Araxxe glyph font for icons (`{DOMAIN}/ai/icons.md`). **Don't** import
  third-party icon sets.
- **Do** reference the tokens in this file if a genuinely uncovered case needs custom
  CSS. **Don't** hardcode new hex values or font sizes in application styles.