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.

Open workbench

Design studio

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.

ThemeRecipeBlock setBlock designMediaAppearance preset

Active recipe

Editorial Block System

Creation Equity with Layout Core and Media Forward defaults.

Grade A ready

Design systemCreation Equity

creation-equity

RecipeEditorial Block System

editorial-block-system

Block setLayout Core

18 visible blocks

Block designMedia Forward

Image-led marketing treatment for hero, media, gallery, and listing blocks.

MediaCloud Elephants team

16 / 9

Presetcurated interface

13 presets available

QualityGrade A ready

6/6 dimensions covered

foundation 53visible blocks 18interface patterns 59layout patterns 57design 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.

6/6 covered

coveredVisual polish

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

coveredData composition

Catalog examples remain cloneable structured CMS payloads with stable composition metadata.

Block catalog data recipes
composition_recipe metadata
default, media, operator, and stress intents

coveredRecipe alignment

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

coveredMedia readiness

Blocks are previewed with replaceable branded media and generated fallback media.

Cloud Elephants placeholder image
Generated fallback placeholder
Media-forward design configuration

coveredResponsive ergonomics

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

coveredCrawler and agent readiness

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

Design tokens

BackgroundPanelTextSignal

H1 sizeBody sizeButton size

Surface radiusCard radiusControl radius

Page paddingPanel paddingBlock gap

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

implemented

Hero

Launch section

A clear opening for a real business page

A polished section should name the visitor, the outcome, and the next useful action.

Plan the page

implemented

Markdown

Explain the offer clearly

The section keeps the message readable while the design treatment changes around it.

implemented

Icon Card Grid

Icon card grid

Clear promise

Explain the value in words a visitor already understands.

Designed to fit

Keep the same content polished across different visual directions.

implemented

ValuesOS Feature Spotlight

Spotlight

Feature spotlight

A focused benefit gets enough room to feel custom and memorable.

implemented

Bento Grid

Bento grid

Tile

Bento card sample.

themepreset

implemented

Metric Grid

Metric grid

CoverageReady

implemented

Form Template

conversion

Form template

11 fields2 requiredPrivacy aware

We only use your answers for this request.

implemented

Conversion CTA

Conversion call to action

Calls to action keep event metadata and appearance context together.

Continue

implemented

Navbar

implemented

Footer

implemented

Image

Media

Image

Dedicated Bethsaida parity wrapper with component-level media theming.

implemented

Image Gallery

Image gallery

implemented

Media Block

Media

Media section

Dedicated Bethsaida parity wrapper with component-level media theming.

compatibility

Product Grid

Product grid

Launch kit

$49

Ready-to-style product tile.

new

Care plan

$19

Recurring service tile.

plan

implemented

ValuesOS Testimonials

Trust

The configuration is visible and testable.

Operator

implemented

ValuesOS FAQ

Questions

Does the preset apply?

Yes, through the shared appearance boundary.

implemented

shadcn Showcase

Curated interface

Curated interface wrapper showcase

Curated wrapper behavior keeps low-level controls behind polished page patterns.

Interface / AccordionInterface / AlertInterface / Alert DialogInterface / Aspect RatioInterface / AvatarInterface / BadgeInterface / BreadcrumbInterface / ButtonInterface / Button GroupInterface / CalendarInterface / CardInterface / CarouselInterface / ChartInterface / CheckboxInterface / CollapsibleInterface / ComboboxInterface / CommandInterface / Context MenuInterface / Data TableInterface / Date PickerInterface / DialogInterface / DirectionInterface / DrawerInterface / Dropdown MenuInterface / EmptyInterface / FieldInterface / Hover CardInterface / InputInterface / Input GroupInterface / Input OtpInterface / ItemInterface / KbdInterface / LabelInterface / MenubarInterface / Native SelectInterface / Navigation MenuInterface / PaginationInterface / PopoverInterface / ProgressInterface / Radio GroupInterface / ResizableInterface / Scroll AreaInterface / SelectInterface / SeparatorInterface / SheetInterface / SidebarInterface / SkeletonInterface / SliderInterface / SonnerInterface / SpinnerInterface / SwitchInterface / TableInterface / TabsInterface / TextareaInterface / ToastInterface / ToggleInterface / Toggle GroupInterface / TooltipInterface / Typography

Request cardA compact card for service details and action context.

Command

Contentready

Rendererready

Validationready

Interface / Dialog

Consult request dialog

A focused confirmation moment for high-intent visitors.

Interface / Sheet

Service details panel

A side panel keeps extra context close to the current page.

Interface / Drawer

Mobile detail drawer

A bottom drawer keeps phone layouts calm and actionable.

Interface / Alert Dialog

Confirmation moment

Sensitive actions get clear language before the visitor continues.

Interface / Accordion

Question set

Grouped answers stay easy to scan.

Content / Interaction

Interface / Collapsible

Expandable note

Extra detail appears only when it helps the visitor.

Content / Interaction

Interface / Carousel

Story sequence

Sequential cards keep media, trust, and action bounded.

Intro / Trust / Action

Interface / Toast

Submission note

Short feedback confirms what happened after an action.

Content / Interaction

Interface / Sonner

Notification note

Status texture remains part of the page design.

Content / Interaction

Interface / Empty

Empty state

No-data moments still sound helpful.

Content / Interaction

Interface / Skeleton

Loading state

Loading feedback holds space so the layout does not jump.

Content / Interaction

Interface / Alert