creation-equity
Configuration workbench
Test block design systems as a composed page, not a disconnected matrix.
Swap themes, recipes, presets, block-level design configurations, and Cloud Elephants media placeholders against the same wrapper inventory.
Theme lab
Block component and layout workbench
Use the controls to compare theme recipes, component overrides, page density, layout treatment, and media placeholders across representative block families.
Active recipe
Editorial Block System
Creation Equity with Layout Core and Media Forward defaults.
editorial-block-system
18 visible blocks
Image-led marketing treatment for hero, media, gallery, and listing blocks.
16 / 9
13 presets available
6/6 dimensions covered
foundation 53visible blocks 18shadcn primitives 59Tailwind taxonomy 57theme tokens 43recipes 19sets 5designs 4media 2catalog 216
Quality protocol
Grade A default protocol
Every visible block is checked as a themed, recipe-aligned, responsive, cloneable CMS component with media and discovery evidence.
Previews must render intentional defaults without blank blocks, broken media, or clipped controls.
- All-supported workbench preview
- No broken images
- No horizontal overflow
- Text fitting smoke
Catalog examples remain cloneable structured CMS payloads with stable composition metadata.
- Block catalog data recipes
- composition_recipe metadata
- default, media, operator, and stress intents
Theme recipes, appearance presets, and block-level design configurations stay selectable together.
- 19 theme recipes
- 13 appearance presets
- 4 block design configurations
- theme token studio controls
Blocks are previewed with replaceable branded media and generated fallback media.
- Cloud Elephants placeholder image
- Generated fallback placeholder
- Media-forward design configuration
The workbench preserves responsive defaults through scoped block-set artifacts and the all-supported structured inventory.
- deployed workbench artifact
- scoped layout-core preview
- structured all-supported inventory
- static responsive CSS contract
Nonvisual SEO, social preview, sitemap, robots, and agent discovery surfaces remain part of the quality bar.
- SEO discovery test
- robots route
- sitemap route
- llms.txt route
- explicit JSON-LD only
Contrast AAText on background 17.08Text on panel 16.27Muted text on panel 10.66Button text on button 5.17Control text on control 17.74Badge text on badge 7.58
Hero
Markdown
markdown preview
Theme and appearance should remain legible.
Icon Card Grid
icon-card-grid cards
Configured
Contract-backed content.
Themeable
Styled by preset and tokens.
ValuesOS Feature Spotlight
Spotlight
Feature spotlight
A public wrapper with themeable emphasis.
Bento Grid
Bento grid
Tile
Bento card sample.
themepreset
Metric Grid
metric-grid metrics
Form Template
conversion
Form template
11 fields2 requiredPrivacy aware
We only use your answers for this request.
Conversion CTA
conversion-cta CTA
Calls to action keep event metadata and appearance context together.
Navbar
Footer
Image
Media
image media
Dedicated Bethsaida parity wrapper with component-level media theming.
Image Gallery
image_gallery gallery
Media Block
Media
media_block media
Dedicated Bethsaida parity wrapper with component-level media theming.
Product Grid
Product grid
Launch kit
$49Ready-to-style product tile.
new
Care plan
$19Recurring service tile.
plan
ValuesOS Testimonials
Proof
The configuration is visible and testable.
ValuesOS FAQ
Questions
Does the preset apply?
Yes, through the shared appearance boundary.
shadcn Showcase
shadcn inspired
shadcn wrapper showcase
Curated wrapper behavior keeps raw shadcn primitives internal while proving overlay anatomy.
shadcn/accordionshadcn/alertshadcn/alert-dialogshadcn/aspect-ratioshadcn/avatarshadcn/badgeshadcn/breadcrumbshadcn/buttonshadcn/button-groupshadcn/calendarshadcn/cardshadcn/carouselshadcn/chartshadcn/checkboxshadcn/collapsibleshadcn/comboboxshadcn/commandshadcn/context-menushadcn/data-tableshadcn/date-pickershadcn/dialogshadcn/directionshadcn/drawershadcn/dropdown-menushadcn/emptyshadcn/fieldshadcn/hover-cardshadcn/inputshadcn/input-groupshadcn/input-otpshadcn/itemshadcn/kbdshadcn/labelshadcn/menubarshadcn/native-selectshadcn/navigation-menushadcn/paginationshadcn/popovershadcn/progressshadcn/radio-groupshadcn/resizableshadcn/scroll-areashadcn/selectshadcn/separatorshadcn/sheetshadcn/sidebarshadcn/skeletonshadcn/slidershadcn/sonnershadcn/spinnershadcn/switchshadcn/tableshadcn/tabsshadcn/textareashadcn/toastshadcn/toggleshadcn/toggle-groupshadcn/tooltipshadcn/typography
Card wrapperWrapped primitive behavior.
Contractready
Rendererready
Validationready
Accordion wrapper
Grouped disclosure content with semantic summary controls.
Contract / Runtime
Collapsible wrapper
Single-section disclosure behavior remains contract-owned.
Contract / Runtime
Carousel wrapper
Sequential items render as a bounded preview.
Intro / Proof / Action
Toast wrapper
Transient feedback can be represented without exposing primitive props.
Contract / Runtime
Sonner wrapper
Notification texture remains an internal implementation choice.
Contract / Runtime
Empty state wrapper
No-data states use a curated message pattern.
Contract / Runtime
Skeleton wrapper
Loading placeholders are theme-aware but not CMS primitives.
Contract / Runtime
Alert wrapper
Inline status messages stay themeable and contract-driven.
Contract / Runtime / QA
Aspect ratio wrapper
Media boxes preserve stable responsive geometry.
Contract / Runtime / QA
Button group wrapper
Grouped actions remain a wrapper concern.
Contract / Runtime / QA
Chart wrapper
Chart texture is previewed without exposing chart internals.
Contract / Runtime / QA
Command wrapper
Command search stays a curated operator surface.
Contract / Runtime / QA
Context menu wrapper
Contextual actions render as semantic menus.
Contract / Runtime / QA
Data table wrapper
Operator rows stay contract-backed.
Contract / Runtime / QA
Direction wrapper
RTL/LTR treatment is validated as implementation evidence.
Contract / Runtime / QA
Hover card wrapper
Supplemental details stay in a bounded preview.
Contract / Runtime / QA
Item wrapper
List item anatomy remains consistent across themes.
Contract / Runtime / QA
Keyboard hint wrapper
Keyboard affordances stay accessible and themeable.
Contract / Runtime / QA
Menubar wrapper
Menu navigation stays semantic.
Contract / Runtime / QA
Native select wrapper
Native selects route through the CMS form-template pattern.
Contract / Runtime / QA
Navigation menu wrapper
Navigation menus remain curated site chrome behavior.
Contract / Runtime / QA
Resizable wrapper
Split panes are represented without raw primitive props.
Contract / Runtime / QA
Scroll area wrapper
Overflow content gets bounded responsive treatment.
Contract / Runtime / QA
Sidebar wrapper
Application sidebars stay a public layout wrapper.
Contract / Runtime / QA
Spinner wrapper
Loading feedback is visible through stable status evidence.
Contract / Runtime / QA
Table wrapper
Simple tabular data stays contract-first.
Contract / Runtime / QA
Adaptive Surface
Adaptive surface
Adaptive surface
experiment: theme-lab-appearancestrategy: staticstickygoverned
Control
Arm copy uses the selected preset.