Astra inventory dashboard

Live example

Try the sample interactions. Open the standalone demo for a full-width view. No data is sent to a server.

Verification results

Captured 2026-10-04T13:21:35.593Z in Chromium 153.0.8010.12. The checks below match the current example assets.

• Search, low-stock filtering, and empty results
• Quantity validation, loading, stock totals, and reset
• No horizontal page overflow at 1440px and 390px
• No browser runtime errors
• Automated WCAG A/AA checks at both viewports

Automated accessibility violations: 0. These checks cover the tested pages and states. They do not establish complete accessibility compliance.

• Desktop keeps the stock table beside a shorter adjustment panel.
• Mobile places summary labels and values on one row. The table has its own horizontal scroll area.

Recorded prompt and source

This implementation was produced by the coding agent from the saved themx setup, then corrected during browser verification. The ZIP contains runnable HTML, assets, source templates, tokens, documents, and the saved prompt. Source templates are built in the themx repository.

You are building a web application using Plain HTML with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Build a responsive inventory dashboard called Relay. Include a navigation sidebar, a searchable sample stock table, a low-stock filter, and a form that updates a sample quantity. Derive summary counts from the sample dataset. Include validation, empty results, loading, and success feedback. Label all data as demo content and keep changes local to the page.
Target users: Warehouse operators using tablets and laptops
Page purpose: Dashboard
Framework: Plain HTML
CSS approach: Tailwind
UI library: daisyUI
Tone: Professional

## Visual direction
Base theme: Astra (visual-style)
- Deep navy page background and opaque data panels
- Space Grotesk headings at 32-58px with compact IBM Plex Sans body text
- One orbital diagram as the main visual element
- Cyan action color, lavender secondary color, and amber attention color
- Thin panel borders, small corners, and no card shadows
- Left-aligned headings and unequal panel widths for information hierarchy

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #73DFF5, secondary #A0ABFF, accent #F5BC68, background #080F1C, text #ECF3FF
Typography: Space Grotesk for headings, IBM Plex Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #080F1C;
  --tx-font-heading: "Space Grotesk", sans-serif;
  --tx-font-body: "IBM Plex Sans", sans-serif;
  --tx-surface-bg-image: radial-gradient(circle at 82% 20%, rgba(115,223,245,0.06), transparent 32%);
  --tx-card-bg: #111C2E;
  --tx-card-border: #34465F;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.375rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #73DFF5;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 600;
  --tx-font-body-weight: 400;
  --tx-text-muted: #B3C4DB;
  --tx-text-subtle: #94A9C4;
  --tx-link-color: #73DFF5;
  --tx-button-radius: 0.375rem;
  --tx-input-bg: #080F1C;
  --tx-input-border: #526985;
  --tx-text: #ECF3FF;
  --tx-primary: #73DFF5;
  --tx-secondary: #A0ABFF;
  --tx-accent: #F5BC68;
  --tx-media-filter: none;
}

@plugin "daisyui" {
  themes: false;
}

@plugin "daisyui/theme" {
  name: "themx";
  default: true;
  prefersdark: false;
  color-scheme: dark;
  --color-base-100: var(--tx-surface-bg);
  --color-base-200: var(--tx-card-bg);
  --color-base-300: var(--tx-card-bg);
  --color-base-content: var(--tx-text);
  --color-primary: var(--tx-primary);
  --color-primary-content: #000000;
  --color-secondary: var(--tx-secondary);
  --color-secondary-content: #000000;
  --color-accent: var(--tx-accent);
  --color-accent-content: #000000;
  --color-neutral: var(--tx-text);
  --color-neutral-content: var(--tx-surface-bg);
  --color-info: #2563EB;
  --color-info-content: #FFFFFF;
  --color-success: #15803D;
  --color-success-content: #FFFFFF;
  --color-warning: #FACC15;
  --color-warning-content: #000000;
  --color-error: #B91C1C;
  --color-error-content: #FFFFFF;
  --radius-selector: var(--tx-button-radius);
  --radius-field: var(--tx-button-radius);
  --radius-box: var(--tx-card-radius);
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: var(--tx-card-border-width);
  --depth: 0;
  --noise: 0;
}
```
The mapping targets Tailwind CSS 4. Merge it into the existing Tailwind stylesheet after its imports.
Read installed package versions first. Ask before migrating an existing project to a different major version.
Use library components for controls. Apply the --tx-* surface, shadow, blur, and font values where the library tokens do not cover them.
This export describes one selected color mode. Preserve any other supported modes and scope these tokens to the intended mode.
Use daisyUI 5 component classes such as btn, input, card, and table. Activate the custom theme with data-theme="themx".
Keep status colors separate from brand accents. Preserve existing themes when merging the example plugin configuration.
Reference: https://daisyui.com/docs/themes/

## Layout
- Use left-aligned content and a consistent 8px spacing scale. Place one orbital diagram beside the main heading. Keep data panels below it.
- Use a wider primary data panel beside narrower supporting panels. Collapse panels and the diagram to one column on narrow screens.

## Interaction
- Use cyan borders for selected controls and amber for attention states. Include a text label with each status.
- Keep orbital motion optional and limited to the decorative diagram. Stop it when reduced motion is requested. Keep data and controls stationary.

## Additional user requirements
These explicit requirements take precedence over general layout and interaction defaults. Report any conflict with exact tokens before changing them.
Layout: Keep stock levels prominent. Use one orbital illustration beside the heading. Stack panels on phones and keep wide tables in a labeled scroll region.
Interaction: Search and filters must update the table. Validate whole-number quantities. Provide a reset action and visible confirmation for local demo updates.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Astra: Long reading pages or playful shopping experiences that need a light visual tone.

## Components
Generate the following components in this style:
- Sidebar
- Tables
- Forms
- Buttons

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Supporting skills
Use these skills if they are installed in the target agent. If unavailable, report that and follow the supplied design requirements. Installation commands are references for the user; do not run them automatically.
- daisyUI: https://daisyui.com/skills/daisyui/
  Purpose: Use daisyUI components and its custom theme API.
  Install: npx skills add saadeghi/daisyui
- Anti-slop: https://github.com/miqdadbadjuber/anti-slop
  Purpose: Check content, controls, and decoration against the selected design direction.
  Install: npx skills add miqdadbadjuber/anti-slop
Use antislop during for this session.
The chosen theme and layers are intentional. Check their purpose and implementation. If a skill rule conflicts with them, identify the conflict and ask the user to keep or change the named element.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.