Astryx Sandbox

Components & Patterns

Mobile Prototypes

Interactive mobile interaction prototypes (bottom sheets, action sheets, drawers) for the component migration table

TextArea Counter

Explore where the character counter sits on the TextArea — below, inline with the label, or overlaid inside the field

Card Examples

Astryx components showcased in realistic card compositions

Table Overview

Data table patterns and configurations

Side Navigation

Side navigation layout patterns

Top Navigation

Top navigation bar with menu integration

Mega Menu

Full-width dropdown navigation menu

Link Patterns

Flexible link component with router integration

Motion Examples

Duration and easing tokens applied to common animation patterns

App Shell

Experiment with app shell layouts and navigation

Component Overview

General component composition examples

Tap Targets (AA)

WCAG 2.5.8 AA touch-target sizes visualized on real components

Themes

Neutral Palette

Neutral theme — pure grayscale spine, OKLCH categorical palette, vivid T60 semantic badges, soft T90 categorical pastels, Figtree typography

Stone Palette

Stone theme tonal palettes, badges, banners, inputs, and buttons in light and dark mode

Y2K Palette

Y2K pop theme — sharp corners, cream body, neon lime accent, Crimson Text display type

Gothic Palette

Gothic dark-only theme — atmospheric blue-gray, distressed display heading, pastel categorical accents

Butter Palette

Butter theme — golden buttery palette with blue accents, Sarina display, Outfit body & headings

Color Studio

Generate and explore color palettes from an accent color or image

Tools

Layout DSL

Write compressed XLE/XLO layout expressions and expand them to TSX with live token metrics

CodeBlock Perf

Compare highlight modes and scroll performance

Table Lab

Test any combination of Table plugins with live scroll FPS, dropped-frame, and re-render metrics

Foundations

Token reference docs with live theme previews — color, spacing, typography, and more

Media Mode

Compare luminance algorithms (BT.709 / WCAG 2 / APCA) for dark/light surface detection

Dictation Lab

Test voice dictation, tune sound effects, and explore animation

Mobile Type

How the type scale adapts on touch devices