picotol Semantic Kitchen Sink

100% pure modern CSS • Strictly Paul Tol colour sets • Zero Sass • LightningCSS AST-minified

1. Bundle Size & WCAG 2.2 Contrast Scorecard

Core Bundle (picotol.core.min.css)

12184 bytes (11.90 KB minified · 4040 B gzip)

Full Bundle (picotol.min.css)

32079 bytes (31.33 KB minified · 7653 B gzip)

Layer Build (picotol.layer.min.css)

32095 bytes (31.34 KB minified · 7656 B gzip)

Host Cascade Integration (@layer picotol): For applications using CSS @layer, import the layered build to guarantee seamless token overriding without specificity conflicts:

@layer host, picotol, overrides;
@import "@kidthales/picotol/layer";

How to read contrast ratios: Luminance contrast ranges from 1:1 (invisible) to 21:1 (pure black on white). ✓ AAA (≥ 7.0:1) is the highest W3C tier (enhanced low-vision legibility); ✓ AA (≥ 4.5:1) is the standard pass threshold for normal body text and UI controls.

Accent (`[data-accent]`)	Light Link / Primary vs `#FFF`	Light Button Fill vs `#000`	Dark Link / Primary vs `#000`	Dark Button Fill vs `#FFF`
`blue`	`#2255AA` · 7.12:1 ✓ AAA (--tol-dark-3) Hover: `#004488` · 9.62:1 ✓ AAA	`#AACCEE` · 12.58:1 ✓ AAA (--tol-pale-0) Hover: `#77AADD` · 8.58:1 ✓ AAA	`#77AADD` · 8.58:1 ✓ AAA (--tol-light-blue) Hover: `#AACCEE` · 12.58:1 ✓ AAA	`#2255AA` · 7.12:1 ✓ AAA (--tol-dark-3) Hover: `#4477AA` · 4.70:1 ✓ AA
`cyan`	`#117788` · 5.23:1 ✓ AA (--tol-dark-6) Hover: `#004488` · 9.62:1 ✓ AAA	`#CCEEFF` · 17.24:1 ✓ AAA (--tol-pale-1) Hover: `#99DDFF` · 14.14:1 ✓ AAA	`#99DDFF` · 14.14:1 ✓ AAA (--tol-light-cyan) Hover: `#CCEEFF` · 17.24:1 ✓ AAA	`#117788` · 5.23:1 ✓ AA (--tol-dark-6) Hover: `#0077BB` · 4.82:1 ✓ AA
`purple`	`#762A83` · 8.64:1 ✓ AAA (--tol-prgn-0) Hover: `#332288` · 12.17:1 ✓ AAA	`#E7D4E8` · 14.98:1 ✓ AAA (--tol-prgn-3) Hover: `#C2A5CF` · 9.58:1 ✓ AAA	`#C2A5CF` · 9.58:1 ✓ AAA (--tol-prgn-2) Hover: `#E7D4E8` · 14.98:1 ✓ AAA	`#762A83` · 8.64:1 ✓ AAA (--tol-prgn-0) Hover: `#AA4499` · 5.26:1 ✓ AA
`magenta`	`#993366` · 6.95:1 ✓ AA (--tol-dark-4) Hover: `#882255` · 8.73:1 ✓ AAA	`#EEBBDD` · 12.79:1 ✓ AAA (--tol-pale-5) Hover: `#FFAABB` · 11.72:1 ✓ AAA	`#FFAABB` · 11.72:1 ✓ AAA (--tol-light-pink) Hover: `#EEBBDD` · 12.79:1 ✓ AAA	`#993366` · 6.95:1 ✓ AA (--tol-dark-4) Hover: `#BB4488` · 4.89:1 ✓ AA

2. Concurrent Subtree Theming

Picotol provides container-level [data-accent] scoping without color-scheme leakage. Multiple distinct accent trees run concurrently side-by-side in isolated container scopes with distinct buttons, switches, badges, and progress indicators.

Blue Subtree

Blue Accent Neutral

Active Switch

Cyan Subtree

Cyan Accent Neutral

Active Switch

Purple Subtree

Purple Accent Neutral

Active Switch

Magenta Subtree

Magenta Accent Neutral

Active Switch

3. Typography & Inline Semantics

Body copy uses the system font stack with fluid root sizing via clamp(100%, 95% + 0.4vw, 125%) and an opt-in 75ch reading measure via :where(.measure, .prose). Links like primary link, secondary link, contrast link, and external link (opens in a new tab) step along Paul Tol's qualitative lightness ladder on hover.

Inline elements include strong, emphasis, highlighted mark, inserted text, ~~deleted text~~, inline code, Ctrl + K, and PTCS (hover or focus for tooltip).

"The contrast ratio between each colour in the dark scheme and white is at least 4.5 for people with moderately low vision."
— Paul Tol, SRON Notes on Colour Schemes

Unordered List

Qualitative schemes: Bright, High-Contrast, Vibrant, Muted
Cell-highlight schemes: Pale and Light
Text & line scheme: Dark

Preformatted Code

:root {
  color-scheme: light dark;
  --pt-bg: light-dark(var(--tol-white), var(--tol-black));
}

4. Buttons & Role Variants

Connected Button Group Toolbar

Class Parity (.btn, .button) & Compact Sizing (.small, .sm)

Link as .btn Link as .button

Dedicated Square Icon Buttons (`.btn-icon`, `.icon-btn`)

5. Native Forms & Extended Controls

Project Name Scheme Family

Verified Input (aria-invalid="false") Matches Paul Tol Bright Blue.

Invalid Input (aria-invalid="true") Hex literal is not in tol-palettes.

Attachment Upload

Accent Color Sample

Release Notes & Specification

Preferences & Controls Enforce Hex Purity Enable Dark Mode Sync Core Bundle Full Bundle

Contrast Threshold Range

Horizontal Form Row Alignment (.form-row, .inline-form)

6. Semantic Data Tables & Operational Monitor

Data tables feature automatic tabular numeric alignment, alternating zebra stripes via table.striped, status dot indicators, and horizontal scrolling via responsive figure:has(> table) and .overflow-auto.

Cluster Infrastructure Node Fleet Status (Production US-East)

Node ID	Region	CPU %	Memory	Latency	Status
`edge-us-east-01`	us-east-1a	24.5%	3.8 / 16 GB	12 ms	Operational
`edge-us-east-02`	us-east-1b	78.2%	14.1 / 16 GB	28 ms	Warning
`edge-us-east-03`	us-east-1c	96.8%	15.9 / 16 GB	145 ms	Critical
`edge-us-east-04`	us-east-1d	18.0%	2.4 / 16 GB	9 ms	Operational
Cluster Average / Total	4 Active Nodes	54.4% Avg	36.2 / 64 GB	48 ms P95	4 Monitored

Table Container Utility (`.overflow-auto` / `.table-container`)

Multi-column wide tabular datasets wrapped in .overflow-auto or .table-container maintain localized horizontal scrolling without window blowouts:

Service Name	Health	Inbound RPS	Outbound RPS	Error Rate	P50	P99	Replica Count	Uptime	Host Zone
auth-service	Healthy	1,240 req/s	1,180 req/s	0.01%	4.2 ms	18.4 ms	8 / 8	99.99%	`us-east-1a`
billing-gateway	Degraded	420 req/s	390 req/s	1.45%	42.1 ms	280.0 ms	4 / 4	99.82%	`us-east-1b`
telemetry-pipe	Healthy	18,500 req/s	18,490 req/s	0.00%	1.1 ms	6.8 ms	16 / 16	100.0%	`us-east-1c`
worker-ingest	Failing	85 req/s	12 req/s	24.8%	340.5 ms	1,820 ms	1 / 4	98.12%	`us-east-1d`

7. Extended Components

Accordion: Why drop Sass/SCSS?

Modern Baseline CSS provides light-dark(), color-mix(), clamp(), and @layer natively, eliminating 3x duplicated variable blocks and shrinking the stylesheet by over 85%.

Accordion: Strict Paul Tol Lightness Ladder

All solid UI states step across pale, light, medium-contrast, bright, dark, and high-contrast schemes.

Progress Indicator

Dropdown Menu & Modal Dialog

Slide-Over Drawers (<dialog class="sheet">)

Card Component Parity (<article> vs .card)

Native <article> Card

Semantic HTML5 article element styled automatically with zero classes.

Class Parity .card

Generic div or section styled with .card for ergonomic framework interoperability.

Status Dots & Narrow-Corridor Reflow

Paul Tol Status Dots (.status-dot)

Operational .status-dot.success

Warning .status-dot.warning

Critical .status-dot.danger

Active .status-dot.info

Neutral .status-dot.neutral

Idle .status-dot.idle

Badge & Dot Pairing

Cluster Healthy

Memory Pressure

Node Offline

Job Running

Service Idle

Flex gap layout (.no-margin / .m-0)

Narrow-Corridor Reflow (320px)

Flex and grid children declare min-width: 0 to prevent wide controls or long titles from blowing out containers.

High-Density Flex Containment (gap: 4px)

Child section, article, and hr elements automatically zero their block margins in flex and grid containers, preventing compound spacing.

Flex Shell (gap: 4px)

Tier 1 Section (margin-bottom: 0)

Tier 2 Card (margin-bottom: 0)

Compact Mode & Tabular Numerics (`[data-density="compact"]` / `.pt-compact` / `.pt-tabular`)

Standard Density

Default density uses standard spacing tokens and typography scale.

Row A Latency: 1,234.56 ms

Row B Latency: 0,098.10 ms

Compact Mode (data-density="compact")

Micro-type scale, tighter card padding, and compressed control spacing for data-dense dashboards.

Throughput: 142,857 req/s

Latency P99: 012.45 ms

Compact Utility (.pt-compact)

Applied via class modifier to any container or component.

Meters, Progressbars & Gauge Threshold Pins (`.pt-progress` / `.pt-gauge-marker`)

Native <progress> & Status

Default accent, compact height, and Paul Tol semantic modifiers.

Accessible Fallback (.pt-progress)

Cross-webview fallback with explicit role="progressbar" and ARIA semantics.

Gauge Threshold Markers (.pt-meter)

Positioned threshold pins with tabular labels and semantic indicators.

80% SLA

70% Warn

90% Crit

Accessible Callouts, Status Dots & Copy Pills (`.pt-callout` / `.pt-copy-pill`)

Native Accessible Disclosures, Accordion Cards & Popovers (`.pt-details` / `.accordion-card` / `.pt-popover`)

Platform Architecture & Layer Isolation

Strict four-layer cascade isolation ensures design tokens and reset styles never bleed into extended component boundaries.

Zero-JS Keyboard & Screen Reader Accessibility

Native HTML5 <details> and <summary> elements provide keyboard navigation (Enter / Space) and screen reader announcements without runtime JavaScript.

Monotonic Greyscale Luminance Separation

Every severity tier (critical, warning, notice) is certified to maintain distinct relative luminance steps across greyscale conversions.

Standalone Collapsible Card (.pt-card-disclosure)

Self-contained disclosure card with integrated surface styling, elevated header transition, and flush content padding.

Equal-Fill Segmented Controls (`.segmented.segmented-fill` / `.segmented-equal`)

Equal distribution across items (flex: 1 1 0) with automatic text ellipsis on narrow containers.

Toolbar mode switch with .segmented-equal alias and compact viewport resilience.

8. Operational Dashboard Console

A simulated real-time operational monitor featuring accessible tabpanel switching, zero-CLS skeleton loading transitions, KPI metric stat cards, and status alerts.

Total Network Throughput: 1.42 TB
Active Edge Clusters: 128 / 130
Mean Edge Latency: 18.4 ms
Unresolved Error Rate: 0.012%

CPU Fleet Utilization

42.8%

Memory Allocation

64.2%

[2026-10-19T18:20:00Z] INFO [telemetry] Heartbeat verified for 128 nodes.
[2026-10-19T18:22:15Z] WARN [ingress] High burst load detected on us-east-1c (96.8% CPU).
[2026-10-19T18:24:00Z] INFO [orchestrator] Autoscaled +4 container instances.

Neutral Badge Primary Accent Active Warning Failed Purple Accent

9. Paul Tol Canonical Palette Explorer

Explore canonical color-blind safe palettes authored by Dr. Paul Tol. Click any swatch or token to copy its CSS custom property to the clipboard.

--tol-bright-blue

#4477AA bright

--tol-bright-red

#EE6677 bright

--tol-bright-green

#228833 bright

--tol-bright-yellow

#CCBB44 bright

--tol-bright-cyan

#66CCEE bright

--tol-bright-purple

#AA3377 bright

--tol-bright-grey

#BBBBBB bright

--tol-dark-0

#4477BB dark

--tol-dark-1

#CC4466 dark

--tol-dark-2

#228833 dark

--tol-dark-3

#2255AA dark

--tol-dark-4

#993366 dark

--tol-dark-5

#006644 dark

--tol-dark-6

#117788 dark

--tol-dark-7

#882288 dark

--tol-dark-8

#BB4488 dark

--tol-dark-9

#775500 dark

--tol-dark-10

#444444 dark

--tol-hc-blue

#004488 high-contrast

--tol-hc-yellow

#DDAA33 high-contrast

--tol-hc-red

#BB5566 high-contrast

--tol-light-blue

#77AADD light

--tol-light-orange

#EE8866 light

--tol-light-yellow

#EEDD88 light

--tol-light-pink

#FFAABB light

--tol-light-cyan

#99DDFF light

--tol-light-mint

#44BB99 light

--tol-light-pear

#BBCC33 light

--tol-light-olive

#AAAA00 light

--tol-light-pale-grey

#DDDDDD light

--tol-mc-blue

#6699CC medium-contrast

--tol-mc-dark-blue

#004488 medium-contrast

--tol-mc-yellow

#EECC66 medium-contrast

--tol-mc-dark-red

#994455 medium-contrast

--tol-mc-dark-yellow

#997700 medium-contrast

--tol-mc-red

#EE99AA medium-contrast

--tol-muted-rose

#CC6677 muted

--tol-muted-indigo

#332288 muted

--tol-muted-sand

#DDCC77 muted

--tol-muted-green

#117733 muted

--tol-muted-cyan

#88CCEE muted

--tol-muted-wine

#882255 muted

--tol-muted-teal

#44AA99 muted

--tol-muted-olive

#999933 muted

--tol-muted-purple

#AA4499 muted

--tol-pale-0

#AACCEE pale

--tol-pale-1

#CCEEFF pale

--tol-pale-2

#BBDDBB pale

--tol-pale-3

#EEEEBB pale

--tol-pale-4

#FFBBCC pale

--tol-pale-5

#EEBBDD pale

--tol-pale-6

#DDDDDD pale

--tol-vibrant-orange

#EE7733 vibrant

--tol-vibrant-blue

#0077BB vibrant

--tol-vibrant-cyan

#33BBEE vibrant

--tol-vibrant-magenta

#EE3377 vibrant

--tol-vibrant-red

#CC3311 vibrant

--tol-vibrant-teal

#009988 vibrant

--tol-vibrant-grey

#BBBBBB vibrant

1. Bundle Size & WCAG 2.2 Contrast Scorecard

2. Concurrent Subtree Theming

3. Typography & Inline Semantics

Unordered List

Preformatted Code

4. Buttons & Role Variants

Connected Button Group Toolbar

Class Parity (.btn, .button) & Compact Sizing (.small, .sm)

Dedicated Square Icon Buttons (.btn-icon, .icon-btn)

5. Native Forms & Extended Controls

Horizontal Form Row Alignment (.form-row, .inline-form)

6. Semantic Data Tables & Operational Monitor

Table Container Utility (.overflow-auto / .table-container)

7. Extended Components

Card Component Parity (<article> vs .card)

Status Dots & Narrow-Corridor Reflow

Compact Mode & Tabular Numerics ([data-density="compact"] / .pt-compact / .pt-tabular)

Meters, Progressbars & Gauge Threshold Pins (.pt-progress / .pt-gauge-marker)

Accessible Callouts, Status Dots & Copy Pills (.pt-callout / .pt-copy-pill)

Native Accessible Disclosures, Accordion Cards & Popovers (.pt-details / .accordion-card / .pt-popover)

Equal-Fill Segmented Controls (.segmented.segmented-fill / .segmented-equal)

8. Operational Dashboard Console

9. Paul Tol Canonical Palette Explorer

Dedicated Square Icon Buttons (`.btn-icon`, `.icon-btn`)

Table Container Utility (`.overflow-auto` / `.table-container`)

Compact Mode & Tabular Numerics (`[data-density="compact"]` / `.pt-compact` / `.pt-tabular`)

Meters, Progressbars & Gauge Threshold Pins (`.pt-progress` / `.pt-gauge-marker`)

Accessible Callouts, Status Dots & Copy Pills (`.pt-callout` / `.pt-copy-pill`)

Native Accessible Disclosures, Accordion Cards & Popovers (`.pt-details` / `.accordion-card` / `.pt-popover`)

Equal-Fill Segmented Controls (`.segmented.segmented-fill` / `.segmented-equal`)