Quiet surfaces
Charcoal establishes the workspace. Layered surfaces separate navigation, content, and inspection without heavy shadows.
Pixie Dust · v0.1 · Application design kit
Scattered possibilities.
One coherent system.
The website’s charcoal, lime, and particle language becomes a practical interface for recording workflows, publishing APIs, and understanding agent decisions.
01 / Foundations
Purposeful lime
Lime identifies a primary action, selection, or active execution. Success has its own color and an explicit label.
Evidence before spectacle
Motion follows recorded events. The graph explains what happened; it never implies verification that has not occurred.
Color roles
Typography & rhythm
DM Sans / interface
16px body · 14px controls and tables · 12px secondary metadata. Page titles use 32px; panel titles use 18–20px.
Reserve the website’s oversized typography for onboarding or brand moments. Keep app letter spacing natural.
Space Mono / technical detail
POST /v1/…
run_42 · revision 3
Use for endpoint paths, IDs, code, and measurements. Self-host fonts in the app; system fallbacks are supplied.
Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48px. Corners: 6px controls, 10px panels, 16px overlays. Controls: at least 44px tall. Borders for controls are stronger than decorative panel dividers.
02 / Component language
Actions
One primary action per working region. Explain unavailable actions nearby. Destructive actions use a confirmation dialog in the app.
Interactive specimen. No browser or API call will run.
Input & validation
States are words, not just colors
DraftRunning✓ Accepted! Needs review× FailedWaiting for input
Published describes a workflow revision. Accepted describes a verified run result. Keep authoring state, execution state, and verification state separate.
Result needs review
The browser finished, but the task count did not match the expected result. Inspect the verification evidence before using this output.
The browser finished, but the task count did not match the expected result. Inspect the verification evidence before using this output.
03 / Studio patterns
A persistent navigation rail, a task-focused workspace, and an inspection panel when needed. On narrow screens, collapse navigation into an accessible menu and stack details below the primary content.
SYNTHETIC DESIGN EXAMPLE · NOT A LIVE RUN
List Todo tasks
✓ Acceptedrun_example · revision 3
Request
Input validated
Jev decision
Action proposed
Policy
Read allowed
Verification
Checks passed
| Checkpoint | Proposed action | Policy | Verification |
|---|---|---|---|
| Open task list | CLICK | Allowed | List visible |
| Read tasks | EXTRACT | Allowed | Count matched |
Recorder
Make recording state explicit. Separate the browser viewport from captured steps. Always offer a clear stop action.
API explorer
Keep method, endpoint, revision, inputs, and results together. Separate returned HTTP status from accepted business outcome.
Decision inspector
Selecting a graph node should reveal the same event in the evidence table. Provide a keyboard-accessible timeline alternative.
04 / Dust with a purpose
Brand moments
Particles may gather into the wordmark on welcome screens and the website. Keep them behind content and provide a pause control.
Execution flow
A short pulse follows an actual event along a graph edge. A running state may repeat subtly; a completed step becomes still.
Working surfaces
No ambient dust beneath code, forms, tables, or evidence. Reading and editing should not compete with motion.
120ms hover/focus · 200ms panel transitions · up to 400ms one-shot reveals. Honor reduced motion with static states, stop background rendering when hidden, and never use animation alone to communicate progress.
05 / Bring it into Pixie
Use the token stylesheet as the source of truth. The component classes are lightweight specimens; preserve the app’s existing accessible React components and behavior.
import './design-system/tokens.css';
<div data-pixie>
<section className="px-panel">
<button className="px-button">Run test</button>
</section>
</div>Download CSS tokens and component styles · Read the integration guide
- Introduce scoped tokens and fonts.
- Map Studio’s existing color variables to the new tokens.
- Update buttons, fields, tables, and state badges.
- Apply the graph and inspector rules without changing execution logic.
- Check keyboard use, 200% zoom, mobile layouts, contrast, and reduced motion.
This kit is a design reference. It has not yet been applied to the running Pixie application.