---
title: A calm interface
subtitle: Standard Bootstrap. Teamwright character.
kicker: UI / 02
---

# Add one stylesheet

Use Bootstrap **5.3.8** unchanged. Load Google Fonts, Bootstrap CSS, then the small Teamwright stylesheet. The overlay has no local font-file dependencies. The standard Bootstrap JavaScript bundle handles dropdowns, dialogs, and responsive navigation. No Teamwright JavaScript library, Sass build, or package manager is required.

```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="vendor/bootstrap.min.css">
<link rel="stylesheet" href="brand/teamwright.css">
<script src="vendor/bootstrap.bundle.min.js" defer></script>
```

For a Rails app, copy the Teamwright stylesheet into its existing asset setup and add the Google Fonts link to the layout. Include the official Bootstrap files once. The existing app remains responsible for its own behavior and data. Google Fonts needs network access; system-font fallbacks remain in the overlay.

Use standard Bootstrap grid, classes, and breakpoints. Named values in `teamwright.css` are ordinary CSS variables, not a separate token framework.

# Buttons and decisions

<div class="demo"><p class="demo-title">LIVE COMPONENTS / STANDARD BOOTSTRAP</p><div class="d-flex flex-wrap gap-3"><button class="btn btn-primary" type="button">Primary action</button><button class="btn btn-outline-primary" type="button">Secondary action</button><button class="btn twr-review" type="button">Review action</button><button class="btn btn-primary" type="button" disabled>Unavailable</button></div><p class="small text-body-secondary mt-3 mb-0">Styling examples. These buttons do not perform product actions.</p></div>

Use one clear primary action within a decision group. Reserve `twr-review` for review-related actions; do not turn every action orange. Describe the consequence of destructive actions in context.

```html
<button class="btn btn-primary">Create workflow</button>
<button class="btn btn-outline-primary">Cancel</button>
<button class="btn twr-review">Review draft</button>
```

# Forms that explain themselves

<div class="demo"><div class="row g-3"><div class="col-md-6"><label class="form-label" for="demo-name">Workflow name</label><input class="form-control" id="demo-name" value="Weekly customer brief" aria-describedby="demo-name-help"><div id="demo-name-help" class="form-text">Give the work a name your team will recognize.</div></div><div class="col-md-6"><label class="form-label" for="demo-reviewer">Reviewer</label><select class="form-select" id="demo-reviewer"><option>Morgan</option><option>Riley</option></select></div><div class="col-md-6"><label class="form-label" for="demo-error">Source title</label><input class="form-control is-invalid" id="demo-error" aria-invalid="true" aria-describedby="demo-error-help"><div class="invalid-feedback" id="demo-error-help">Enter a title so people can identify this source.</div></div><div class="col-md-6 d-flex align-items-center"><div class="form-check"><input class="form-check-input" type="checkbox" id="demo-check" checked><label class="form-check-label" for="demo-check">Include source references</label></div></div></div></div>

Always show labels. Use helper text for context and specific validation messages for corrections. Keep visible focus and accessible control boundaries. Standard Bootstrap classes work with the overlay.

# Navigation, dropdowns, and dialogs

<div class="demo"><ul class="nav nav-pills gap-2 mb-4" aria-label="Example navigation"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#navigation-dropdowns-and-dialogs">Overview</a></li><li class="nav-item"><a class="nav-link" href="#workflow-patterns">Workflow patterns</a></li></ul><div class="d-flex gap-3 flex-wrap"><div class="dropdown"><button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-expanded="false">Example menu</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#forms-that-explain-themselves">Form guidance</a></li><li><a class="dropdown-item" href="#tables-and-status">Table guidance</a></li></ul></div><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">Open example dialog</button></div></div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 class="modal-title fs-5 m-0" id="exampleModalLabel">Review in context</h2><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">A proposed action should identify its target and consequence before a person makes a decision. This dialog is a styling example.</div><div class="modal-footer"><button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">Close example</button></div></div></div></div>

These interactions use the official bundle and standard `data-bs-*` attributes. Preserve Bootstrap's focus management and dismissal behavior. Keep application actions separate from styling examples.

# Tables and status

<div class="demo"><div class="table-responsive"><table class="table align-middle mb-0"><thead><tr><th scope="col">Work</th><th scope="col">Actor</th><th scope="col">Status</th></tr></thead><tbody><tr><td>Customer brief</td><td>Research agent</td><td><span class="badge border text-body">◷ Needs review</span></td></tr><tr><td>Source summary</td><td>Riley</td><td><span class="badge text-bg-success">✓ Complete</span></td></tr><tr><td>Example export</td><td>Report agent</td><td><span class="badge text-bg-danger">! Failed</span></td></tr></tbody></table></div></div>

Use clear headings, readable rows, right-aligned comparable numbers, and text alongside color. “Complete” and “Approved” describe different things. Never infer approval from a green badge or the brand symbol.

<div class="alert alert-secondary" role="status"><strong>Illustrative status:</strong> Draft prepared. A reviewer has not made a decision.</div>

# Workflow patterns

Build these patterns from normal Bootstrap cards, layout utilities, text, and controls. Their behavior belongs to the application. The examples use fictional data.

<div class="row g-3"><div class="col-md-6"><div class="card h-100"><div class="card-body"><p class="twr-meta text-body-secondary">PROPOSED ACTION</p><h3 class="fs-6 mt-0">Update the customer brief</h3><p class="small">Research agent proposes replacing the summary section in the draft.</p><dl class="small"><dt>Target</dt><dd>Weekly customer brief · draft</dd><dt>Consequence</dt><dd>The draft summary changes. The proposed change does not send a message.</dd><dt>Review</dt><dd>Morgan, for this illustrative workflow</dd></dl><button class="btn twr-review btn-sm" type="button" disabled>Review proposed change</button></div></div></div><div class="col-md-6"><div class="card h-100"><div class="card-body"><p class="twr-meta text-body-secondary">OUTPUT ARTIFACT</p><h3 class="fs-6 mt-0">Weekly customer brief</h3><p class="small">Prepared by Research agent. Version 2. One open question remains.</p><p class="small"><strong>Source:</strong> Supplied customer notes<br><strong>State:</strong> Draft · needs review</p><button class="btn btn-outline-primary btn-sm" type="button" disabled>Inspect the draft</button></div></div></div></div>

**Actor attribution:** name the person, agent, or connected tool. Avatars support recognition; shapes alone cannot communicate authorship.

**Progress:** show observable steps, the current state, and where work is blocked. Avoid made-up percentages and do not present private model reasoning as an activity trail.

**Proposed action:** identify the actor, target, change, and consequence. Show a reviewer only when the actual workflow requires one. State that nothing was sent only when the application can verify it.

**Review and artifact:** show the output, sources, open questions, version, and review state. Keep the decision close to its context.

# Themes and accessibility

Set the standard Bootstrap attribute on the root element:

```html
<html data-bs-theme="light">
<html data-bs-theme="dark">
```

The consuming application controls theme selection and persistence. This guide's theme button is a small browser-only helper, not part of the CSS toolkit.

Check contrast, keyboard navigation, focus, validation messages, responsive tables, and zoom in both modes. The overlay does not make every Bootstrap color combination accessible automatically. Give errors and statuses text, not only color.

Use Fraunces through `twr-display` for selected large titles. Use `twr-meta` for compact identifiers. Dense interface headings and all controls remain Inter.