Strata Design System Demo

From project setup to a branded product flow.

This demo uses live components from your selected project and places them into a realistic three-part experience: setup, customer-facing flow, and analytics follow-up.

Ready 0 components API: Production Last opened: none

Ready. Select a project to begin.

🌍 Current Environment: Production

https://api-production-charisol-design-system-be.aws.charisol.io

● Ready

Section 1

Pick and configure your project

Project discovery

Search projects

0 projectsWaiting for project

Access details

Enter a project ID and click connect to detect if token access is needed.

Section 2

Branded application flow built from base components

Main experience canvas

Primary component

Pick a component to anchor the flow.

View mode

Preview background

Apply project tokens to

No component selectedWaiting for data…

User journey composition

See how your default components can power a complete product motion.

1. Onboarding

Forms, buttons, and messaging establish identity and intent.

2. Workspace

Cards, nav, and interactive primitives build the core app experience.

3. Confirmation

Feedback states and utility components close the flow with trust.

These steps are backed by the live component payload from your project and rendered in the canvas.

Live Playground

Write your own code and see it live

HTML/CSS/JS Editor

Select Component to Insert

No components loaded. Connect to a project first.

<div>
  <h1>Welcome to the Playground!</h1>
  <p>Connect to a project first to see available components.</p>
  <p class="hint" style="color: #666; font-style: italic;">Once connected, you'll be able to insert components from your project here.</p>
  <div id="primary-component-sync-area" style="margin-top: 20px;">
    <p style="margin: 0 0 8px 0; font-weight: bold; color: #1e3a8a;">✨</p>
    <div id="synced-component-container"></div>
  </div>
</div>

h1 {
  color: #333;
  font-size: 32px;
  margin-bottom: 20px;
}

p {
  color: #666;
  margin-bottom: 20px;
}

.hint {
  color: #999;
  font-size: 14px;
}

console.log('Playground ready! Connect to a project to use components.');

Auto-run on changes

Live Preview

📚 Component Templates

Templates will use components available in your connected project

Connect to a project to see available templates.

Section 3

Post-launch statistics and diagnostics

Visual Impact (Before → Live)

No token diff yet

Highlights new, changed, and removed tokens by category.

Asset-First Analysis

No assets analyzed yet.