// Component showcase v0.0.1

Panels, buttons,
notched components

The chrome layer — chamfered hairline panels, Oxanium type, and composable notched-panel web components. For the live instruments, see the home console; for the CSS primitive reference, the gallery.

// 01 — Panels
// 02 — Buttons
// 03 — Notched panels (web components)
SYS://PANEL

Corners + top notch

SYS://PANEL

Side notches

// 04 — Live components
Online Build 0.0.1 Beta MIT
Components 48 CSS + WC
Token vars 120+ retheme on :root
Bundle 0 JS CSS-only core
Dogfooded
This page and the docs are built from Talos UI itself — every panel, badge, stat card, and code block is a library component.
// 05 — Interaction

Pointer affordances bound to the same law as the instruments: the sheen tracks pointer presence, the activity edge spins at a rate, the readout decodes when its value changes.

SHEEN

Pointer-tracked

Move across me.

ACTIVITY EDGE

Rate-bound ring

Speed = throughput.

// Panel composition

The same chamfered chrome, composed into a bento mosaic — title, service, toolkit, and project panels share one outline language.

Component library

Every panel is the same chamfered chrome — composed into a bento mosaic.

Design systems

Token-driven, framework-agnostic UI that scales across Astro and Laravel.


  • Plain-CSS core

    No Tailwind required to consume the look.

  • Web components

    Composable notched panels via custom elements.

  • Astro wrappers

    Ergonomic .astro components for the common cases.

SYS://SERVICE
Toolkit

Expert

Astro TypeScript CSS Laravel Bun

Working

Web Components Vite PHP SQLite

talos-ui

This design system — monochrome HUD chrome packaged for reuse.

cssastro

tesseract-dash

Hardware telemetry dashboard — rings, sparklines, scatter.

dashboardcanvas

shelfwood.co

The studio site — origin of the refined monochrome direction.

astro