Common Web Components
Core headings, paragraphs, inline text, and lists.
Page kicker
Page Title
Section Title
Subheading
Lead copy gives a page or section a clear opening line.
Body copy supports standard links, strong text, emphasis, inline code, and keys.
- Plain unordered list item.
- Readable spacing without extra wrapper classes.
- First ordered step.
- Second ordered step.
Color
The palette mixes pool water with field-note warmth and status colors.
Buttons And Badges
Primary actions, secondary actions, quiet actions, destructive actions, and compact labels.
Notices
Short status messages for calculator results and validation states.
InfoSave the current operation note before switching tools.
SuccessThe operation check is ready.
WarningA required reading is missing.
DangerThe entered value must be greater than zero.
Panels And Cards
Panels frame primary page sections; cards work for repeated items.
Default panel
Primary grouped content with an aqua rail.
Warm panel
Useful for context, notes, and secondary page areas.
Sage panel
A good fit for confirmations and calm summaries.
Violet panel
A quieter alternate accent for reference content.
Chemistry check
Simple repeated item card.
No saved estimates
Saved results can appear here later.
Forms
Text fields, selects, text areas, input groups, choices, and segmented controls.
Tables
Readable tabular data with horizontal overflow on narrow screens.
| Area | Tool | Reading | Status | Next step |
|---|---|---|---|---|
| Main pool | Volume planning | 32 x 16 x 4.5 ft | Ready | Review estimate |
| Spa | Chemistry check | pH 7.2 | Attention | Target 7.4 |
| Equipment | Maintenance note | Filter pressure | Logged | Check trend |
Navigation Helpers
Breadcrumbs, tabs, link lists, and toolbars.
Dialog
Native dialog markup with a small shared script for open and close controls.