Design SystemWCAG AA Compliant4px Geometry / 8px Modals

RAT Component Library & Tokens

Accessible educational primitives built with Next.js 16, Radix UI, semantic HTML, and neutral semantic tokens based on the Parchment Atelier specification.

1. Semantic Tokens & Contrast Ratios

Normalized 6-digit Hex

Canvas

#f7f7f4

13.9:1 vs Ink

Card

#f2f1ed

13.2:1 vs Ink

Elevated

#e6e5e0

11.8:1 vs Ink

Ink (Text/CTA)

#26251e

AAA 13.9:1

Ember (Accent)

#f54e00

AA 4.7:1 (Text)

Forest (Success)

#34785c

AA 4.8:1

2. Button Component & States

Primary (#26251e on #f7f7f4) / Secondary (#e6e5e0)

Variants & Actions

Interaction States (Loading, Disabled, Sizes)

3. Modals & Dialogs (Radix UI)

8px Corners / Focus Trapping & Restoration

4. Menus, Selects & Tabs (Radix UI)

Keyboard Arrow Navigation

Relation Dataset (Radix Select)

Action Menu (Radix Dropdown)

Accessible Tabs

Overview panel presenting query statistics and relation card summaries.

5. Form Controls & Validation States

aria-invalid / aria-describedby

Relation Name

Identifier for the in-memory relation table.

Algebraic Predicate (Invalid State Demo)

Syntax Error: Missing closing parenthesis in selection predicate.

Relational Algebra Expression Editor

Press Shift+Enter to evaluate the query.

6. Semantic HTML Tables & Tuples

Employees evaluation result set (3 tuples matched).
ID	Name	Department	Salary
101	Alice Chen	Systems	$112,000
102	Marcus Bell	Databases	$98,500
103	Sofia Rodriguez	Theory	$104,000

Accessible Empty State

No Tuples Matched the Selection Predicate

The predicate 'salary > 200000' evaluated to false for all records in the target relation.

7. Metadata Tags, Code Snippets & Sandbox Frame

4px Corner Geometry

Metadata Tags (Mono)

schema: v1.0emphasis: ember-onlystatus: validatedoptimizer: runningsyntax: unclosed

Terminal Code Block

$rat compile --expression 'σ dept_id=1(Employees)' --target sql

RAT Expression Sandbox

π name, dept ( Employees )