OWLS Design System

Bootstrap-convention 50-950 scale. Used for text, backgrounds, borders, UI chrome. Preserves the cool blue undertone of the OWLS heading color.

Bootstrap-convention 50-950 scale. Used for brand accent, header, highlights, CTAs. 500 is the base OWLS secondary color.

Bootstrap-convention 50-950 scale. Near-triadic pairing (118°) with the coral accent. Used for functional UI — primary CTAs (indigo-700), focus rings (indigo-500 @ 20% alpha), links, and cool-tone neutrals. The mid-tones dip slightly in saturation (39–42%) for a "professional / grown up" feel; the dark end spikes to 70–100% saturation to give navy shades weight. Blue appears ~5-8% darker in measured L% than coral at matching steps — this compensates for the Helmholtz-Kohlrausch perceptual brightness bias so the two scales feel tonally balanced.

Transcript: "when we hover over a field, the label of the field, it pops up with information about that field". Add data-help="…" to any .owls-field-label and hovering it reveals the help text as a dark tooltip above the label. Use for per-field guidance that's too long for a visible placeholder.

Hover either label to see the tooltip.

Transcript: "field has highlighted the label as highlighted red. And when you hover over it, it gives you what the error". Add .has-error + data-error="…" to the .owls-field-group wrapper. The label text turns red; hovering it shows the error message as a red tooltip. The input itself gets the existing .is-invalid class for the red border.

Hover either red label to see the error message.

Full-width charcoal bar (48px tall). Logo + welcome text on the left, muted-gray action buttons on the right. The logo is OWL + a coral <span class="owls-logo-accent">S</span>. Header buttons use .owls-btn-header (default muted icon) with optional data-icon-color variants, and .owls-btn-header-danger for the log-out variant that turns coral on hover.

The primary CTA is .btn-owls-primary (indigo). Use it for serious brand actions — "Generate Policy", "Save", "Commit", "Sign In". Orange (.btn-owls-action) is the legacy bright-action color, kept for compatibility; prefer indigo for new work. Green is reserved for Search/Confirm. Blue is used sparingly for Info. Danger is red.

Transcript: "certain sections of the screen you can search just using the fields in there… like this one here is a client information search". The pattern is a section-scoped search that queries only the fields inside one form section, not the whole screen. Place the green search button (from above) as a right-aligned action row at the top of the .owls-section-card-body (see §9 Section Card). No new component needed.

Native <select> is kept as the accessible baseline. Use the styled .owls-dropdown component when visual polish matters (sparingly — filter rows, modals, form fields where brand consistency is visible).

Transcript: "autocompletes filter based on what you're typing". Unlike .owls-dropdown[data-searchable] (which opens on click), autocomplete opens as the user types and highlights matching substrings. Use for long free-form lists like brokers, policyholders, and product codes.

Text input with calendar icon is the collapsed state. Click opens the .owls-calendar popover. The calendar is also usable inline (no input) for schedulers and range pickers.

Standard <input type="password"> wrapped with an optional show/hide toggle. Click the eye icon to reveal the value.

Static text in a field layout — used for computed values, descriptions, and informational rows. Transcript: "a field that displays text".

White-pill-on-gray-track pattern for field-level selectors. Active option lifts with shadow. Use for mutually exclusive choices within a form.

Fixed 30px height, coral outline selection. No size change on toggle. Used for multi-select options like additional covers.

Dashed-border card for search-first entry flows. Contains icon, title, description, and CTA button.

Label/value list for fee breakdowns. Total row emphasized with background and larger font.

The dominant pattern for grouping related fields on a hero screen. White header bar with a coral Fluent icon on the left, title in the middle, animated +/- toggle on the right. Click anywhere on the header to collapse/expand. Section-level actions (Client Information Search, Add, Export, etc.) live inside the body as the first row — NOT in the header.

Click either header to toggle collapse/expand. The +/- control is two CSS spans — the horizontal line is always visible (the minus), the vertical line rotates 90° and fades out when expanded, leaving just the minus; when collapsed it rotates back to 0° and appears, forming a plus.

Transcript: "different cards for each of the sections to say, that's my selection… essentially radio button groups, but as cards". Click a card to select it. Keyboard accessible: Tab to focus, Space/Enter to select.

Transcript: "this pop up or overlay… just indicating what the system is currently doing". Full-page busy indicator with a spinner and a status message. Shown during long-running operations (search, KYC lookup, policy generation). Closes automatically when the operation completes — no dismiss control.

Transcript: "when I click search it now then shows me all the valid options that I can select from. I double click that and it loads down to the bottom screen". The distinctive OWLS search pattern: click a Search button → panel opens with filter input + results list → double-click a result → panel closes and the detail loads into the underlying screen.