# Style Guide

The Style Guide is a built-in reference page inside OtisEd.Nimble that shows every standard UI component, messaging pattern, button style, table layout, and typographic element available in the portal. It serves as a live, interactive catalog — you can see exactly how each element looks and behaves before using or expecting it elsewhere in the application.

## Contents

* [Accessing the Style Guide](#accessing-the-style-guide)
* [Reference Tab](#reference-tab)
* [Messaging Tab](#messaging-tab)
* [Table Tab](#table-tab)
* [General Tab](#general-tab)
* [Form Tab](#form-tab)

***

## Accessing the Style Guide

The Style Guide is a page within the portal and is accessed through the standard navigation system. Navigate to the **Style Guide** entry in the application menu. The page loads with five tabs across the top — Reference, Messaging, Table, General, and Form — each covering a distinct category of UI elements.

No special permissions are required beyond normal authenticated access to the portal. The page is read-only; it cannot be edited by end users.

***

## Reference Tab

The Reference tab renders the portal's full visual stylesheet as an embedded reference document. It covers the complete color palette, typography scale, spacing system, iconography, utility classes, and base component styles that underpin every page in the portal.

Use this tab when you want to:

* See the exact colors, font sizes, and spacing values the portal uses.
* Look up icon names and their visual appearance.
* Understand the CSS utility classes available throughout the application.

The reference document is tall and scrollable. Use your browser's built-in search (Ctrl+F or Cmd+F) to locate a specific style or token quickly.

***

## Messaging Tab

The Messaging tab demonstrates every feedback and status component the portal uses to communicate information, errors, warnings, and loading states to users.

### Spinners

Three spinner sizes are shown:

| Spinner     | When it appears                           |
| ----------- | ----------------------------------------- |
| Large       | Full-page loading operations              |
| Small       | Section or panel loading states           |
| Extra Small | Inline or button-level loading indicators |

Spinners display a text message alongside the animation so users know what is loading.

### Message Banners

The portal uses a consistent banner component for in-page feedback. Nine message types are available:

| Type        | Typical use                                                |
| ----------- | ---------------------------------------------------------- |
| Primary     | Default informational call-outs                            |
| Secondary   | Neutral context or supplementary information               |
| Success     | Confirmation that an action completed successfully         |
| Danger      | Critical errors requiring immediate attention              |
| Warning     | Non-blocking caution notices                               |
| Information | General tips or notes                                      |
| Light       | Low-emphasis notices on dark backgrounds                   |
| Dark        | High-contrast notices on light backgrounds                 |
| Error       | Validation or system errors (same visual weight as Danger) |

Banners can also include an **action button** — a clickable link inside the banner that prompts users to take a next step. The Messaging tab shows an example of a Warning banner with a "Click" action to illustrate this pattern.

### Error Lists

When multiple validation errors occur at once, the portal groups them into a bulleted error list rather than stacking individual banners. The Messaging tab shows a sample list with two errors to demonstrate the layout.

***

## Table Tab

The Table tab shows the standard data grid used throughout the portal, populated with 99 rows of sample data. This lets you experience the full behavior of the table component including pagination, sorting, and column formatting.

### Column Types

The example table demonstrates four column data types:

| Column          | Format                                                 |
| --------------- | ------------------------------------------------------ |
| Text Column     | Plain text, rendered as a clickable link               |
| Integer Column  | Whole numbers, right-aligned                           |
| Decimal Column  | Numbers with decimal precision, right-aligned          |
| Currency Column | Dollar amounts with currency formatting, right-aligned |

Numeric columns display a **sub-total row** at the bottom of each visible page.

### Row Actions

Each row has two action icons on the left:

* **Edit** — opens the record for editing.
* **Delete** — removes the record.

Action icons show a tooltip when you hover over them so their purpose is always clear.

### Pagination and Sorting

The table defaults to ten rows per page with page-navigation controls at the bottom. Click any column header to sort ascending; click again to sort descending. A row-number column appears on the far left to help you track your position in the full dataset.

***

## General Tab

The General tab showcases layout and navigation primitives — the building blocks used in panels, pages, and dialogs throughout the portal.

### Links

Two link styles are shown:

* A **regular link** with hover tooltip help text.
* A **link with an icon** — the icon appears to the left of the link label.

### Headings

Six heading sizes (1 through 6) are demonstrated, from the largest page-title heading down to the smallest sub-section heading. An additional example shows a heading with an icon placed before the text, which is the style used for major page and panel titles across the portal.

### Display Text

Display text follows the same six-size scale as headings but uses a lighter weight, making it suitable for dashboard figures, key statistics, and hero-style callouts rather than structural section titles.

### Modals (Dialog Windows)

Three modal sizes are demonstrated — Small, Medium, and Large. Click any of the three buttons to open a live example of that size. Each modal includes a header, a body area, and a footer with a Close button. The overlay behind the modal dims the rest of the page while the dialog is open.

Use modals to understand what size of confirmation dialog or form window to expect when the portal asks for input or confirmation before proceeding.

***

## Form Tab

The Form tab catalogs every button style available in the portal. Buttons are the primary action controls used across all pages, and seeing all variants together helps you recognize what each color and style signals.

### Regular Buttons

Eight solid-fill button colors are shown:

| Button    | Typical meaning                              |
| --------- | -------------------------------------------- |
| Primary   | The main positive action on a form or dialog |
| Secondary | A lower-priority or alternative action       |
| Success   | Confirming or completing a positive outcome  |
| Danger    | A destructive or irreversible action         |
| Warning   | An action with a caution attached            |
| Info      | Informational or neutral action              |
| Light     | Low-emphasis action on a light background    |
| Dark      | High-emphasis action on a light background   |

### Outlined Buttons

The same eight color variants are repeated in an outlined style. Outlined buttons carry the same semantic meaning as their filled counterparts but with less visual weight — they are commonly used for secondary actions that sit alongside a primary filled button.

### Special Styles

Three additional button variants complete the set:

* **Save** — the standard button for committing form changes.
* **Cancel** — the standard button for discarding changes and closing a form.
* **With Icon Left** — a button with an icon displayed to the left of the label.
* **With Icon Right** — a button with an icon displayed to the right of the label.

Icon buttons are used throughout the portal when a visual cue reinforces the button's purpose — for example, an edit pencil icon on an Edit button.

***

> The Style Guide is a reference-only page. Nothing you click or interact with here affects any data in the portal.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nimble.docs.otised.com/guides/style-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.