---
name: teamwright-ui
description: Customize Teamwright web pages and app views using standard Bootstrap 5, Google Fonts, and the minimal Teamwright CSS overlay.
---

# Teamwright UI

Use these instructions directly. No toolkit download or companion skill is required. Teamwright brings people, AI agents, and connected tools together to turn requests into usable results. Design for clear actors, visible progress, source access, and controllable decisions.

## Load the essentials

Keep Bootstrap 5.3.8 CSS/JavaScript standard. Load Google Fonts, Bootstrap CSS, then Teamwright CSS. In an existing app, use its asset conventions and include Bootstrap only once. No Sass build, custom Bootstrap wrapper, Python, or Node.js is needed for this styling.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@72,400;72,600&amp;family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap">
<link rel="stylesheet" href="https://brand.teamwright.io/vendor/bootstrap.min.css">
<link rel="stylesheet" href="https://brand.teamwright.io/brand/teamwright.css">
<script src="https://brand.teamwright.io/vendor/bootstrap.bundle.min.js" defer></script>
```

The CSS can also be downloaded as one file into application assets; it has no local font-file dependencies. Google Fonts needs network access; retain system-font fallbacks. Documentation-site CSS/JavaScript are not UI dependencies.

## Typography, color, and layout

Use Inter for controls, body, tables, and dense headings. `.twr-display` selects Fraunces for a few expressive titles; `.twr-meta` selects JetBrains Mono for compact metadata. Body 16px; dense text 14–16px. Use sentence case and readable line lengths.

Spruce #1F5B4D leads, Paper #F5F0E6 is the light canvas, Ink #1C2220 is text, Sage #CBD8CF supports, and Kiln #D9622B is sparse decoration. Use theme-aware `--twr-*` variables: `--twr-action`, `--twr-text`, `--twr-muted`, `--twr-surface`, `--twr-border`, and `--twr-control-border`. Avoid hardcoded light-theme colors in components. Kiln is unsuitable for small text on Paper or Ink; `.btn.twr-review` supplies a contrasting review action.

Use normal Bootstrap markup, grid, utilities, breakpoints, and components. Spacing rhythm 4/8/12/16/24/32/48/64px; controls 8px radius, cards 12px. Favor quiet borders and clear grouping. Set `data-bs-theme="light"` or `"dark"` on the root or container; consuming apps own theme selection.

## Components and work patterns

Use `.btn-primary` for the main action, `.btn-outline-primary` for alternatives, `.form-control`/`.form-select` with real labels, `.card` for grouped work, responsive tables for records, and badges/alerts for labeled status. Dropdowns, navigation collapse, and dialogs use standard Bootstrap `data-bs-*` behavior.

Agent work shows actor name, actual execution state, sources, output artifacts, and review state when relevant. Proposed actions identify their target and consequence. Review depends on the workflow. Example copy and disabled actions below are fictional:

```html
<section class="card" aria-labelledby="draft-title">
  <div class="card-body">
    <p class="twr-meta">Research agent · Needs review</p>
    <h2 id="draft-title" class="h5">Weekly customer brief</h2>
    <p class="text-body-secondary">Draft prepared from three supplied notes. Review assigned to Morgan.</p>
    <div class="d-flex flex-wrap gap-2">
      <button class="btn twr-review" disabled>Review draft</button>
      <button class="btn btn-outline-primary" disabled>View sources</button>
    </div>
    <p class="small text-body-secondary mt-3 mb-0">Illustrative interface with fictional data.</p>
  </div>
</section>
```

Use the outlined wordmark for introductions and symbol in recognized compact contexts. Choose assets from https://brand.teamwright.io/assets.html. Never redraw/stretch the logo or turn its dot into a status indicator. Minimum widths: wordmark 120px, symbol 16px. Allow one stem width of clear space; reversed marks belong on dark backgrounds.

Application behavior belongs to the consuming app. Describe Teamwright accurately; invent no integrations, backend behavior, outcomes, or universal approval promises.

## Check and deliver

Check light/dark modes, narrow screens, zoom, keyboard focus, form labels/errors, dropdowns/dialogs, and reduced motion. Normal text needs 4.5:1 contrast; large text and essential control boundaries 3:1. Do not use color alone for meaning. Deliver HTML or application changes and disclose unavailable checks.

Use `teamwright-brand` if broader messaging or brand decisions are needed. Optional visual examples: https://brand.teamwright.io/ui.html.