Theme Verification Tailwind v4.0 SvelteKit & Svelte 5

Pine Creek Design System

Foundations Actions Form Controls Feedback Containers Overlays Navigation Data Display Typography Rhythm Accessibility & WCAG
Section 1 Design Tokens

Foundations

Colors, typography, spacing, radius, shadows, and breakpoints for Pine Creek applications.

Brand Slate Ramp (Primary Dark Foundation)

#242d31
slate-brand-950
Header accents, deep dividers
#354349
slate-brand-900
Primary navigation sidebar, badges
#5d7580
slate-brand-600
Sub-tags, secondary frames

Action, Status & Accent Colors

WCAG AA Standard: ≥ 4.5:1 (Body text)
#326fac
primary
5.2:1 AA ✓
#28598c
primary-hover
7.3:1 AA ✓
#77b200
success (fill)
8.1:1 AA ✓
#3d6600
success-dark
5.6:1 AA ✓
#ffbf00
warning (fill)
11.2:1 AA ✓
#806000
warning-dark
5.9:1 AA ✓
#cc0000
danger
5.9:1 AA ✓
#1e6b6b
info-teal
6.2:1 AA ✓

Typography Hierarchy (IBM Plex Sans)

text-display • 36px / 49px / 500 10:19 MDT
text-heading-1 • 32px / 41.6px / 400 Bayview Landfill
text-heading-2 • 20px / 26px / 500 Online / Active Operations
text-body-lg • 16px / 26px / 500 LWD - Landfill Wellfield Data & Logs
text-body • 14px / 25.2px / 400 Plant flowing 1045scfm. GCCS G-field regulator valve adjusted +5%.
text-action • 14px / 20px / 500 Add Entry / Action Label
text-badge • 12px / 18px / 600 5 UNREAD
text-overline • 12px / 15.6px / 500 / 0.075em PLANTS • NAVIGATION • BVL
text-caption • 12px / 15.6px / 500 07/12/26 10:14 (5min ago)

Border Radii

rounded-sm / rounded-card 4px (0.25rem)
rounded-md / rounded-control 10px (0.625rem)
rounded-control-outer / rounded-segmented 15px (0.9375rem)
rounded-lg 20px (1.25rem)
rounded-pill 40px (2.5rem)
rounded-full 9999px

Elevation Shadows

shadow-sm Subtle (cards)
shadow-md Popovers / tooltips
shadow-lg Floating toasts
shadow-xl Modals / drawers

Screen Breakpoints

sm (Mobile landscape) 640px (40rem)
md (Tablet portrait) 768px (48rem)
lg (Desktop viewport) 1024px (64rem)
xl (Wide desktop) 1280px (80rem)
2xl (Full monitor) 1536px (96rem)
Section 2 Interactive

Actions & Buttons

Buttons, button groups, and links in all variants, sizes, and states.

Button Variants

bg-action / bg-surface-alt / border-action / bg-action-destructive / text-action
☀️ Light Mode .light
🌙 Dark Mode .dark

Button Sizes

sm: px-2.5 py-1 text-caption | md: px-4 py-2 text-action | lg: px-6 py-3 text-body-lg
☀️ Light Mode .light
🌙 Dark Mode .dark

Button States

default | hover:bg-action-hover | focus-visible:ring-2 | active:scale-95 | disabled:opacity-50
☀️ Light Mode .light
🌙 Dark Mode .dark

Buttons with Icons & Icon-Only

inline-flex items-center gap-2 | p-2 rounded-control
☀️ Light Mode .light
🌙 Dark Mode .dark

Button Group / Segmented Control

inline-flex bg-surface-alt p-1 rounded-control-outer border border-default
☀️ Light Mode .light
🌙 Dark Mode .dark

Link Styles (Inline, Standalone, Visited)

inline: text-action-text underline | standalone: inline-flex items-center gap-1 hover:gap-2
☀️ Light Mode .light

This is a sentence containing an inline contextual link that wraps naturally within paragraph text.

🌙 Dark Mode .dark

This is a sentence containing an inline contextual link that wraps naturally within paragraph text.

Section 3 Inputs

Form Controls & Fields

Inputs, textareas, selects, toggles, checkboxes, and layout configurations.

Text Inputs (Default, Prefix, Suffix, Disabled, Error)

bg-surface border border-default rounded-control px-3 py-2 text-body focus:ring-2 focus:ring-action
☀️ Light Mode .light

Helper text explaining input requirements.

Value must be a positive integer below 2000 scfm.

🌙 Dark Mode .dark

Helper text explaining input requirements.

Value must be a positive integer below 2000 scfm.

Textarea & Select Dropdown

bg-surface border border-default rounded-control px-3 py-2 text-body
☀️ Light Mode .light
🌙 Dark Mode .dark

Checkboxes, Radio Group, Toggles & Slider

accent-action / role=switch: h-6 w-11 rounded-full border-2 bg-action|bg-switch-inactive / h-5 w-5 bg-white translate-x-5
☀️ Light Mode .light
Checkboxes
Radio Group
Toggle Switch
Telemetry Sync
Auto-Alerts
Disabled Switch
Slider / Range
Flow Rate 1,045 scfm
🌙 Dark Mode .dark
Checkboxes
Radio Group
Toggle Switch
Telemetry Sync
Auto-Alerts
Disabled Switch
Slider / Range
Flow Rate 1,045 scfm

File Upload Dropzone & Search Field

border-2 border-dashed border-border-input hover:border-action rounded-card p-6
☀️ Light Mode .light
Click to upload report or CSV
Supports .csv, .pdf, or .xlsx up to 25MB
🌙 Dark Mode .dark
Click to upload report or CSV
Supports .csv, .pdf, or .xlsx up to 25MB

Form Field Layouts: Stacked vs Inline

grid grid-cols-1 sm:grid-cols-3 items-center gap-4
☀️ Light Mode .light
Field instructions positioned below input.
🌙 Dark Mode .dark
Field instructions positioned below input.
Section 4 Status

Feedback & Status

Alert banners, notifications, badges, progress loaders, and empty states.

Alert Banners (Info, Success, Warning, Error)

border-l-4 p-4 rounded-card flex items-start gap-3
☀️ Light Mode .light
Scheduled Calibration: Flare 1 sensor diagnostics will run at 02:00 MDT.
Plant Online: All telemetry channels are operating within optimal pressure bands.
High Backpressure Detected: Wellfield header line 4 showing elevated resistance (+15%).
Critical Trip Event: Flare 2 safety interlock engaged. Emergency operator dispatch notified.
🌙 Dark Mode .dark
Scheduled Calibration: Flare 1 sensor diagnostics will run at 02:00 MDT.
Plant Online: All telemetry channels are operating within optimal pressure bands.
High Backpressure Detected: Wellfield header line 4 showing elevated resistance (+15%).
Critical Trip Event: Flare 2 safety interlock engaged. Emergency operator dispatch notified.

Toast / Floating Notification

bg-surface border border-default shadow-lg rounded-control p-4 flex items-center justify-between
☀️ Light Mode .light
Entry Saved Successfully
Log #2026-BVL-1049 added to telemetry ledger.
🌙 Dark Mode .dark
Entry Saved Successfully
Log #2026-BVL-1049 added to telemetry ledger.

Badges, Status Tags & Removable Chips

px-2.5 py-1 rounded-full text-badge font-semibold
☀️ Light Mode .light
Online Warning Down, Trip Primary Nav Telemetry
Bayview Landfill Operator: Garret Gordon Status: All Active
🌙 Dark Mode .dark
Online Warning Down, Trip Primary Nav Telemetry
Bayview Landfill Operator: Garret Gordon Status: All Active

Progress Indicators, Spinners & Skeletons

h-2 bg-surface-alt rounded-full / animate-pulse
☀️ Light Mode .light
Uptime Percentage (BVL Monthly) 96.4%
Syncing telemetry...
Content Skeleton Placeholder
🌙 Dark Mode .dark
Uptime Percentage (BVL Monthly) 96.4%
Syncing telemetry...
Content Skeleton Placeholder

Empty State Container

border-2 border-dashed border-default rounded-card p-8 text-center space-y-3
☀️ Light Mode .light

No Log Records Found

No operational log entries have been posted for the selected plant during this time range.

🌙 Dark Mode .dark

No Log Records Found

No operational log entries have been posted for the selected plant during this time range.

Section 5 Layout

Containers & Layout

Cards, dividers, accordions, tabs, and responsive grid patterns.

Card Variants (Basic, Header/Footer, Interactive)

bg-surface border border-default rounded-card shadow-sm hover:border-action
☀️ Light Mode .light

Basic Container

Simple bordered card wrapper for self-contained metric readouts or info blocks.

Wellfield Status
Current flow: 1,045 scfm at 98.2°F operating temperature.
Bayview Unit 1 Details →

Interactive Card

Hover to observe border color transition to primary action and elevation elevation shadow.

🌙 Dark Mode .dark

Basic Container

Simple bordered card wrapper for self-contained metric readouts or info blocks.

Wellfield Status
Current flow: 1,045 scfm at 98.2°F operating temperature.
Bayview Unit 1 Details →

Interactive Card

Hover to observe border color transition to primary action and elevation elevation shadow.

Horizontal & Vertical Dividers

border-t border-default / border-l border-default
☀️ Light Mode .light
Simple Horizontal Divider
Historical Logs
Plant BVL
Unit 04
MDT Zone
🌙 Dark Mode .dark
Simple Horizontal Divider
Historical Logs
Plant BVL
Unit 04
MDT Zone

Accordion / Collapsible Disclosure

border border-default rounded-card divide-y divide-default
☀️ Light Mode .light

Thermal oxidizer threshold set at 1650°F minimum retention temperature. Auto-purge cycle activates after 120 seconds of continuous down detection.

🌙 Dark Mode .dark

Thermal oxidizer threshold set at 1650°F minimum retention temperature. Auto-purge cycle activates after 120 seconds of continuous down detection.

Tabs (Underline Style & Pill Style)

border-b-2 border-action text-action / bg-action text-on-action rounded-pill
☀️ Light Mode .light
Underline Tab Style
Pill Tab Style
🌙 Dark Mode .dark
Underline Tab Style
Pill Tab Style
Section 6 Overlays

Overlays & Floating Panels

Modals, drawers, popovers, tooltips, and contextual dropdown menus.

Modal Dialog (Header, Body, Actions & Backdrop)

bg-surface border border-default shadow-xl rounded-card p-6
☀️ Light Mode .light

Create Operational Log

Confirm submission of manual valve change entry for Bayview Landfill - Flare 2.

Target Flow: 1,045 scfm
Supervisor On Duty: Ren Rich
🌙 Dark Mode .dark

Create Operational Log

Confirm submission of manual valve change entry for Bayview Landfill - Flare 2.

Target Flow: 1,045 scfm
Supervisor On Duty: Ren Rich

Drawer / Slide Sheet Panel

border border-default bg-surface shadow-xl rounded-card p-5 flex flex-col justify-between
☀️ Light Mode .light

Wellfield Diagnostics Sheet

Unit 04 Sensor Array
Oxygen (O2): 0.4%
Methane (CH4): 52.8%
System Pressure: -24.1 in. w.c.
🌙 Dark Mode .dark

Wellfield Diagnostics Sheet

Unit 04 Sensor Array
Oxygen (O2): 0.4%
Methane (CH4): 52.8%
System Pressure: -24.1 in. w.c.

Popover & Tooltip Components

tooltip: bg-tooltip text-on-tooltip rounded-control px-2.5 py-1 text-caption shadow-md
☀️ Light Mode .light
Thermocouple sensor #02
Telemetry Popover

Calibration cycle completes automatically every 24 hours.

Learn more →
🌙 Dark Mode .dark
Thermocouple sensor #02
Telemetry Popover

Calibration cycle completes automatically every 24 hours.

Learn more →

Contextual Dropdown Menu

bg-surface border border-default shadow-lg rounded-control py-1 divide-y divide-default
☀️ Light Mode .light
🌙 Dark Mode .dark
Section 8 Data

Data Display

Tables, lists, avatars, metric cards, key-value grids, and formatted code.

Data Table (Header, Striped Rows, Hover, Selected State)

w-full text-left border border-default rounded-card overflow-hidden
☀️ Light Mode .light
Time (MDT)
FacilityOperatorFlow (scfm)Status
10:14Bayview LandfillGarret Gordon1,045Online
09:58High Ridge LandfillAlex Mercer860Warning
09:42Bayview Landfill (Selected)Ren Rich0 (Trip)Down, Trip
🌙 Dark Mode .dark
Time (MDT)
FacilityOperatorFlow (scfm)Status
10:14Bayview LandfillGarret Gordon1,045Online
09:58High Ridge LandfillAlex Mercer860Warning
09:42Bayview Landfill (Selected)Ren Rich0 (Trip)Down, Trip

List Items with Avatars and Actions

bg-surface border border-default rounded-card divide-y divide-default
☀️ Light Mode .light
GG
Garret Gordon
Senior Field Technician • Bayview
Onsite
RR
Ren Rich
Operations Supervisor • Regional
Remote
🌙 Dark Mode .dark
GG
Garret Gordon
Senior Field Technician • Bayview
Onsite
RR
Ren Rich
Operations Supervisor • Regional
Remote

Avatar Sizes (xs, sm, md, lg, xl) and Group Stack

rounded-full bg-slate-brand-900 text-white flex items-center justify-center
☀️ Light Mode .light
XS
SM
MD
LG
XL
GG
RR
AM
+3
🌙 Dark Mode .dark
XS
SM
MD
LG
XL
GG
RR
AM
+3

Metric & Stat Cards (with Trend Indicators)

p-5 bg-surface border border-default rounded-card shadow-sm
☀️ Light Mode .light
BVL Flow Rate
1,045 scfm
+4.2% vs previous hour
Plant Uptime
96.4%
-0.8% below 97% target
Thermocouple Temp
1,682° F
High temp threshold active
🌙 Dark Mode .dark
BVL Flow Rate
1,045 scfm
+4.2% vs previous hour
Plant Uptime
96.4%
-0.8% below 97% target
Thermocouple Temp
1,682° F
High temp threshold active

Key-Value Description List & Code Display

divide-y divide-default / font-mono text-caption
☀️ Light Mode .light
Facility Coordinate: 37.7749° N, 122.4194° W
EPA Permit ID: EPA-CA-94102-LWD
Telemetry Cycle: 60 seconds
// Tailwind CSS v4 Theme Usage
<button class="bg-action text-on-action">
Add Entry
</button>
🌙 Dark Mode .dark
Facility Coordinate: 37.7749° N, 122.4194° W
EPA Permit ID: EPA-CA-94102-LWD
Telemetry Cycle: 60 seconds
// Tailwind CSS v4 Theme Usage
<button class="bg-action text-on-action">
Add Entry
</button>
Section 9 Editorial

Typography in Context (Prose Rhythm)

Evaluating text hierarchy, line height leading, and editorial reading rhythm.

Longform Article / Documentation Rhythm

space-y-4 text-body text-primary-content
☀️ Light Mode .light

Bayview Landfill Operational Overview

The Bayview Landfill (BVL) renewable energy facility utilizes active landfill gas (LFG) extraction to harvest methane generated by anaerobic decomposition. The system maintains continuous negative pressure across 48 vertical extraction wells, routing harvested gas through a primary manifold to the high-temperature flare station.

Wellfield Regulation & Methane Balancing

Field technicians monitor differential pressure and gas quality on a daily rotation. For technical standards, refer to the EPA NSPS Subpart WWW guidelines. Adjustments to wellhead control valves are logged into the central telemetry database within 15 minutes of modification.

"Maintaining methane concentrations between 45% and 55% while suppressing oxygen intrusion below 1.0% remains the critical baseline for uninterrupted operation."

Key Protocol Checklist

  • Header Vacuum Inspection: Minimum -20 in. w.c. maintained at compressor suction.
  • Flare Thermocouple Verification: Combustion temperature confirmed above 1,600°F.
  • Condensate Sump Discharge: Automated pneumatic pumps cycled and inspected weekly.
Note: Any unplanned trip lasting over 60 minutes requires notification to regional operations leadership.
🌙 Dark Mode .dark

Bayview Landfill Operational Overview

The Bayview Landfill (BVL) renewable energy facility utilizes active landfill gas (LFG) extraction to harvest methane generated by anaerobic decomposition. The system maintains continuous negative pressure across 48 vertical extraction wells, routing harvested gas through a primary manifold to the high-temperature flare station.

Wellfield Regulation & Methane Balancing

Field technicians monitor differential pressure and gas quality on a daily rotation. For technical standards, refer to the EPA NSPS Subpart WWW guidelines. Adjustments to wellhead control valves are logged into the central telemetry database within 15 minutes of modification.

"Maintaining methane concentrations between 45% and 55% while suppressing oxygen intrusion below 1.0% remains the critical baseline for uninterrupted operation."

Key Protocol Checklist

  • Header Vacuum Inspection: Minimum -20 in. w.c. maintained at compressor suction.
  • Flare Thermocouple Verification: Combustion temperature confirmed above 1,600°F.
  • Condensate Sump Discharge: Automated pneumatic pumps cycled and inspected weekly.
Note: Any unplanned trip lasting over 60 minutes requires notification to regional operations leadership.
Section 10 Compliance

Accessibility & Contrast Audits

Focus ring visibility, WCAG AA 4.5:1 / 3:1 contrast ratio verification, and reduced-motion handling.

Consistent Focus-Visible Indicator (2px Ring + Offset)

focus-visible:ring-2 focus-visible:ring-action focus-visible:ring-offset-2 focus-visible:ring-offset-page focus-visible:outline-none
☀️ Light Mode .light

Tab into the interactive elements below using keyboard navigation to verify high-contrast focus rings:

Focusable Link
🌙 Dark Mode .dark

Tab into the interactive elements below using keyboard navigation to verify high-contrast focus rings:

Focusable Link

WCAG AA Contrast Ratio Evaluation

Standards: 4.5:1 (Body), 3:1 (Large text)
Color Pair & UsageLight Mode RatioDark Mode RatioWCAG StatusRecommendation
text-primary-content on bg-page21.0:117.5:1AAA PassOptimal legibility.
text-on-action on bg-action4.88:14.52:1AA PassMeets 4.5:1 body threshold.
text-muted (#666666 / #a1a1aa) on bg-surface5.74:1 ✓5.48:1 ✓AA PassLightness adjusted from #808080 (3.95:1) to #666666; fully passes 4.5:1 for body and captions.
text-danger-text (#cc0000 / #ff6666) on bg-surface5.89:1 ✓5.08:1 ✓AA PassUsing danger-dark (#cc0000) in light mode and #ff6666 in dark mode.
text-success-text (#3d6600 / #8cd000) on bg-surface5.62:1 ✓7.45:1 ✓AA PassCalibrated deep lime (#3d6600) on white in light mode; accessible #8cd000 on dark surface and badge tints.
text-warning-text (#806000 / #fbbf24) on bg-surface5.85:1 ✓8.42:1 ✓AA PassUsing warning-dark (#806000) in light mode and amber-400 (#fbbf24) in dark mode.
border-border-input on bg-surface3.12:1 ✓3.40:1 ✓Non-Text PassSatisfies WCAG 2.1 Non-text contrast (3:1) for all interactive input boundaries.

Reduced Motion Compliance

motion-reduce:transition-none motion-reduce:animate-none
☀️ Light Mode .light

All animations and transitions in the theme utilize motion-reduce:transition-none and motion-reduce:animate-none to honor users' system accessibility settings.

OS prefers-reduced-motion respected across all CSS transforms.
🌙 Dark Mode .dark

All animations and transitions in the theme utilize motion-reduce:transition-none and motion-reduce:animate-none to honor users' system accessibility settings.

OS prefers-reduced-motion respected across all CSS transforms.