Theme studio
Edit, inspect, export and re-import the actual theme contract.
Production contracts
The theme studio edits the production ThemeDefinition. Search and edit every contract token, select scheme/density/named axes, apply a validated draft, or reset only the current editor-owned context override. Use @token.name for aliases. Palette rebuilding is explicit; changing a seed alone does not regenerate companion colors.
JSON import validates portable data and all references. JSON export preserves editable source. CSS output is generated and is not authoritative. Clipboard permission failure leaves the editable export visible.
Separate customization plane
The component sheet studio edits the production ComponentSheet against a ComponentDescriptor. Visual defaults, named part/state/variant rules, responsive conditions and source JSON compile to actual CSS and a ComponentProfile. The preview renders a real exported Button under that profile; the inspector exposes rule provenance. Invalid imports keep the previous valid preview.
Behavioral settings and event callbacks stay in the provider configuration plane. They are not serialized into a theme or sheet. Build/compiler/editor dependencies remain outside minimal component graphs.
Review limits
Contrast checks cover declared pairs and supported numeric colors. An editor preview does not certify all themes, assistive technology or custom layouts. Source exports must be reviewed before persistence. See interoperability for versioned design exchange and migration.
Live examples
Try the controls below, then read or copy the complete example to adapt it for your application.
Theme studio
Every contract token is searchable. Apply writes a final condition for exactly this scheme, density, and axis selection. Changes to a seed do not automatically regenerate paired colors.
A quieter workspace
Color, spacing, sizing and motion share one vocabulary.Source and import
Component sheet studio
Visual defaults and part/state rules are separate from theme tokens and behavioral settings.
button · studio.button
Emitted stylesheet
@layer faye-ui.reset,faye-ui.tokens,faye-ui.base,faye-ui.components,faye-ui.variants,faye-ui.brand,faye-ui.product,faye-ui.local;
@layer faye-ui.product{
}Read the complete example
'use client';
import { useState } from 'react';
import type { ThemeDefinition, ComponentSheet } from '@fayegram-ai/faye-ui/contracts';
import { ThemeEditor } from '@fayegram-ai/faye-ui/devtools/theme-editor';
import { ComponentSheetEditor } from '@fayegram-ai/faye-ui/devtools/sheet-editor';
import { buttonDescriptor } from '@fayegram-ai/faye-ui/controls/button.descriptor';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { defaultTheme } from '@fayegram-ai/faye-ui/tokens/default-theme';
export default function Studio() {
const [theme, setTheme] = useState<ThemeDefinition>(defaultTheme);
const [sheet, setSheet] = useState<ComponentSheet>({ schemaVersion: 1, id: 'studio.button', component: 'button', rules: [] });
return <><ThemeEditor theme={theme} onChange={setTheme}/><ComponentSheetEditor sheet={sheet} onChange={setSheet} descriptor={buttonDescriptor}><Button>Real sheet preview</Button></ComponentSheetEditor></>;
}