V2 Specification Single Source of Truth: tokens.ts

Doxt Design System V2

A high-precision, brutalist design catalog built for high-density workplace operations, timesheet auditing, and shift scheduling interfaces. Engineered with zero-blue interaction rules, dual-theme dark/light tokens, and fluid viewport scaling.

Dual-Theme Parity

Seamless switching between solid dark charcoal and clean light surface tokens.

Zero-Blue Policy

High-contrast neutral backgrounds with purposeful functional color indicators.

Responsive Matrix

Live breakpoint scaling for typography, grid layouts, and touch targets across XS to XXL.

Developer Parity

All catalog components directly map to Tailwind tokens in tokens.ts.

Official Technology Stack

Native React Router v7 (Remix) architecture powering Doxt Admin Dashboard, Kiosk Terminal, PWA & Google Play Store (TWA) Apps.

REACT ROUTER v7 (REMIX)
React Router v7 Remix Framework
Vite Build Engine & HMR
Cloudflare Edge Workers
Supabase Postgres & RLS
GitHub VCS & CI/CD
Tailwind CSS Design Tokens
TypeScript Type-Safe Schema
Google Play Android TWA App
PWA Offline SW Cache

Multi-App Workspace Ecosystem

3 targeted web application targets consuming unified tokens from shared design primitives.

3 APPS + 1 SHARED CORE
CLIENT & KIOSK APP

Employee Portal & Kiosk Terminal

Touchscreen PIN clock-in, shift bidding, bulletins feed, mobile eSign onboarding, and native Android TWA / PWA offline capabilities.

Target: Employee/Staff Client Tier
ADMIN APP

Developer Control Center & System Admin

Internal application strictly for you (the developer) to manage your projects, client tenant accounts, system logs, and global platform settings.

Target: Platform Developer Internal Developer Tier
MARKETING SITE

Public Site & Onboarding Portal

Public product landing pages, pricing calculators, feature tours, and organization signup flows.

Target: Public / Prospects Public Tier

Stack Interaction & Data Flow Architecture

How design tokens, Remix SSR, Cloudflare edge, and Supabase database communicate.

SYSTEM ARCHITECTURE

1. GitHub Monorepo

Shared codebase & tokens in shared/src/design

2. Cloudflare & Vite

Builds Remix routes & deploys to Edge Workers

3. Remix App Layer

Renders Client, Admin & Marketing UI using tokens.ts

4. Supabase DB & Auth

Postgres storage, RLS security policies & Realtime

Tokens Source: @doxt/core/design/tokens.ts

Actor-to-Actor Interaction Protocol

1. GitHub ➔ Cloudflare Pages CI/CD Deploy

Pushing commits to GitHub triggers Cloudflare Pages CI/CD build scripts, compiling Remix routes via Vite and deploying globally to Edge Workers.

2. Remix Apps ➔ @doxt/core Design Contract

Client, Admin, and Marketing Remix components import design tokens directly from tokens.ts, guaranteeing visual parity.

3. Apps ➔ Remix Server (Loaders/Actions) Edge Data Flow

User inputs (PIN punches, shift audits) invoke Remix action() handlers on Cloudflare Workers, keeping logic secure at the edge.

4. Remix Server ➔ Supabase DB (RLS) Database Queries

Remix edge server queries Supabase PostgreSQL via SDK using Row Level Security (RLS) policies scoped strictly to organization UUIDs.

5. Supabase Realtime ➔ Live Kiosk & Admin WebSockets

When employees punch in at a kiosk terminal, Supabase Realtime broadcasts WebSocket updates to instantly refresh Admin Dashboard stat counters.

6. Client / Admin ➔ Supabase Storage Audit Vault

Completed eSign tax forms and exported payroll CSV reports upload directly to encrypted Supabase Storage buckets with audit URLs.

Live Operational Sequence Flow Diagram

Step-by-step request lifecycle from employee touchscreen action to realtime admin update.

REALTIME SEQUENCE
A
Scenario 1: Employee PIN Clock-In ➔ Realtime Admin Dashboard Sync
1. Kiosk Input

Staff Enters PIN

Touchscreen Kiosk
2. Remix Action

Cloudflare Edge

Validates Session
3. Supabase RLS

Postgres Insert

Writes to DB
Supabase Realtime Channel: Broadcasts INSERT public.punches
Admin App Stats Auto-Refresh
B
Scenario 2: Platform Owner Project & Client Audit Export
1. Admin Action

Owner Clicks Export

Admin Dashboard
2. Edge Aggregation

Calculates Overtime

Remix Loader
3. Storage Upload

Encrypted CSV/PDF

Supabase Bucket

WCAG AA Design Token Accessibility Audit

Verified contrast ratios for core surface and typography tokens across light and dark modes.

WCAG AA PASSED (5.21:1+)
Dark Mode: Muted Text on Elevated Surface

5.21 : 1 Ratio

#9ca3af on #2f2f35 — Pass WCAG AA
Dark Mode: Muted Text on Canvas

7.69 : 1 Ratio

#9ca3af on #101012 — Pass WCAG AAA
Light Mode: Muted Text on Canvas

4.88 : 1 Ratio

#6c757d on #ffffff — Pass WCAG AA