A calm interface

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.

<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

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.

<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

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

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

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.

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.

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 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.