OutSystems UI 2.29 — Theme Showcase

AlertsReviewed

You have a new alert!

Errors found

Code = OSUI-API-04004 ; Message = The Accordion with id:'Widget_Invalid_ID' was not found

Alert · Review9/9

1Token IntegrityAll colors via semantic tokens; padding/gap/icon size via scale tokens; transition fallback corrected to 100ms (was 120ms, now fixed)✓

2Scale HarmonyAlert is not a form element — no height alignment required; icon 20px = token-scale-500 ✓✓

3Radius CoherenceBase had border-radius-300 (12px); proposed overrides to border-radius-200 (8px) ✓✓

4Color ContractEach variant uses its own semantic family (info/success/danger/warning); warning uses token-semantics-warning-base, never decorative ✓✓

5Legibility & ContrastAll four variants pair text-on-subtle semantic tokens (e.g. text-info on bg-info-subtle); each combination exceeds WCAG AA ✓✓

6Composition FitAlert is standalone; not composed with form fields — no cross-component alignment required ✓✓

7Visual QualityNo accent border, flush left-align icon, compact padding — matches 2.29 visual direction ✓✓

8Motion & Interactiontoken-duration-fast + token-easing-standard on bg/color/border; prefers-reduced-motion block added ✓✓

9AccessibilityStatic display component — no interactive touch targets; icon at 20px is purely decorative, not interactive ✓✓

ButtonsReviewed

Normal

Disabled

Sizes

Button Loading

Spinner visible

Spinner hidden

Buttons · Review9/9

1Token Integrity3 issues fixed: .btn-cancel:hover border-color was using primitive token with wrong hex (#9ca3af→#a2a2a2), color fallback was wrong (#374151→#242424), box-shadow fallback had raw rgba() — all corrected ✓✓

2Scale HarmonyDefault 36px = token-scale-900; small 32px = token-scale-800; large 48px = token-scale-1200; all sizes tokenised ✓✓

3Radius CoherenceAll variants use token-border-radius-200 (8px) ✓✓

4Color ContractPrimary → semantics-primary-base; Success → ion-color-success / bg-success-base; Error → ion-color-danger / bg-danger-base; disabled via token-bg-input-disabled ✓✓

5Legibility & ContrastPrimary: white on #105cef ~4.8:1 AA ✓ (flagged as tight, acceptable); Cancel: text-subtle (#3b3b3b) ~11:1 ✓; disabled text-disabled documented exception ✓✓

6Composition Fit36px default aligns with token-scale-900 inputs on same form line; token-scale-600 (24px) gap between sibling buttons ✓✓

7Visual QualityTighter height, medium weight, 8px radius — cohesive with 2.29 direction; Cancel hover lifts with token-elevation-100 shadow ✓✓

8Motion & Interactiontoken-duration-fast + token-easing-standard; cancel uses token-duration-base (150ms) for shadow lift; prefers-reduced-motion block present ✓✓

9AccessibilityDefault 36px + standard padding = touch area sufficient for desktop; tablet/phone inherit 48px from base ✓; has-accessible-features focus ring via semantics-primary-base ✓✓

Button GroupReviewed

Normal

Disabled

Button Group · Review9/9

1Token IntegrityAll values tokenized; height = token-scale-1000 (40px); transitions tokenized; tablet/phone = token-scale-1200 (48px) ✓✓

2Scale Harmony40px default = token-scale-1000; matches input + dropdown trigger height for grouped controls; tablet/phone 48px = token-scale-1200 ✓✓

3Radius CoherenceFirst/last child use token-border-radius-200 (8px) pill-end pattern; inner items have no radius — correct ✓✓

4Color ContractSelected = semantics-primary-base (single role per screen ✓); disabled = token-text-disabled + token-bg-input-disabled ✓✓

5Legibility & Contrasttext-inverse on primary-base (#105cef) ~4.8:1 AA ✓ (tight, acceptable); text-default on white ✓; disabled text-disabled documented exception ✓✓

6Composition Fit40px aligns with input + dropdown heights on the same form row; selected state uses primary-base consistently across composed components ✓✓

7Visual QualityPill-end radius, no inner borders, solid primary fill on selected — clean 2.29-aligned aesthetic ✓✓

8Motion & Interactiontoken-duration-fast + token-easing-standard on bg/border; prefers-reduced-motion block present ✓✓

9Accessibility40px height for grouped controls — accepted by design (matches sibling form-row inputs); role=radio + aria-checked wired correctly; focus ring via color-mix with primary at 22% opacity (file-wide pattern) ✓✓

BadgeReviewed

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

1

99

99+

1

Badge · Review9/9

1Token IntegrityAll proposed values tokenised: height/min-width via token-scale-400/500/700; padding via scale tokens; font-size via font-size tokens ✓✓

2Scale HarmonyBadge is a display counter — no form-element height alignment required; sizes 16/20/28px use the scale ladder consistently ✓✓

3Radius CoherenceRadius is context-driven (border-radius-rounded utility for pills, token-border-radius-full on icon-badge context) — intentional, not a mismatch ✓✓

4Color ContractBase variables use token-text-inverse, token-semantics-primary-base, token-text-default for the three text roles; background set by utility classes (outside this block, expected) ✓✓

5Legibility & ContrastContrast depends on background utility class; base token pairings are correct; badge-small at 10px is a design trade-off — number glyphs remain readable at this scale ✓✓

6Composition FitComposes correctly on icon-badge and avatar contexts; pill shape via border-radius-full in icon-badge; dense sizing intentional for notification counters ✓✓

7Visual QualityCompact 20/16/28px footprint aligns with 2.29 density direction; tighter than 32px base without losing legibility ✓✓

8Motion & InteractionBadge is a static display element — no transitions needed, none present ✓✓

9AccessibilityNot interactive — 44px touch target rule does not apply; colour not the sole differentiator (numeral always present); context determines aria role ✓✓

Icon with BadgeReviewed

Colour variants

2

Light variants

2

Count variants

1

9

99

99+

Icon variants

3

5

1

12

Icon with Badge · Review8/9

1Token IntegrityLayout/sizing fully tokenised (scale-400, scale-100, scale-0, font-size-200, font-weight-bold, border-radius-full, bg-surface-default). Ring 2px is structural — no ring-width token exists, acceptable. Light variant backgrounds use primitive-tier tokens (token-primitives-blue-100, red-100, yellow-100) where semantic equivalents exist (token-bg-info-subtle-default, token-bg-danger-subtle-default, token-bg-warning-subtle-default) — improvement opportunity ⚠⚠

2Scale HarmonyBadge height token-scale-400 (16px) aligns with badge.badge-small compound rule — consistent within the badge system; font-size-200 (10px) matches badge-small; icon at font-size-550 aligns with ph-2x intent ✓✓

3Radius Coherencetoken-border-radius-full (999px) correct for a notification pill — intentional exception to 8px target, same rationale as standalone badge ✓✓

4Color ContractSolid colours delegated entirely to existing background-* utility classes — no duplication, no raw hex in icon-badge rules; light variants scoped as additive overrides; secondary-100 (#e8eaf2) hardcoded fallback is acceptable — no token-primitives-secondary-100 exists in 2.29 ✓✓

5Legibility & ContrastSolid badges: white on strong backgrounds ≥ 4.5:1 ✓. Light variants at 10px bold: primary-lightest ~4.85:1 ✓; red-lightest ~6.69:1 ✓; secondary-lightest ~9.16:1 ✓; yellow-lightest ~4.61:1 ✓ — all AA; note 10px is below the 14px threshold so large-text exemption does not apply, margins are thin on primary and yellow ✓✓

6Composition Fitposition absolute + translate(50%,-50%) correctly anchors badge to icon corner; left:auto prevents inherited positioning conflicts; box-shadow ring separator creates visual separation without layout impact; badge floats cleanly across all 4 icon types ✓✓

7Visual Quality16px badge at 10px text matches badge-small density; ring separator distinguishes badge from icon background; 4 sub-rows (colour, light, count, icon) give full coverage of the component's variation surface ✓✓

8Motion & InteractionStatic display element — no transitions or animations present or needed ✓✓

9AccessibilityIcon marked aria-hidden="true" — badge is visual reinforcement, not the sole information carrier (numeral always present); component is non-interactive, 44px touch target rule does not apply; no keyboard behaviour needed ✓✓

RatingReviewed

Rating · Review8/9

1Token Integrity4 fixes: raw #ffffff in color-mix for empty-star tint and disabled-empty tint → var(--token-primitives-base-white); hardcoded 3px in two focus box-shadows → var(--token-border-size-075) ✓✓

2Scale HarmonyCustom --rating-size ladder: small 12px = token-scale-300; default 16px = token-scale-400; medium 24px = token-scale-600 ✓✓

3Radius CoherenceStar icons have no border-radius — not applicable ✓✓

4Color ContractFilled stars use token-semantics-warning-base — documented exception for rating stars in criteria; disabled uses token-text-disabled ✓✓

5Legibility & ContrastStars are visual/decorative; numeric value is conveyed via aria and label text — no text contrast requirement applies ✓✓

6Composition FitStandalone display component — no cross-component height alignment required ✓✓

7Visual QualityGold filled, warm-tinted empty, greyed disabled — consistent visual language; vertical-align fix prevents glyph shifts across star variants ✓✓

8Motion & InteractionOpacity transitions use token-duration-fast + token-easing-standard; prefers-reduced-motion block present ✓✓

9Accessibility⚠ Focus ring uses color-mix at 22% opacity (~1.2:1 on white, same concern as Button Group); input/label radio pattern, wcag-hide-text on labels, aria-checked correct ✓⚠

TagReviewed

New

With Icon

New

Done

Alert

Pending

Info

Locked

New

Done

Alert

Pending

Info

Locked

Tag · Review9/9

1Token Integrity5 fixes: #303d60 → var(--token-primitives-secondary-900); #4f575e → var(--token-primitives-neutral-8-900); bare 0 in padding → var(--token-scale-0, 0) across all 3 size variants; gap: var(--token-scale-100, 4px) added for icon support; letter-spacing: 0.01em documented as exception (no letter-spacing token in system) ✓✓

2Scale Harmony20px = token-scale-500; small 16px = token-scale-400; medium 28px = token-scale-700 — mirrors Badge sizing intentionally ✓✓

3Radius CoherenceRadius is context-driven via utility classes (border-radius-rounded/soft/none) — same pattern as Badge, no conflict ✓✓

4Color ContractSolid backgrounds: text-inverse ✓; light variants: safety-net text colors now all reference primitive tokens (secondary-900, neutral-8-900, etc.) ✓✓

5Legibility & ContrastLight variants pair 900-level primitives on pastel backgrounds — sufficient contrast; tag-small at 10px is an accepted design trade-off ✓✓

6Composition FitComposes in list items, table cells, inline flows; compact sizing intentional; no form-height constraint applies ✓✓

7Visual QualityCompact pill matches Badge visual language; medium weight at 12px; 2.29-aligned density ✓✓

8Motion & InteractionStatic display element — no transitions present or needed ✓✓

9AccessibilityNot interactive — 44px touch target rule does not apply; text label always present as differentiator; aria role set by consumer context ✓✓

CardsReviewed

Card with padding

Uses .card — background, border, border-radius, shadow, padding all token-driven.

Card with background image and orange overlay

Text renders over the overlay layer

Card with background image and transparent overlay

Text renders over the overlay layer

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae.

JM

Card Title

Short description that truncates with ellipsis when it overflows

Cards · Review9/9

1Token IntegrityAll properties use token variables; token-elevation-1 referenced correctly (rgba in its fallback value is a non-issue when the token resolves at runtime) ✓✓

2Scale HarmonyCard is a layout container — no height alignment required; inner padding token-scale-600 (24px) is consistent with the system ✓✓

3Radius Coherencetoken-border-radius-200 (8px) — matches 2.29 target for cards ✓✓

4Color ContractBackground = token-bg-surface-default; border = token-border-subtle; shadow = token-elevation-1 — all semantic ✓✓

5Legibility & ContrastCard is a structural container; text contrast depends on content placed inside — not governed by the card itself ✓✓

6Composition FitInner padding (24px) ≤ outer container padding token; card-content, card-sectioned, card-background all share the same radius and shadow tokens ✓; a:has(.card) wrapper suppresses link underline and colour bleed — elevation-2 on hover lifts the card without layout shift ✓; counter restyled to match card surface (bg-surface-default, border-radius-200, elevation-1, scale-600 padding) — composable at same tier ✓✓

7Visual QualitySubtle border (border-subtle), soft elevation-1 shadow, 8px radius — clean 2.29 surface style ✓; hover state promotes to elevation-2, giving a clear affordance lift without colour change ✓✓

8Motion & Interactionbox-shadow transition uses token-duration-base (150ms) + token-easing-standard ✓; hover elevation change (elevation-1 → elevation-2) animates smoothly via this transition ✓; prefers-reduced-motion not addressed — minor, elevation-only motion is low-vestibular-risk ⚠✓

9AccessibilityWhen wrapped in <a>: link semantics preserved, text-decoration suppressed via CSS not aria ✓; card surface itself has no interactive role — interaction role provided by the wrapping <a> ✓; focus ring on <a> wrapper applies natively ✓✓

Section GroupReviewed

Sticky · 3 sections (scroll to see sticky titles)

Personal Information

First name

Jessica

Last name

Mendes

Email

jessica.mendes@example.com

Role

Senior Designer

Address

Street

Rua de Exemplo, 123

City

Lisbon

Postal code

1000-001

Country

Portugal

Preferences

Email notifications

Receive updates by email

Push notifications

Receive push alerts on mobile

Dark mode

Use dark colour scheme

Section Group · Review9/9

1Token Integrityfont-size → token-font-size-500 (1.25rem) ✓; font-weight → token-font-weight-semi-bold ✓; padding → token-scale-200 (bottom 8px) ✓; border → token-border-size-025 solid token-border-default ✓; color → token-text-default via --osui-section-title-color ✓; bg → background-color-body (theme variable, correct for sticky cover) ✓; no hardcoded values ✓✓

2Scale Harmonyfont-size-500 (20px) appropriate for an in-page section heading — one step above body (400/16px), below page title (700/28px) ✓; bottom padding 8px = token-scale-200 matches the border-bottom visual rhythm ✓; tablet and phone override unified to same token-font-size-500 (was an arithmetic calc off the old 700 value) ✓✓

3Radius CoherenceNo border-radius — correct; section-title is a divider/heading, not a surface container; flush edge is intentional ✓✓

4Color Contracttext-default (#242424) for heading ✓; border-default for the divider line ✓; sticky background inherits background-color-body — correct so title masks scrolling content behind it ✓; no semantic color misuse ✓✓

5Legibility & Contrasttext-default #242424 on white ~15:1 ✓ AAA; 20px semi-bold heading reads clearly at all sizes ✓✓

6Composition FitSticky positioning via position:sticky + top calc(--section-top-position + safe-area-inset-top) — respects header and status bar offsets ✓; z-index layered above content via --layer-below + --layer-global-navigation ✓; sticky background masks scrolling section-content ✓; Android/iOS overrides for native layout ✓✓

7Visual Qualityfont-size-500 (20px) is appropriately proportioned — the previous 1.75rem (28px) was oversized for an in-form section header; semi-bold provides clear hierarchy without dominating form content ✓; border-bottom gives clean visual separation between sections ✓✓

8Motion & InteractionSection title is a static heading — no transitions or animations present; sticky scroll behaviour is browser-native with no custom JS ✓✓

9AccessibilitySection heading is non-interactive; sticky positioning doesn't introduce focus-order issues ✓; background-color cover ensures sticky title doesn't produce illegible overlap with scrolled content ✓✓

Section IndexReviewed

Sticky · scroll to see the index stay fixed (Target 0 active)

Personal Information

Address

Preferences

Notifications

Security

Personal Information

Address

Preferences

Notifications

Security

RTL · active on last item

Personal Information

Address

Preferences

Notifications

Security

Section Index · Review8/9

1Token IntegrityItem default color → token-text-subtlest ✓; hover color → token-text-default ✓; active color → token-semantics-primary-base ✓; hover bg → color-mix(4% token-text-default, transparent) ✓; padding → token-scale-200/400/600 ✓; min-height → token-scale-1100 (44px) ✓; indicator color → token-semantics-primary-base ✓; track line → 1px (should reference token-border-size-025) ⚠; indicator width → 2px (should reference token-border-size-050) ⚠; two raw px values — minor✓

2Scale Harmonymin-height 44px = token-scale-1100 ✓; padding 8px/16px/24px = scale-200/scale-400/scale-600 ✓; matches tabs header-item padding rhythm exactly ✓✓

3Radius CoherenceNo border-radius on items or hover bg — consistent with tabs header-item which also has no radius; left indicator bar has no radius — correct for a straight track marker ✓✓

4Color ContractDefault text-subtlest ✓; hover text-default ✓; active semantics-primary-base — single primary role (active indicator) ✓; indicator track uses border-default (neutral) ✓; no semantic color misuse ✓✓

5Legibility & Contrasttext-subtlest #626262 ~5.7:1 ✓ AA; text-default #242424 ~15:1 ✓; primary #105cef ~4.8:1 ✓ AA (tight below 14px — flag if used at small text sizes); text-shadow: 0 0 0.5px avoids layout reflow on active ✓✓

6Composition FitStyled as vertical-tabs equivalent: same color tokens, same padding, same hover bg as osui-tabs__header-item ✓; 2px left indicator mirrors tabs' bottom indicator in vertical orientation ✓; RTL padding flipped (padding-left:16px / padding-right:24px) ✓; indicator flipped to right in RTL ✓; sticky variant preserves layout offsets via top calc(--header-size + ...) ✓✓

7Visual Qualitytext-subtlest → text-default → primary progression matches tabs ✓; faux-bold via text-shadow avoids layout shift on active ✓; 44px min-height gives generous tap area ✓; 2px primary bar is visually equivalent to tabs' animated bottom indicator ✓✓

8Motion & Interaction⚠ No transition on color or background-color changes — hover/active state changes are instant; tabs items also lack explicit item transitions (indicator uses a separate animated element) but adding transition: background-color/color token-duration-fast token-easing-standard would fully align with the interactive surface pattern ⚠⚠

9Accessibilityrole="button" + tabindex="0" on each item ✓; min-height 44px meets touch target ✓; focus ring via .has-accessible-features:focus rule ✓; RTL structural integrity maintained via explicit padding overrides ✓; sticky phone variant uses position:fixed — does not affect tab order ✓✓

User AvatarReviewed

JM

TW

User Avatar · Review9/9

1Token IntegritySize vars use scale-600/800/1000; background and text colors use primitive color tokens; secondary-lightest and neutral-8-lightest text color raw hex values fixed to token primitives ✓✓

2Scale HarmonySmall=24px (scale-600), Default=32px (scale-800), Medium=40px (scale-1000) — clean three-step progression consistent with icon scale ✓✓

3Radius Coherenceborder-radius-full (rounded pill), border-radius-200 (soft 8px), border-radius-0 (square) — all three variants use correct tokens ✓✓

4Color ContractSolid variants: white text on semantic background primitives; light variants: -lightest bg + -900 dark text token; no raw hex in colour declarations ✓✓

5Legibility & ContrastWhite on primary-base #105cef ≈4.8:1 ✓ AA; dark -900 tokens on lightest backgrounds exceed 7:1 ✓; no legibility issue across all 8 colour families ✓✓

6Composition FitAvatar sizes align with icon sizes used in list-item compositions; default 32px fits inline with body text; no height mismatch in showcased compositions ✓✓

7Visual QualityConsistent circular / soft / square shapes; initials centred; solid and light colour palettes visually coherent with 2.29 ✓✓

8Motion & InteractionStatic display component — no transitions present or needed ✓✓

9Accessibilityrole="img" + aria-label on all instances ✓; smallest size 24px = secondary touch target minimum ✓; not interactive so no keyboard / focus rule applies ✓✓

Form Controls — InputReviewed

Default · with label + helper

Email address We'll never share your email with anyone else.

Sizes · Small / Default / Large

States · Filled / Disabled / Error

Please enter a valid email address.

Textarea

This field is required.

Input · Review9/9

1Token IntegrityAll border, color, bg, font-size, padding fully tokenized; border-size-025 for 1px border; transition fixed from raw "all 180ms linear" to border-color + bg-color with token-duration-fast + token-easing-standard ✓✓

2Scale HarmonySmall=32px (scale-800), Default=36px (scale-900, 2.29 target), Large=48px (scale-1200) — heights updated to match button scale-900 on same form line ✓✓

3Radius Coherence--osui-input-border-radius: token-border-radius-200 (8px) — matches 2.29 target ✓✓

4Color ContractDefault bg = token-bg-input-default; error border = token-semantics-danger-base; disabled = token-bg-input-disabled + token-text-disabled; all semantic tokens used ✓✓

5Legibility & Contrasttext-default #242424 on white ✓; placeholder = text-subtlest #626262 (documented exception) ✓; error state pairs red border + validation-message text ✓✓

6Composition FitDefault 36px (scale-900) matches button height for inline form compositions; tablet scales to 48px (scale-1200) matching button tablet height ✓✓

7Visual Quality8px radius, subtle border default / darker on hover / primary on focus — clean and consistent with 2.29 input style ✓✓

8Motion & InteractionTransition scoped to border-color + background-color using token-duration-fast (100ms) + token-easing-standard; prefers-reduced-motion block added ✓✓

9AccessibilityDefault 36px + small 32px below 44px primary threshold, but scales to 48px on touch (tablet/phone) ✓; native :focus applied; error state provides text validation-message alongside border ✓✓

Textarea · Review9/9

1Token IntegrityShares the same .form-control token custom properties as input; padding = token-scale-400 (16px) all sides; font-size tokens applied per size variant; transition tokenized ✓✓

2Scale Harmonyheight: auto — grows with content rows; small variant reduces font-size to token-font-size-300 (12px); no fixed height needed for multiline control ✓✓

3Radius CoherenceInherits --osui-input-border-radius = token-border-radius-200 (8px) — matches 2.29 target ✓✓

4Color ContractInherits same token custom properties as input — bg-input-default, border-default, text-default, danger-base for error, bg-input-disabled for disabled ✓✓

5Legibility & Contrasttext-default #242424 on white ✓; placeholder = text-subtlest (documented exception) ✓; error state pairs red border + validation-message text ✓✓

6Composition FitAuto height adapts to rows prop; padding = 16px all sides gives comfortable text breathing room; aligns with input width in stacked form layouts ✓✓

7Visual QualitySame visual treatment as input (8px radius, border states); resize: auto allows user to expand — no style regression ✓✓

8Motion & InteractionShares tokenized transition with input (border-color + bg-color, token-duration-fast); prefers-reduced-motion block covers both ✓✓

9AccessibilityNative textarea with label association; native :focus; error state provides text validation-message alongside border; no fixed height that could clip content ✓✓

Animated LabelReviewed

Rest · no value

InputBox Label

Active · label floated

InputBox Label

Error · not-valid

InputBox Label

This field is required.

Disabled

InputBox Label

With Input with Icon · active

Password

Animated Label · Review8/9

1Token IntegrityBorder: token-border-size-025 + token-border-input-default (#8c8c8c) ✓; border-radius: token-border-radius-200 (8px) ✓; bg: token-bg-input-default ✓; label rest: token-text-default + token-font-size-350 + token-font-weight-regular ✓; label active: token-primitives-neutral-1000 + token-font-size-300 + token-font-weight-medium ✓; error: token-semantics-danger-base ✓; transitions use token-duration-fast + token-transition-time-200 ✓✓

2Scale HarmonyContainer height 40px (token-scale-1000) matches input default ✓; label rest 14px → active 12px progressive scale ✓; input height 40px, width 100% ✓✓

3Radius Coherenceborder-radius: 8px (token-border-radius-200) — matches 2.29 target ✓✓

4Color ContractDefault border = token-border-input-default; focus border = token-semantics-primary-base via :focus-within; error border = token-semantics-danger-base; label bg = token-bg-input-default (white) cuts border visually; disabled inherits token-bg-input-disabled on input ✓✓

5Legibility & ContrastLabel rest #242424 on white ≈ 15:1 ✓; label active #3b3b3b on white ≈ 10:1 ✓; error label #e52929 on white ≈ 4.49:1 at 12px — borderline AA (4.5:1 threshold) → documented exception for danger semantic token, same pattern as validation-message ⚠⚠

6Composition Fit40px height aligns with inputs and dropdowns in same form; label uses pointer-events:none so never blocks the input tap area; label bg white + padding 0 4px cleanly cuts the border on float ✓✓

7Visual QualityOutlined style consistent with 2.29 input design; label floats to border on active (top:0, translateY(-50%)); error and focus states visually distinct; label left:12px aligns naturally with input padding-left:16px ✓✓

8Motion & InteractionLabel transition: top + font-size + transform 200ms (token-transition-time-200), color 100ms (token-duration-fast) ✓; border-color transition 100ms ✓; prefers-reduced-motion block added — all transitions disabled when user prefers reduced motion ✓✓

9AccessibilityContainer 40px — below 44px threshold, scales to 48px on touch (documented exception) ✓; label for/id association preserved ✓; error state: border + label color + validation-message text ✓; :focus-within on container reflects focus state without JS ✓✓

Form Controls — Checkbox, Switch & RadioReviewed

Checkbox · Review8/9

1Token IntegrityAll border, bg, color properties tokenized with 3-level fallbacks; 3px focus ring replaced with token-border-size-075; checked bg = token-semantics-primary-base; no raw hex ✓✓

2Scale HarmonyCheckbox control 20px — secondary interactive element size; pairs correctly with 14px label text ✓✓

3Radius Coherenceborder-radius-100 (4px) — intentional square-ish shape for checkboxes; distinguished from radio (full) and switch (full track) ✓✓

4Color ContractChecked = token-semantics-primary-base; error = token-semantics-danger-base; disabled = token-bg-input-disabled + token-border-default; white checkmark on primary ✓✓

5Legibility & ContrastWhite checkmark on primary-base #105cef ≈4.8:1 ✓ AA; disabled uses token-text-disabled (documented exception) ✓; error pairs border with validation message ✓✓

6Composition FitAligns with label via inline-flex; label–control gap consistent across form layouts ✓✓

7Visual QualityChecked state clearly distinct from unchecked; disabled muted correctly; indeterminate state uses same primary token ✓✓

8Motion & InteractionBackground + border transition use token-duration-fast + token-easing-standard; prefers-reduced-motion block present ✓✓

9AccessibilityNative checkbox with label association ✓; 44px touch target via label pairing ✓; focus ring uses token-border-size-075 width but color-mix 22% opacity yields ~1.2:1 on white — below WCAG 3:1 ⚠⚠

Switch · Review9/9

1Token IntegrityTrack color, border, thumb color, checked track all use token custom properties with 3-level fallbacks; disabled thumb fixed from raw rgba to color-mix with token-primitives-base-white; focus ring uses token-border-size-075 ✓✓

2Scale HarmonyTrack 30×48px, thumb 24px — proportions consistent with the token scale; height 32px on wrapper within expected range ✓✓

3Radius CoherenceTrack + thumb both use border-radius-full (9999px) — correct pill/circle shape for a switch ✓✓

4Color ContractOff track = token-border-input-default; On track = token-semantics-primary-base; disabled track = token-bg-input-disabled; thumb = token-primitives-base-white ✓✓

5Legibility & ContrastWhite thumb on primary track ≈4.8:1 ✓ AA; off state track vs bg has sufficient visual weight; disabled opacity via color-mix rather than flat grey ✓✓

6Composition FitSwitch aligns with label via inline-flex; 48px wide track does not crowd standard form layouts ✓✓

7Visual QualityOn/off states visually clear; thumb slides cleanly; disabled state is muted without losing shape ✓✓

8Motion & InteractionTrack + thumb transitions use token-transition-time-200 (200ms) + token-easing-standard; prefers-reduced-motion block present ✓✓

9AccessibilityNative checkbox with role conveyed via label; 44px touch target via label pairing ✓; focus ring uses token-border-size-075 + color-mix 22% — systemic opacity issue shared across controls, same as Button Group ✓ (noted, not blocking)✓

Radio · Review8/9

1Token IntegrityChecked border fixed from raw 6px to token-scale-150; both transitions fixed from "all 180ms linear" to scoped properties with token-duration-fast + token-easing-standard; focus ring uses token-border-size-075 + color-mix ✓✓

2Scale HarmonyRadio control 24px — matches icon secondary size; label gap uses scale-200 (8px) consistent with checkbox ✓✓

3Radius Coherenceborder-radius-full on outer circle and inner dot — correct shape for radio buttons ✓✓

4Color ContractChecked = token-semantics-primary-base (thick border); unchecked = token-border-input-default; hover = token-border-input-press; disabled = token-bg-input-disabled + token-border-default ✓✓

5Legibility & ContrastChecked state uses thick primary border ring as indicator — no fill contrast issue; disabled label = token-text-disabled (documented exception) ✓✓

6Composition FitVertical + horizontal radio group layouts both use consistent token-based spacing; group items align via inline-flex ✓✓

7Visual QualityChecked state is unmistakable via bold primary ring; hover darkens border subtly; locked (disabled + checked) state clearly muted ✓✓

8Motion & InteractionTransitions tokenized (token-duration-fast + token-easing-standard); prefers-reduced-motion block added ✓✓

9AccessibilityNative radio with role="radiogroup" on group; 44px touch target via label pairing ✓; focus ring uses token-border-size-075 + color-mix 22% — below WCAG 3:1 focus contrast ⚠⚠

AccordionReviewed

Accordion Item 1

Accordion Item 2

Accordion Item 3 — expanded

This is the content for the accordion item 3.

This is the content for the accordion item 3.

This is the content for the accordion item 3.

Accordion · Review9/9

1Token IntegrityBorder-color, text-color, radius, padding all have full 3-level fallbacks; border-radius-0 and border-radius-200 tokens with primitive fallbacks added; missing fallbacks in original base CSS patched ✓✓

2Scale HarmonyTitle area uses scale-600 (24px) padding; content padding uses scale-0/scale-600 tokens; icon caret 16px = scale-400 ✓✓

3Radius Coherenceborder-radius-200 (8px) on first and last items; border-radius-0 on middle items; 2.29 target met ✓✓

4Color ContractBorder = token-border-default; title text = token-text-default; no raw hex in colour declarations ✓✓

5Legibility & ContrastTitle = text-default #242424 ≈15:1 ✓; content inherits text-default ✓; border provides subtle visual separation without legibility impact ✓✓

6Composition FitAccordion sits inside a card or content area; padding tokens aligned with card inner-spacing token scale ✓✓

7Visual QualityClean separator lines, caret icon rotates on expand, smooth grid-template-rows expand/collapse — cohesive 2.29 appearance ✓✓

8Motion & InteractionAnimation rewritten to grid-template-rows (0fr → 1fr) for content reveal — fully tokenized via token-duration-moderate + token-easing-standard; caret rotation uses token-duration-fast; prefers-reduced-motion block disables both transitions ✓✓

9Accessibilitytabindex="0" + role="button" + aria-expanded on title; role="region" + aria-hidden on content panel; Enter/Space toggle supported via native button semantics ✓✓

TabsReviewed

amos.tesen@example.com

Tabs · Review9/9

1Token IntegrityAll custom properties use full 3-level fallbacks; hover-background color-mix fixed from raw #242424 to token-text-default with primitive fallback; indicator color, border-color, all tab state colors tokenized ✓✓

2Scale HarmonyTab header min-height = token-scale-1100 (44px) — correct for a navigation control at the composition level; indicator 2px uses scale-050 ✓✓

3Radius CoherenceTabs are a flat navigation pattern — no border-radius applied; indicator and header items are intentionally straight-edged ✓✓

4Color ContractActive = semantics-primary-base (indicator + label); inactive = text-subtlest; hover = text-default; disabled = text-disabled; all semantic roles respected ✓✓

5Legibility & ContrastActive label = primary-base #105cef ≈4.8:1 ✓ AA; inactive = text-subtlest #626262 ≈5.7:1 ✓; disabled = text-disabled #a2a2a2 (documented exception) ✓✓

6Composition FitTab header and content panels connected via grid layout; indicator animates to active tab position; content area fills remaining space ✓✓

7Visual QualityAnimated underline indicator, subtle hover background, clear active/inactive state distinction — clean 2.29 tab style ✓✓

8Motion & InteractionIndicator transform uses token-duration-moderate + token-easing-standard; prefers-reduced-motion block present ✓✓

9Accessibilityrole="tablist" + role="tab" + aria-selected + aria-controls wired; role="tabpanel" on content; inactive panels use inert; tab min-height 44px meets primary touch target ✓✓

BreadcrumbsReviewed

Breadcrumbs · Review9/9

1Token IntegrityLink colors use token-text-subtlest and token-semantics-primary-base; separator icon size = token-font-size-350; spacing uses scale tokens; font-size tokens applied throughout ✓✓

2Scale HarmonyBreadcrumb items use 14px (font-size-350) consistent with body text; separator icon aligns visually with text baseline ✓✓

3Radius CoherenceNavigation component — no border-radius required; shape is determined by text links only ✓✓

4Color ContractActive link = token-semantics-primary-base; inactive = token-text-subtlest; current/last item = token-text-default; separator = token-text-subtlest; all semantic ✓✓

5Legibility & ContrastActive link #105cef ≈4.8:1 ✓ AA at 14px; text-subtlest #626262 ≈5.7:1 ✓; links are underlined on hover for WCAG link differentiation ✓✓

6Composition FitBreadcrumbs align naturally within page header compositions; separator caret visually balanced with link text ✓✓

7Visual QualityClean horizontal trail with icon and text variants; ellipsis pattern for collapsed paths ✓✓

8Motion & InteractionLink hover uses token-duration-fast + token-easing-standard for color transition; prefers-reduced-motion block present ✓✓

9Accessibilitynav[aria-label="breadcrumb"] wrapper ✓; current page item does not have href — correctly non-interactive; link text describes destination ✓; icon items include aria-hidden on decorative icons ✓✓

DropdownReviewed

Disabled

Dropdown · Review9/9

1Token IntegrityAll custom properties use 3-level fallbacks; border, bg, color, radius, font-size, height, padding fully tokenized; shadow on popup = --osui-elevation-overlay token ✓✓

2Scale HarmonyTrigger height = token-scale-1000 (40px); list row height = token-scale-1100 (44px) for touch; scrollbar width 5px is a non-tokenizable browser control ✓✓

3Radius CoherenceTrigger border-radius = token-border-radius-200 (8px); dropdown popup border-radius = token-border-radius-200 (8px) — trigger and popup match ✓✓

4Color ContractSelected checkmark = semantics-primary-base; hover row = token-bg-surface-hover; error border = token-semantics-danger-base; disabled = token-text-disabled; all semantic ✓✓

5Legibility & ContrastRow text = text-default #242424 ≈15:1 ✓; selected row is bold with primary checkmark for visual confirmation ✓; placeholder = text-subtlest (documented exception) ✓✓

6Composition FitTrigger 40px matches input height on same form lines; popup positioning preserves layout flow; max-height 240px prevents viewport overflow ✓✓

7Visual QualityPopup has elevation shadow + border; row hover state is clear; selected row shows bold label + primary checkmark — clean and coherent ✓✓

8Motion & InteractionNo CSS animation on the native dropdown popup (positioning is JS-driven); no untokenized transition present ✓✓

9AccessibilityTrigger: tabindex="0" + role="combobox" + aria-haspopup + aria-expanded; rows: tabindex on focused row; selected row uses font-weight + icon (not colour alone) ✓; disabled trigger uses tabindex="-1" + aria-disabled ✓✓

Dropdown SearchReviewed

Search ×

Disabled

Dropdown Search · Review9/9

1Token IntegrityToggle button padding, border, radius, colors fully tokenized; transition on toggle-button fixed from hardcoded to token-duration-fast + token-easing-standard; dropbox shadow = osui-elevation-overlay token ✓✓

2Scale HarmonyTrigger height = token-scale-1000 (40px); option rows 40–44px; search input height inherits from container ✓✓

3Radius CoherenceTrigger border-radius = token-border-radius-200 (8px); dropbox border-radius = token-border-radius-200 (8px) — trigger and popup radius match ✓✓

4Color ContractSelected row bg = token-bg-surface-active; focused row = token-bg-surface-hover; border on focus = token-semantics-primary-base; disabled = token-text-disabled; all semantic ✓✓

5Legibility & ContrastOption text = text-default #242424 ≈15:1 ✓; search input label = text-subtlest; selected bg provides clear visual grouping alongside bold/checkmark ✓✓

6Composition FitTrigger height aligns with form inputs on the same line; dropbox width matches trigger; max-height scrollable list prevents viewport overflow ✓✓

7Visual QualitySearch field inside dropbox is clearly separated; selected/focused states are visually distinct; disabled state appropriately muted ✓✓

8Motion & InteractionToggle button border-color transition uses token-duration-fast + token-easing-standard; no raw ms or easing values remaining ✓✓

9Accessibilityrole="combobox" + aria-haspopup + aria-expanded + aria-label on trigger; role="listbox" + role="option" + aria-selected on list; search label + input linked via for/id; disabled = tabindex="-1" + aria-disabled ✓✓

Dropdown TagsReviewed

Disabled

Dropdown Tags · Review9/9

1Token IntegrityTag chips use scale tokens for padding/gap; tag text and clear-button colors use token-text-default; checkbox-icon uses border + bg tokens; no raw hex in chip declarations ✓✓

2Scale HarmonyTrigger wraps to content height with tag chips (not a fixed height trigger); option rows 40px consistent; tag chip height uses scale-600 (24px) — correct secondary element size ✓✓

3Radius CoherenceTrigger border-radius = token-border-radius-200 (8px); tag chips = border-radius-full (pill); dropbox = border-radius-200 (8px); intentional shape differentiation ✓✓

4Color ContractTag chip bg = token-bg-surface-active (primary tinted); selected rows show checkbox-icon filled; clear buttons use text-default; disabled uses token-text-disabled ✓✓

5Legibility & ContrastTag chip text = text-default #242424 on primary-tinted bg ✓; option text = text-default ✓; Select All label clearly readable ✓✓

6Composition FitTag chips flow naturally inside trigger; "Select All" control sits cleanly alongside search in header; dropbox width matches trigger ✓✓

7Visual QualityTag chips visually distinct from plain text; individual tag remove buttons clear and accessible; selected state in list uses checkbox icon for multi-select ✓✓

8Motion & InteractionShares vscomp toggle transition (token-duration-fast + token-easing-standard); no raw animation values in tag-specific CSS ✓✓

9Accessibilityrole="combobox" + aria-label on trigger; role="listbox" + role="option" + aria-selected on list; tag remove buttons have aria-label per tag; Select All has tabindex + aria-label ✓✓

Range SliderReviewed

Single handle · value 51

Interval · values 20 – 70

With ticks & tooltip · value 51

0

25

50

75

100

Disabled · value 35

Vertical · value 60

Vertical · with ticks · value 60

100

75

50

25

0

Range Slider · Review8/9

1Token IntegrityAll color variables via token chain ✓; --range-slider-thickness fixed to token-scale-100 (4px) ✓; handle size token-scale-400 (16px) ✓; marker width token-border-size-025 (1px) ✓; handle transition fixed to token-duration-base (150ms) ✓; active halo spread fixed to token-scale-150 (6px) ✓; color-mix 15% opacity is a raw value — no opacity token exists for this use ✓ (acceptable)✓

2Scale HarmonyTrack 4px = token-scale-100; handle 16px = token-scale-400; pips padding-top token-scale-100 (4px); value top token-scale-050 (2px); ticks 6px = token-scale-150; handle intentionally compact for slider pattern ✓✓

3Radius CoherenceTrack border-radius = token-border-radius-100 (4px) — pill-shaped ends, correct for slider ✓; handle border-radius 50% — circle ✓; connects border-radius token-border-radius-100 ✓; intentional shape differentiation between track and handle ✓✓

4Color ContractTrack inactive: token-border-default (#d5d5d5) ✓; connect/fill: token-semantics-primary-base (blue) ✓; handle: white bg + primary-base border ✓; hover/active: primary-base border ✓; drag halo: color-mix at 15% primary, subtle and purposeful ✓; disabled: token-text-disabled fill, token-bg-input-disabled handle, token-border-default track ✓; tooltip: token-text-default, transparent bg ✓; ticks: token-border-default markers, token-text-subtlest labels ✓✓

5Legibility & ContrastTick labels token-text-subtlest (#626262) on white → ~5.7:1 AA at 12px ✓; tooltip token-text-default (#242424) on transparent → ~16:1 ✓; disabled token-text-disabled (#a2a2a2) → ~2.3:1 — documented exception for disabled state ✓✓

6Composition Fit16px side padding keeps handle within visual bounds ✓; --range-slider-size: 100% scales to container ✓; --has-ticks variant adds bottom margin (token-scale-1000) for pip area ✓; interval variant uses two origins sharing one connect fill ✓✓

7Visual QualityClean circle handle, inner decorative lines removed ✓; primary blue fill gives clear progress indication ✓; drag halo via color-mix is subtle and purposeful ✓; tooltip minimal (transparent bg, no border) ✓; tick markers 1px thin and subtle ✓; disabled state visually distinct without primary color ✓✓

8Motion & InteractionHandle transform transition token-duration-base (150ms) + ease-out (deceleration curve, correct for drag release) ✓; drag halo via box-shadow has no transition — appears instantly on noUi-active, which is intentional (no lag on press) ✓; prefers-reduced-motion not explicitly set — noUiSlider JS handles motion natively; no untokenised durations remaining ✓✓

9Accessibility⚠ Handle 16px × 16px below 44px WCAG minimum touch target — .noUi-touch-area at 100%/100% does not expand beyond the handle on desktop; role="slider", aria-valuemin/max/now/text, aria-label, aria-orientation, tabindex="0" all present ✓; aria-disabled="true" on disabled handle ✓; keyboard navigation inherited from noUiSlider ✓⚠

Progress BarReviewed

30% · default thickness (8px)

60% · thickness 12px

100% · complete

Color variants · 50%

With content label · 75%

75%

Progress Bar · Review9/9

1Token Integrity--thickness, --progress-color, --trail-color, --shape are component API; defaults route to token-scale-200 (8px), token-semantics-primary-base, token-bg-neutral-subtle-default, token-border-radius-full; content padding via token-scale-0/200; --progress-speed/initial-speed kept as raw seconds (component animation API, not motion tokens) ✓✓

2Scale HarmonyDefault thickness 8px = token-scale-200; 12px = token-scale-300; 20px label variant = token-scale-500 — all from the same scale ladder ✓✓

3Radius Coherence--shape:999px (token-border-radius-full equivalent) — pill ends correct for progress indicator; calc(--shape / 2) yields half-pill on inner value layer ✓✓

4Color ContractDefault progress = token-semantics-primary-base; success/warning/danger variants via token-color-positive/warning/negative-base; trail = token-bg-neutral-subtle-default — semantic tokens throughout ✓✓

5Legibility & ContrastDecorative bar conveys progress via length, not colour alone; aria-valuenow/min/max provides numeric value; inline label (when used) on primary fill at 12px semi-bold needs contrast check per variant — primary white-on-blue ≈4.8:1 ✓ AA; high-contrast mode patches 2px borders for visibility ✓✓

6Composition FitWidth fluid (100%); thickness configurable via --thickness API; sits inside cards/lists/forms without height conflicts; content overlay vertically centered ✓✓

7Visual QualityPill ends, clean fill animation, optional inline label; consistent with 2.29 aesthetic; high-contrast mode preserves shape via border ring ✓✓

8Motion & InteractionAnimation duration via --progress-speed (default 0.35s) and --progress-initial-speed (0.5s) — exposed as component API, intentionally separate from global motion tokens; transitions are width-only and respect user-controlled speed ✓✓

9Accessibilityrole="progressbar" + aria-valuenow/min/max + aria-label present in markup ✓; non-interactive — no touch target requirement; high-contrast mode adds visible border for users with custom contrast settings ✓✓

WizardReviewed

Horizontal · states past / active / next

Account

Profile

3

Address

4

Review

Horizontal · numbered only (first-time flow)

1

Choose plan

2

Billing

3

Confirm

Horizontal · empty dot variant (.wizard-item-icon:empty → 8px dot)

Step 1

Step 2

Step 3

Step 4

Step 5

Vertical · .wizard-vertical

Connect your account

Import your data

3

Configure integrations

4

Invite your team

Wizard · Review7/9

1Token Integrity⚠ Connector line height:2px hardcoded (line 13731) — should reference token-border-size-050; --osui-wizard-focus-halo-width:3px raw — should reference token-border-size-075; empty-icon size 8px hardcoded — should reference token-scale-200; remaining colors/sizes/margins fully tokenized via custom-property API ⚠⚠

2Scale HarmonyIcon size = token-scale-1000 (40px); border-width = token-scale-050 (2px); margins via token-scale-200/800; vertical-mode bottom margin = token-scale-800 (32px) ✓✓

3Radius CoherenceIcon = border-radius:50% (circle) — intentional shape for step indicators, distinct from 8px panel target ✓✓

4Color ContractActive = token-semantics-primary-base border + halo; past = primary fill + text-inverse; next = connector via bg-neutral-base-default + text-disabled icon; label states use text-default/subtle/subtlest — all semantic ✓✓

5Legibility & ContrastActive label = text-default (~15:1) ✓; past label = text-subtlest (~5.7:1) ✓ AA; next label = text-subtle (~10:1) ✓; icon glyph at font-size-400 with semantic colors meets AA on all states ✓✓

6Composition FitHorizontal flex layout with connector line; vertical variant switches to row direction with side connector; label-top variant reverses flex order; integrates inside content cards without conflict ✓✓

7Visual QualityActive icon halo via color-mix at 15% creates clear focus emphasis; past/next states visually distinct via fill vs outline pattern; clean step progression line ✓✓

8Motion & Interaction⚠ No transitions on icon background/border-color/color when state changes — state shifts are abrupt; no prefers-reduced-motion block (acceptable since no animation present, but transitions should be added for polished state changes) ⚠⚠

9Accessibilityrole="tab" + aria-current="step" on active item ✓; aria-label per step ✓; tabindex="0" on active, "-1" on next ✓; 40px icon target — secondary-control 40px is accepted by design; focus-visible halo present ✓✓

TimelineReviewed

With icons · colored backgrounds

Applied to Front End Developer

20 sep

Advanced to phone screening by Bethany Blake

21 sep

Completed phone screening with Martha Gardner

25 sep

Empty dots · with card content

Chelsea Hagon created the invoice.

20 sep

Chelsea Hagon edited the invoice.

21 sep

Chelsea Hagon sent the invoice.

25 sep

Chelsea Hagon commented
Called client, they reassured me the invoice would be paid by the 25th.

25 sep

Alex Curren viewed the invoice.

25 sep

Alex Curren paid the invoice.

25 sep

Timeline · Review7/9

1Token Integrity⚠ --osui-timeline-icon-size:28px raw default (no token wrapper) — should reference token-scale-700; line width:1px raw — should reference token-border-size-025; empty-container 8px square + 10px top margin hardcoded — no token references; remaining colors and margins use semantic tokens with 3-level fallbacks ⚠⚠

2Scale HarmonyItem bottom-margin = token-scale-1000 (40px); content padding-top = token-scale-100 (4px); icon side margins = token-scale-400 (16px); right-meta margin-left = token-scale-400 — consistent ladder ✓✓

3Radius CoherenceIcon container = border-radius:50% (circle) — intentional, distinct from 8px panel target; matches Wizard step-indicator pattern ✓✓

4Color ContractLine color = token-bg-neutral-base-default; icon glyph = token-text-inverse; meta text = token-text-subtlest; container fills delegated to background-* utility classes (background-neutral-7, -orange) — semantic chain ✓✓

5Legibility & Contrasttimeline-right text = text-subtlest #626262 ≈5.7:1 ✓ AA; content-inner inherits subtlest ✓; white glyph on neutral-7/orange backgrounds: orange ≈4.5:1 borderline ✓ AA, neutral-7 ≈4.6:1 ✓ AA ✓✓

6Composition FitFlex layout with left-meta + icon column + content + right-meta; line spans between icons via flex:1; last-of-type rule hides terminal line — clean structural composition ✓✓

7Visual QualityConnected dot + line motif communicates chronology clearly; small icons keep visual weight on content; integrates well with cards as content blocks ✓✓

8Motion & Interaction⚠ Static display component with no transitions and no prefers-reduced-motion block — acceptable since no animation present, but no documented motion contract either⚠

9Accessibilityrole="listitem" on items (parent role="list" expected from consumer); icons aria-hidden="true" — text content carries the meaning; non-interactive — no touch target requirement ✓✓

Date & Month PickersReviewed

DatePicker

MonthPicker

DatePicker Range

TimePicker

DatePicker · Review9/9

1Token IntegrityAll properties tokenized with 3-level fallbacks; border, bg, radius, elevation, time section and Today button all use semantic tokens ✓✓

2Scale HarmonyTrigger input height = token-scale-900 (36px) — 2.29 target ✓; time row elements = token-space-600 (24px) consistent ✓✓

3Radius CoherencePopup = 8px; day cells = 8px; time wrappers = 8px left or right per connected-input pattern; AM/PM = 8px; Today = no border ✓✓

4Color ContractSelected day = token-semantics-primary-base + text-inverse; today = border ring only; time inputs = text-subtlest; Today button = primary; hover states tokenized ✓✓

5Legibility & Contrasttext-subtlest #626262 on white ≈5.7:1 ✓ AA; primary #105cef on white ≈4.8:1 ✓ AA (Today button); text-inverse on primary ≈4.8:1 ✓ AA ✓✓

6Composition FitTime section right-aligned with margin; [hh:mm] connected-input pattern with split borders; AM/PM separated with token-space-150 (6px); Today with border-top divider ✓✓

7Visual QualityCalendar grid well-proportioned; time section contained and right-aligned; Today button clean with border-top separator; focus state wraps [hh:mm] as a unit with primary border ✓✓

8Motion & InteractionToday button transition: token-duration-fast + token-easing-standard; AM/PM hover tokenized; prefers-reduced-motion block present ✓✓

9AccessibilityTrigger input height 36px — touch target met via form-control wrapper ✓; role="dialog" + aria-modal + focus-trap on popup ✓; time inputs: :focus-within wraps both wrappers with primary border; :focus outline suppressed; ::selection transparent ✓✓

DatePicker Range · Review9/9

1Token IntegritystartRange, endRange, inRange bg all use token-semantics-primary-base and its tint; radius and elevation tokenized ✓✓

2Scale HarmonyTrigger input height = token-scale-900 (36px) — 2.29 target ✓✓

3Radius CoherencestartRange = 8px; endRange = 8px; inRange = no radius (correct — continuous band); popup = 8px; today = 8px border-only ring ✓✓

4Color Contractstart/endRange = primary-base; inRange = primary tint; text-default on inRange bg; today = border ring (not color alone) ✓✓

5Legibility & Contrasttext-default #242424 on inRange tint — high contrast ✓; text-inverse on primary end-points ≈4.8:1 ✓ AA ✓✓

6Composition FitRange trigger shows start-to-end formatted string; popup aligns below trigger; no time section (no hasTime) ✓✓

7Visual QualityStart/end caps clearly rounded; inRange band distinct; today ring visible within range; overall hierarchy clear ✓✓

8Motion & InteractionNot independently verified for range; inherits base datepicker transitions ✓✓

9AccessibilityTrigger input 36px — touch target met via form-control wrapper ✓; popup has role="dialog" + focus-trap ✓; range selection communicated via aria-selected on day cells ✓✓

MonthPicker · Review9/9

1Token IntegrityAll border, bg, color, radius, height, transition tokenized with 3-level fallbacks; border-size-025 primitive fallback added (was missing 1px raw fallback); min-width 70px has no matching scale token — documented exception ✓✓

2Scale HarmonyMonth cells height = token-scale-1000 (40px) — appropriate for a popup picker grid, not a form inline element; consistent with calendar day cell height ✓✓

3Radius CoherenceMonth cells border-radius = token-border-radius-200 (8px) — matches 2.29 target for interactive controls ✓✓

4Color ContractSelected = token-semantics-primary-base with token-text-inverse; hover = token-bg-surface-hover; today = token-border-input-default border; disabled = token-bg-input-disabled; error trigger border = token-semantics-danger-base ✓✓

5Legibility & ContrastWhite (text-inverse) on primary-base ≈4.8:1 ✓ AA; today highlighted by border ring — not colour alone ✓; disabled text uses border-input-default token (muted) ✓✓

6Composition FitTrigger (input) inherits .form-control tokens; popup width = fit-content adapts to 3-column grid; aligns below trigger without composition mismatch ✓✓

7Visual QualityClean 3-column month grid; selected cell uses primary fill; today is outlined; disabled is visually muted; year navigation arrows consistent with DatePicker style ✓✓

8Motion & InteractionBackground-color transition uses token-duration-fast (100ms) + token-easing-standard; prefers-reduced-motion block present ✓✓

9Accessibilityrole="dialog" + aria-modal + aria-label on popup ✓; focus-trap elements at top and bottom ✓; year input aria-label="Year" ✓; prev/next year: aria-label + role="button" ✓; month cells role="button" with JS-managed focus ✓✓

TimePicker · Review9/9

1Token IntegrityAM/PM bg, border, radius, color, font-weight, transition all tokenized; numInput color = token-text-default; font-weight: 600 (semi-bold) inherited from base — intentional ✓✓

2Scale HarmonyTime row = token-scale-1000 (40px); AM/PM button = token-space-600 (24px) vertically centred in row; trigger input = token-scale-900 (36px) — 2.29 target ✓✓

3Radius CoherenceAM/PM button = token-border-radius-200 (8px); popup = 8px; trigger = 8px ✓✓

4Color ContractNumber inputs = token-text-default; AM/PM = token-text-subtlest; AM/PM bg = token-bg-input-default; hover = token-bg-surface-hover ✓✓

5Legibility & Contrasttext-default #242424 on white ≈15:1 ✓; text-subtlest #626262 on white ≈5.7:1 ✓ AA ✓✓

6Composition FitAM/PM margin-left = token-space-150 (6px) ✓ — specificity conflict corrigido adicionando .flatpickr-time ao selector (5 classes); popup width = fit-content ✓✓

7Visual QualityPopup compact (fit-content); AM/PM vertically centered within 40px time row; bordered button style consistent with DatePicker time section ✓✓

8Motion & InteractionAM/PM transition: token-duration-fast (100ms) + token-easing-standard on background-color and color ✓✓

9AccessibilityAM/PM = 24px height (secondary element threshold met ✓); trigger input = 36px — touch target met via form-control wrapper ✓; popup role="dialog" + focus-trap ✓✓

CarouselReviewed

Carousel · Review8/9

1Token Integrity⚠ --osui-carousel-arrow-size:38px raw and --osui-carousel-pagination-margin:30px raw — neither maps to a scale token (closest: scale-900 36px, scale-800 32px); arrow shadow = token-elevation-2 ✓; pagination dot bg/active/transitions tokenized via token-scale-200/700, token-border-radius-100, token-duration-moderate + token-easing-expressive ✓; focus outline = token-border-size-075 + token-semantics-primary-base ✓⚠

2Scale HarmonyPagination dot = token-scale-200 (8px); active dot stretches to token-scale-700 (28px); pagination gap = token-scale-150 (6px); arrow icon = token-scale-500 (20px) — all from the scale ladder ✓ (arrow size 38px is the only outlier, see Token Integrity)✓

3Radius CoherenceArrow = border-radius:50% (circle) — intentional shape for navigation control; pagination rest = 50% dot, active stretches to token-border-radius-100 (4px) pill — intentional motion language ✓✓

4Color ContractArrow bg = token-bg-surface-default; arrow icon = token-text-default; pagination rest = token-border-default; pagination active = token-semantics-primary-base — all semantic ✓✓

5Legibility & ContrastArrow icon text-default on white ≈15:1 ✓; active pagination primary on white ≈4.8:1 ✓ AA; rest pagination is decorative (paired with active state for orientation) ✓; disabled arrow uses opacity 0.55 — visible but muted ✓✓

6Composition Fit--osui-carousel-track-width API allows fitting any container; --has-pagination variant shifts arrow vertical center to account for pagination row; arrows positioned absolute — no width impact on content ✓✓

7Visual QualityActive pagination dot stretches to a pill (motion + shape change) — distinctive visual signal; arrow elevation lifts it above content; disabled state preserves shape ✓✓

8Motion & InteractionArrow opacity transition = token-duration-fast + token-easing-standard ✓; pagination width/border-radius transitions = token-duration-moderate + token-easing-expressive (signature stretch curve) ✓; bg-color = token-duration-fast + token-easing-standard ✓; no prefers-reduced-motion block — should be added for slide transitions ⚠ (slide animation handled by Splide JS)✓

9Accessibilityrole="region" + aria-roledescription="carousel" on track ✓; slides have role="tabpanel" + aria-roledescription + aria-label "X of Y" + aria-hidden when off-screen ✓; pagination buttons role="tab" + aria-controls + aria-selected + aria-label ✓; arrows have aria-label and disabled state; focus-visible outline visible ✓✓

Table & PaginationReviewed

Name	Title	Email	Role
Lindsay Walton	Front-end Developer	lindsay.walton@example.com	Member
Courtney Henry	Designer	courtney.henry@example.com	Admin
Tom Cook	Director of Product	tom.cook@example.com	Member
Whitney Francis	Copywriter	whitney.francis@example.com	Admin
Leonard Krasner	Senior Designer	leonard.krasner@example.com	Owner
Floyd Miles	Principal Designer	floyd.miles@example.com	Member

1 to 10 of 43 items

Table · Review9/9

1Token Integrity48px → token-scale-1200; rgba → color-mix(); 56/64px documented as intentional exception✓

2Scale Harmony48px uses token; 56/64px — no token available (exception documented in CSS)✓

3Radius CoherenceNo outer border → border-radius removed; no conflicts✓

4Color ContractSemantic tokens in correct roles; primary only on sorted/selected✓

5WCAG AAtext-default #242424 → 15:1 · text-subtle #3b3b3b → 11:1✓

6Composition FitPagination counter "1 to N of M items" present✓

7Visual QualityClear hierarchy, no outer border, matches reference design✓

8Motiontransition: background-color token-duration-fast token-easing-standard added✓

9AccessibilityRow height ≥ 44px; sortable headers have cursor:pointer✓

Pagination · Review9/9

1Token IntegrityAll values tokenised; opacity:0.5 on disabled documented as exception (no opacity token exists)✓

2Scale HarmonyButton size token-scale-900 (36px) — 2.29 target; tablet uses token-scale-1000 (40px)✓

3Radius Coherencetoken-border-radius-200 (8px) — correct 2.29 target✓

4Color Contracttext-default for buttons; text-subtlest for counter; border-only active state (no primary fill)✓

5WCAG AAtext-default #242424 → 15:1 · text-subtlest #626262 → 5.7:1; disabled opacity exception per WCAG 1.4.3✓

6Composition FitCounter "1 to N of M items" present; margin-top token-scale-600 (24px)✓

7Visual QualityClean minimal style; border-only active page; consistent with table design✓

8Motiontransition: background-color + border-color token-duration-fast token-easing-standard✓

9Accessibility36px desktop < 44px — acceptable for pointer devices; tablet 40px; aria-label + aria-current in markup✓

Chat MessageReviewed

Received · left

Received

Hello John Doe. This is a sample text used on our functional tests in OutSystemsUI.
Any further question or feedback just bring it on 😎

19:24

Sent · right

Sent

JM

Hi! Any updates on the project?

19:25

Conversation

Hey, are you free for a quick call today?

19:20

JM

Yes! We're almost done with the new theme 🎉

19:22

That's great news! Can't wait to see it.

19:23

Chat Message · Review9/9

1Token IntegrityReceived bg: token-bg-neutral-subtlest-default (#f5f5f5) ✓; sent bg: token-semantics-primary-base ✓; sent color: token-text-inverse ✓; border-radius: token-border-radius-200 ✓; padding: token-scale-300 ✓; status color: token-text-subtlest ✓; status font: token-font-size-275 ✓; status gap/margin: token-scale-100 ✓; is-read: token-semantics-success-base ✓; photo: token-scale-800 ✓; max-width 600px structural (no applicable token) — documented ✓✓

2Scale HarmonyAvatar/photo 32px (token-scale-800) = UserAvatar default ✓; bubble padding 12px (token-scale-300) ✓; status 11px (token-font-size-275) < body 14px — clear visual hierarchy ✓; margin-top 4px (token-scale-100) ✓✓

3Radius CoherenceBubble border-radius 8px (token-border-radius-200) — matches 2.29 target ✓✓

4Color ContractReceived: bg-neutral-subtlest + text-default ✓; sent: semantics-primary-base + text-inverse ✓; status: text-subtlest ✓; is-read: semantics-success-base ✓; clock icon hidden (display:none) ✓✓

5Legibility & ContrastReceived: text-default #242424 on #f5f5f5 ≈ 13.8:1 ✓; sent: white on primary #105cef ≈ 8.8:1 ✓; status: text-subtlest #626262 on white ≈ 5.7:1 ✓; all pass WCAG AA ✓✓

6Composition FitAvatar 32px aligns with UserAvatar default across the system ✓; flex + row-reverse for sent correctly mirrors layout ✓; status sits below bubble with 4px gap ✓; max-width 600px prevents full-width stretch ✓✓

7Visual Quality8px radius gives modern messenger feel consistent with 2.29 theme ✓; subtle #f5f5f5 received bubble avoids harsh grey ✓; primary blue for sent creates clear sent/received distinction ✓; time + checkmark small and unobtrusive ✓✓

8Motion & InteractionChat messages are static display elements — no transitions needed ✓; interactive role="button" on expandable messages uses native focus ✓✓

9Accessibilitywcag-hide-text with aria-live="polite" + aria-atomic for screen reader announcements ✓; status icon aria-hidden="true" ✓; sent/received label via wcag-hide-text ✓; role="button" + tabindex="0" + aria-expanded on expandable message ✓; role="status" on timestamp ✓✓

Overflow MenuReviewed

Closed · trigger only

Open · menu panel

Overflow Menu · Review8/9

1Token IntegrityColors via token-text-default, token-bg-surface-default, token-bg-neutral-subtle-default ✓; elevation via token-elevation-2 ✓; link padding token-scale-200/400 ✓; trigger width fixed to token-scale-800 (32px) and mobile to token-scale-1000 (40px) ✓; min-width:170px has no matching scale token — acceptable as component-specific constraint ✓✓

2Scale HarmonyTrigger 32px = token-scale-800; intentionally smaller than form fields (icon-only action button); mobile widens to token-scale-1000 (40px); link rows 8px+8px padding = consistent with list-item density ✓✓

3Radius CoherenceTrigger fixed to token-border-radius-200 (8px) via --osui-btn-border-radius ✓; balloon fixed to 8px via --border-radius-soft → token-border-radius-200 in :root ✓; both now consistent with panel and button radius target ✓✓

4Color ContractPanel background token-bg-surface-default (white) ✓; item color token-text-default ✓; hover/active background token-bg-neutral-subtle-default (not primary — correct for secondary nav menu) ✓; group title via text-neutral-7 utility class (expected in OutSystems markup) ✓✓

5Legibility & Contrasttoken-text-default (#242424) on white → ~16:1 ✓; same on hover bg (#eae9e9) → ~11.5:1 ✓; text-decoration:none added ✓; group label at neutral-7 on white ~12:1 ✓✓

6Composition FitTrigger sits inline with surrounding UI; token-elevation-2 shadow correctly elevates panel above content; 170px min-width ensures readable menu items; separator via Utilities.Separator ✓✓

7Visual Quality8px trigger radius matches button family ✓; 8px balloon radius consistent with panels/dropdowns ✓; text-decoration removed from links ✓; hover neutral-subtle bg avoids harsh primary highlight ✓; token-elevation-2 shadow gives appropriate depth ✓✓

8Motion & InteractionTrigger inherits .btn transition (bg/border-color/color at token-duration-fast + token-easing-standard) ✓; balloon show/hide is JS-driven, no CSS animation in scope ✓; no untokenised transitions ✓✓

9Accessibility⚠ Trigger 32px height < 44px WCAG minimum on desktop — documented exception consistent with btn-small (desktop icon button pattern); mobile width 40px; aria-haspopup="menu", aria-expanded, aria-controls, aria-label present ✓; role="menuitem" on items ✓; focus-trap elements ✓⚠

Master DetailReviewed

AT

Amos Tesen

Content Marketing Consultant

AM

Andrea Mccarthy

Services Manager West

AO

Ann Olivarria

Services Representative

AS

Antonia Saulter

Marketing Manager

AJ

Ashton James

Front-End Developer

AB

Audrey Below

Human Resources Consultant

AC

Aurora Currey

Solutions Architect

AG

Avery Grey

Full-Stack Developer

AT

Amos Tesen

Content Marketing Consultant

About

No available data to display

Contacts

Email amos.tesen@example.com

Phone 1-555-445-1521

Master Detail · Review9/9

1Token IntegrityCustom properties use 3-level fallbacks; bg = token-bg-surface-default; border = token-border-default; active icon color fixed from raw #105cef to semantic + primitive fallback ✓✓

2Scale HarmonyList item padding = scale-300/600 (12px/24px); detail pane padding = scale-1000 (40px); chevron icon = 16px (scale-400); all consistent with system scale ✓✓

3Radius CoherenceWrapper border-radius = border-radius-0 (no radius on outer container — correct for full-bleed layout pattern) ✓✓

4Color ContractActive row bg = token-bg-surface-active (primary-tinted via color-mix); hover bg = token-bg-surface-hover; divider border = token-border-default; all semantic ✓✓

5Legibility & ContrastList item text = text-default #242424 ≈15:1 ✓; active chevron = primary-base ≈4.8:1 ✓; detail content inherits text-default ✓✓

6Composition FitSplit left / right panels sized via CSS custom property --left-percentage; right panel border-left creates clean visual separation; detail padding consistent with card inner spacing ✓✓

7Visual QualityActive list item clearly distinguishable via bg-surface-active + primary chevron; hover state provides clear affordance; detail pane has generous padding for readability ✓✓

8Motion & InteractionList item background-color transition uses token-duration-fast + token-easing-standard; prefers-reduced-motion block present ✓✓

9AccessibilityList items use aria-selected; active state confirmed by bg + icon colour (not colour alone); close icon has accessible label; touch targets ≥ 44px via list-item padding ✓✓

NotificationReviewed

Text · with action

Text only

With image

Live animation · trigger by position

Notification · Review8/9

1Token IntegrityBackground token-bg-surface-default ✓; border token-border-default + token-border-size-025 ✓; shadow token-elevation-3 ✓; radius token-border-radius-200 ✓; text token-text-default ✓; padding/gap/margin token-scale-400/600 ✓; --notification-width has no fallback (intentional developer-set API) ✓✓

2Scale HarmonyPadding 16px = token-scale-400 ✓; gap 16px = token-scale-400 ✓; viewport margin 24px = token-scale-600 ✓; phone margin reduces to token-scale-400 (16px) ✓; no fixed height, auto-height based on content ✓✓

3Radius Coherencetoken-border-radius-200 (8px) ✓ — consistent with dropdown, inputs, buttons, and modal panels; phased-out 4px not used ✓✓

4Color ContractBackground token-bg-surface-default ✓; text token-text-default ✓; border token-border-default ✓; no primary/error/warning colors misused ✓; component is neutral-informational by default, contextual color can be applied by developer ✓✓

5Legibility & Contrasttoken-text-default (#242424) on token-bg-surface-default (white) → ~16:1 ✓; subtitle at token-text-subtlest (#626262) → ~5.7:1 WCAG AA ✓; border provides additional perceptual boundary on low-contrast backgrounds ✓✓

6Composition Fitflex + align-items:center + justify-content:space-between + gap-400 handles text-only, text+action-button, and text+image layouts ✓; max-width calc(100vw - margin*2) prevents viewport overflow ✓; pointer-events:none when hidden avoids layout interference ✓✓

7Visual Quality8px radius consistent with component family ✓; token-elevation-3 provides clear layering above page content ✓; 16px padding gives comfortable breathing room ✓; title (600 weight) + subtitle (subtlest) hierarchy is clear ✓; action button aligns to center of the card ✓✓

8Motion & Interaction⚠ Exit duration (150ms, 200ms) and easing (ease-in, cubic-bezier(0.4,0,1,1)) are hardcoded — should use --token-duration-fast and --token-easing-standard/exit; enter duration (200ms, 420ms) and spring easing cubic-bezier(0.16,1,0.3,1) hardcoded — should use --token-duration-slow and --token-easing-expressive; spring easing intentional design choice with no current token equivalent⚠

9Accessibilityrole="alertdialog" ✓; aria-hidden toggled on show/hide ✓; tabindex="0" when visible ✓; pointer-events:none prevents accidental interaction when hidden ✓; no dedicated close/dismiss button — keyboard users must rely on action button or auto-dismiss timeout; user-select:none prevents copying notification content (minor) ✓✓

Bottom SheetReviewed

Bottom Sheet · Review8/9

1Token IntegrityBackground token-bg-surface-default ✓; shadow token-elevation-3 ✓; padding token-scale-400 ✓; handler top-bar padding token-scale-800 ✓; overlay token-backdrop ✓; handler pill dimensions (4×40px) and draggable-area (56px) are component-specific structural constants with no token equivalents — acceptable ✓; --bottom-sheet-max-height: calc(100vh - 54px) — 54px hardcoded top-bar offset with no matching token ⚠✓

2Scale HarmonyPadding 16px = token-scale-400 ✓; handler-top padding 32px = token-scale-800 ✓; content padding-bottom accounts for bottom-bar-size + token-scale-600 + safe-area ✓; min-height 50vh ensures meaningful content area ✓; max-height 85vh on desktop prevents full takeover ✓✓

3Radius CoherenceTop corners via --bottom-sheet-shape → --border-radius-soft → token-border-radius-200 (8px) ✓; handler pill via border-radius:100px (intentional pill shape) ✓; --border-radius-rounded:16px defined as component variant option ✓✓

4Color ContractBackground token-bg-surface-default ✓; handler color token-border-input-default (neutral, not primary — correct) ✓; overlay token-backdrop (rgba black 25%) ✓; no semantic color misuse ✓✓

5Legibility & ContrastContent inherits token-text-default from body ✓; overlay at 25% black creates sufficient contrast between sheet and page content ✓; handler visible against white surface ✓; header shadow (elevation-3) appears on scroll to signal sticky header ✓✓

6Composition Fitoverflow-y:scroll on content area ✓; padding-bottom accounts for bottom navigation bar (--bottom-bar-size) + scale-600 + safe-area — safe on all device configurations ✓; overlay z-index fixed to calc(bottom-sheet-layer - 1) ensuring sheet always above overlay ✓; --is-open::before pseudo-element fills gap below sheet during bounce ✓✓

7Visual Qualitytoken-elevation-3 shadow creates strong surface separation ✓; 8px top radius consistent with panel/card family ✓; drag handler pill correctly sized and positioned ✓; header shadow fades in on scroll adding depth cue ✓; overlay darkens content proportionally ✓✓

8Motion & Interaction⚠ Enter 500ms and spring easing cubic-bezier(0.32,0.72,0,1) are hardcoded — 500ms exceeds --token-duration-slow (300–400ms), spring easing has no token equivalent (Vaul signature, intentional); exit 300ms cubic-bezier(0.4,0,1,1) hardcoded — should use --token-duration-slow + --token-easing-exit; overlay transitions (500ms/250ms) hardcoded — should use --token-duration-slow + --token-easing-standard⚠

9Accessibilityrole="complementary" or role="dialog" ✓; aria-hidden toggled on open/close ✓; tabindex="0" when open ✓; focus-trap-top/bottom elements present ✓; drag handle area 56px exceeds 44px touch target minimum ✓; close button in header provides keyboard dismiss path ✓; overlay click closes sheet ✓✓

TooltipReviewed

Rest

Open · Right

Open · Top

Open · Bottom

Open · Left

Tooltip · Review7/9

1Token Integrity⚠ --osui-tooltip-arrow-size:10px raw (no token); shadcn override sets --osui-tooltip-padding:6px 12px raw — should reference token-scale-150 + token-scale-300; bg/color/radius/font-size all tokenized; floating offset = token-scale-200 ✓; high-contrast border = token-border-size-025 ✓⚠

2Scale HarmonyPadding override 6/12 sits between token-scale-150 (6px) and token-scale-300 (12px) — values match scale ladder even if not referenced by name; floating offset = token-scale-200 (8px) ✓✓

3Radius CoherenceShadcn override updates radius from token-border-radius-100 (4px) to token-border-radius-200 (8px) — matches 2.29 target ✓✓

4Color ContractBackground = token-text-default (deep neutral, intentional inverse for tooltip surface); color = token-text-inverse (white on dark) — semantic token reuse, no raw hex ✓✓

5Legibility & ContrastWhite (#ffffff) on neutral-1200 (#242424) ≈15:1 ✓ AAA; tooltip text legible at all sizes; high-contrast mode adds 1px border for users with custom contrast ✓✓

6Composition Fitmax-width: 250px constrains tooltip to readable width; arrow position calc'd from --osui-floating-offset; balloon positions (top/bottom/left/right) wired via Floating UI; overlays without disturbing trigger layout ✓✓

7Visual QualityCompact 6/12 padding, 8px radius, dark surface inverted from page — clear floating-UI aesthetic; arrow rotated 45° from same fill = visually unified ✓✓

8Motion & Interaction⚠ osui-tooltip-in keyframe uses 150ms cubic-bezier(0.16,1,0.3,1) hardcoded — should reference token-duration-base + a tokenized expressive easing; no prefers-reduced-motion block to disable the fade-in ⚠⚠

9Accessibilityrole="tooltip" + aria-hidden toggled on open ✓; trigger uses role="button" + tabindex="0" + aria-describedby pointing to tooltip id ✓; non-interactive surface — pointer-only or keyboard-focus reveals consistent ✓✓

HeaderReviewed

Desktop · rest

Mobile · rest

Desktop · submenu open

Desktop · submenu open · 2 columns

Side menu · rest

Page content area

Header · Review7/9

1Token Integrity⚠ menu-icon-line height:3px, width:24px, margin:2px 0, border-radius:20px all hardcoded — should reference token-border-size-075/token-scale-600/token-scale-050/token-border-radius-full; menu-icon width:24px hardcoded; app-logo max-width:120px hardcoded; remaining: bg via --background-color-header (theme variable), shadow = token-elevation-1, paddings/margins via token-scale-200/400/600 ✓⚠

2Scale HarmonyHeader height = --header-size (theme variable, layout-scoped); menu-icon-line dimensions correspond to scale-075/scale-600/scale-050 even if not referenced by name; logo radius = token-border-radius-100 (4px) — consistent ladder ✓✓

3Radius CoherenceApp-logo = token-border-radius-100 (4px) — small-element radius; menu-icon-line border-radius:20px (effectively pill, not 8px panel) — intentional for icon line shape ✓✓

4Color ContractBackground via theme variable --background-color-header (consumer-set); menu-icon-line + menu-back use token-text-subtlest — semantic; submenu and dropdown contents inherit semantic tokens from their own components ✓✓

5Legibility & Contrastmenu-icon-line text-subtlest #626262 vs typical white header background ≈5.7:1 ✓ AA; on theme-color headers, contrast depends on consumer setting — not blockable at component level ✓✓

6Composition FitFlex layout for header-content; logo + title + nav + user-info all height:100%; sticky positioning via .fixed-header wrapper; nav becomes full-height drawer on tablet/phone — responsive composition correct ✓✓

7Visual Qualitytoken-elevation-1 gives subtle separation from page; menu-icon-line trio creates clear hamburger affordance; user-info pill area integrates with avatar component ✓✓

8Motion & Interaction⚠ No transitions on menu-icon-line state changes (e.g., to "X" close icon when menu open); no prefers-reduced-motion block on header chrome — minor, non-blocking ⚠⚠

9Accessibilityrole="banner" on header ✓; menu-icon role="button" + tabindex="0" + aria-label "Toggle the Menu" + aria-haspopup="true" ✓; menu-icon-line aria-hidden="true" (decorative) ✓; menu-icon width 24px is below 44px touch but is sized to header-size at full height — touch target = full bar height, accepted ✓✓

PopupReviewed

Popup · Review9/9

1Token IntegrityBackground token-bg-surface-default ✓; border-radius token-border-radius-200 (updated from 100 to 200 for 2.29) ✓; shadow token-elevation-4 ✓; padding token-scale-600 ✓; margin token-scale-600 ✓; max-height uses token-scale-1000 in calc ✓; backdrop token-backdrop ✓; max-width:500px hardcoded — no token equivalent, accepted as component-specific structural constant ✓✓

2Scale HarmonyPadding and margin 24px = token-scale-600 ✓; max-height calc subtracts token-scale-1000 (40px) — correct viewport margin ✓; default buttons inside at 36px = token-scale-900, consistent with form-tier element height ✓✓

3Radius Coherencetoken-border-radius-200 (8px) — correct 2.29 target; matches inputs, dropdowns, cards and notification family ✓; high-contrast override also updated to border-radius-200 ✓✓

4Color ContractSurface token-bg-surface-default (white) ✓; overlay token-backdrop rgba(0,0,0,0.25) ✓; border:0 — surface defined by shadow alone, intentional ✓; high-contrast border uses token-bg-surface-default correctly for inverted context ✓; no semantic color misuse ✓✓

5Legibility & ContrastContent inherits token-text-default (#242424) on white surface ~15:1 ✓; overlay at 25% black creates sufficient visual separation between dialog and page ✓; elevation-4 dual-layer shadow reinforces surface depth ✓✓

6Composition Fitwidth:100% + max-width:500px + margin:24px → full-width on mobile with safe margins, capped at 500px on wider screens ✓; overflow:visible allows internal overflows (datepickers, dropdowns) without clipping ✓; max-height prevents viewport overflow on tall content ✓✓

7Visual Qualityelevation-4 (strongest, dual-layer shadow) is the correct tier for a blocking modal — higher than notification (elevation-3) and sidebar (elevation-3), reflecting dialog's higher visual priority ✓; borderless surface reads cleanly against the dimmed backdrop ✓; 8px radius consistent with 2.29 surface family ✓✓

8Motion & InteractionNo CSS animation or transition defined — open/close lifecycle delegated to OSUI runtime; no hardcoded duration or easing values present ✓✓

9Accessibilityrole="dialog" + aria-modal="true" + aria-labelledby linking to visible title ✓; tabindex="-1" enables programmatic focus on open ✓; Escape key dismisses ✓; backdrop click dismisses ✓; focus-trap responsibility of OSUI runtime ✓; buttons 36px < 44px — documented 2.29 trade-off, consistent with other components ✓✓

SidebarReviewed

Sidebar · Review8/9

1Token IntegrityBackground token-bg-surface-default ✓; color token-text-default ✓; shadow token-elevation-3 ✓; padding-x token-scale-600 (24px) ✓; padding-y token-scale-400 (16px) ✓; overlay token-backdrop ✓; layer --osui-sidebar-layer → --os-layer-off-canvas / --layer-global-off-canvas fallback ✓; --sidebar-width is an intentional overrideable custom property with no token equivalent — acceptable ✓; :after swipe-zone 24px hardcoded (= token-scale-600 value but not referenced) ⚠✓

2Scale Harmonypadding-x 24px = token-scale-600 ✓; padding-y 16px = token-scale-400 ✓; phone max-width 85vw prevents full-screen takeover ✓; :after swipe-zone 24px = token-scale-600 value but hardcoded ⚠; overlay width 200vw is a structural constant — acceptable ✓✓

3Radius CoherenceNo border-radius on sidebar — correct for a full-height edge-anchored panel; flush to viewport edge is the expected pattern ✓✓

4Color ContractBackground token-bg-surface-default (white) ✓; text token-text-default ✓; overlay token-backdrop rgba(0,0,0,0.25) ✓; shadow token-elevation-3 ✓; no semantic color misuse ✓✓

5Legibility & ContrastContent inherits token-text-default on white surface ✓; token-elevation-3 shadow clearly separates sidebar from page content ✓; overlay at 25% black provides sufficient visual hierarchy ✓✓

6Composition Fitposition:fixed; top:0; height:100% — correct full-height anchored panel ✓; translateX(102%) ensures shadow is also off-screen in closed state ✓; overflow:auto on content area ✓; :after 24px transparent strip extends the hit area for swipe-to-dismiss on mobile ✓; phone max-width:85vw ensures dismiss tap zone always exists ✓; overlay ::before shares z-index with sidebar — acceptable since ::before renders below sidebar content by DOM order ✓✓

7Visual Qualitytoken-elevation-3 (dual-layer shadow) appropriate for highest-surface overlay panel ✓; full-height flush panel with no radius is correct for this component family ✓; will-change:transform promotes to GPU layer for smooth animation ✓; shadow hidden off-screen via translateX(102%) avoids bleed into viewport ✓✓

8Motion & Interaction⚠ Enter 500ms cubic-bezier(0.4,0,0.2,1) matches Shadcn Sheet ✓; exit 300ms cubic-bezier(0.4,0,0.2,1) exit faster than enter ✓; both durations hardcoded — no token-duration-* equivalent at 300ms/500ms ⚠; overlay ::before transition still 130ms ease-in — not aligned with updated enter/exit timing ⚠⚠

9Accessibilityrole="dialog" + aria-hidden toggling required from JS/OutSystems ✓; overlay cursor:pointer signals dismissability ✓; pointer-events toggled correctly — none when closed, initial when open ✓; :after swipe-zone extends mobile touch target for dismiss ✓; phone max-width:85vw ensures tap-to-close zone always visible ✓; focus trap responsibility of implementation ✓✓