INTERNAL · QA HARNESS
Visual calibration harness for LAGO typography weight and button geometry. Compares the current system against controlled alternatives. No production components or tokens are modified. For human design review only — no verdict.
The full approved LAGO typography scale — font size, line height, and weight for each semantic token. These are the current documented values, shown as a baseline reference. No values are changed here.
| Token | Size | Line Height | Weight | Specimen |
|---|---|---|---|---|
| Display | 48px | 56px | 700 | The quick brown fox |
| H1 | 36px | 44px | 700 | The quick brown fox |
| H2 | 28px | 36px | 700 | The quick brown fox |
| H3 | 22px | 30px | 700 | The quick brown fox |
| H4 | 18px | 26px | 600 | The quick brown fox |
| H5 | 16px | 24px | 600 | The quick brown fox |
| H6 | 14px | 20px | 600 | The quick brown fox |
| Body Large | 16px | 26px | 400 | The quick brown fox |
| Body | 14px | 22px | 400 | The quick brown fox |
| Body Small | 13px | 20px | 400 | The quick brown fox |
| Label | 14px | 20px | 600 | The quick brown fox |
| Label Small | 12px | 18px | 600 | The quick brown fox |
| Caption | 12px | 18px | 500 | The quick brown fox |
| Overline | 11px | 16px | 700 | The quick brown fox |
| Button | 14px | 20px | 500 | |
| Button Compact | 13px | 18px | 500 | |
| Button Large | 14px | 20px | 500 |
Side-by-side comparison of the current 600 button weight against three lighter alternatives. All use the actual production DS-001 Button — alternatives are applied via preview-only className overrides (font-weight + font-size). No production component is modified.
Small: 13px / 600 · Medium: 14px / 600 · Large: 16px / 600
Small: 13px / 500 · Medium: 14px / 500 · Large: 16px / 500
Small: 14px / 500 · Medium: 14px / 500 · Large: 16px / 500
Small: 13px / 500 · Medium: 14px / 500 · Large: 14px / 500
Current uniform 12px radius vs proportional 8px / 10px / 12px radius. The smaller the button, the more its radius affects perceived geometry. All use the actual production DS-001 Button — alternatives are applied via preview-only className overrides.
Small: 32px / 12px · Medium: 40px / 12px · Large: 48px / 12px
Small: 32px / 8px · Medium: 40px / 10px · Large: 48px / 12px
Typography + radius displayed together so visual hierarchy can be compared directly. Same variant, labels, icon treatment, and surrounding background isolate typography and geometry as the only variables.
13/600 + 12px · 14/600 + 12px · 16/600 + 12px
13/500 + 8px · 14/500 + 10px · 16/500 + 12px
A realistic LAGO UI specimen using actual production components — navigation, page header, tabs, form, content card, table, status, modal, and buttons. This evaluates the typography SYSTEM in context, not only isolated specimens.
Manage your water experiences, availability, and bookings.
This is the customer-facing name of your experience.
Price must be greater than zero.
| Experience | Guests | Status |
|---|---|---|
| Sunset Pontoon Cruise | 8 | Confirmed |
| Half-Day Fishing Charter | 4 | Pending |
| Kayak Rental — Half Day | 2 | Completed |
The same contextual specimen shown twice: left uses current documented weights (600 for labels, buttons, headings, status); right uses a lighter exploration (font-semibold → 500) via a preview-only scoped style override. No production component is modified — the override is applied at the wrapper level.
View and manage all customer bookings.
Enter the primary contact for this booking.
View and manage all customer bookings.
Enter the primary contact for this booking.
An observation tool showing where each weight is currently used across UI roles. This is not a prescription — it documents the current system for review. No canonical values are assigned here.
| UI Role | Current Token | Weight | Visual Observation |
|---|---|---|---|
| Button | Button / Button Compact / Button Large | 600 | High-emphasis action control. Visually heavy — anchors the eye. |
| Body | Body / Body Large | 400 | Reading text. Light, unobtrusive. |
| Body Small | Body Small | 400 | Secondary reading text, metadata. Light. |
| Label | Label | 600 | Form labels, field headings. Semantically demanding — may feel heavy. |
| Label Small | Label Small | 600 | Table headers, compact labels. Dense at 12px/600. |
| Metadata | Body Small | 400 | Card metadata, supporting info. Appropriately light. |
| Navigation | Body / Label | 600 | Nav items. Active state uses weight + colour. May be heavy at 600. |
| Heading (H1–H3) | Display / H1 / H2 / H3 | 700 | Page-level hierarchy. Heaviest weight — anchors structure. |
| Sub-heading (H4–H6) | H4 / H5 / H6 | 600 | Section/card titles. Medium-heavy. May feel dense in lists. |
| Status Badge | Label Small / Caption | 600 | Status indicators. Weight reinforces urgency. May be heavy for neutral states. |
| Table Header | Label Small | 600 | Column headers, uppercase. Dense at 12px/600. |
| Caption | Caption | 500 | Timestamps, fine print. Medium-light — already reduced. |
| Overline | Overline | 700 | Section labels, eyebrows. Heaviest at smallest size — high impact. |
Buttons shown at desktop, tablet, and mobile widths. The smaller the button, the more its radius affects perceived geometry. Check text wrapping, icon alignment, button height, horizontal padding, visual weight, and action grouping.
Calibration harness v1.0 · Montserrat · LAGO design system · No production changes · For visual review only