Cedros Heartwood Cedros design standard · v2.18
Heartwood · Cedros design standard

The Cedros design system.

Principles, visual identity, composition, interface states, motion, copy, and implementation guidelines for Cedros.

Use these rules across Cedros surfaces. Exact page layouts and campaign compositions live in Page examples.

Position · 01

One promise. Three levels of proof.

AI helps businesses build faster, build better, and keep improving, while agents begin to act for customers. Between them sits a web built for reading and clicking. Every business needs one authoritative operating surface, and the domain is already its address. Cedros turns the website into that surface. Use the locked lines as a hierarchy that proves this, not as interchangeable slogans.

Category

The operating system for AI built businesses.

Primary promise

Websites that think, act, and work for you.

Supporting promise

Turn your website into a working part of your business.

Platform proof

AI builds better on Cedros.

Conversational entry

What are you building?

01

The shift

Build faster, build better, and keep improving with AI. Be ready for customers who use it, too. The website must connect those two changes.

02

Built together

The website is where customers meet the business. Put its knowledge and working tools in the same system, designed for the assistant to use under the owner’s permissions.

03

Three ways in, one state

People through a normal website, owners through the workspace or a conversation, agents through machine-readable context and approved capabilities. Permissions decide; show the record each action supports.

Theme architecture · 02

One structure. Distinct rooms.

The neutral kernel carries semantics, state, accessibility, and behavior. The Cedros preset supplies the parent brand. Customer themes keep their identity. Workbench owns the admin.

Boundary 01

Brand is a preset, not the kernel.

Never solve a Cedros marketing problem by globally restyling every customer site.

Boundary 02

No universal page card.

Public architecture must support full-bleed media, dark and light sections, product theatres, ordinary content, and commerce. The homepage also neutralizes the frame itself, so a host bundle that predates the canvas surface cannot reintroduce it.

Boundary 03

Height must be earned.

Section height follows content unless a composition or interaction genuinely requires the viewport.

Principles · 03

Rules that settle design arguments.

Each principle has a test. When the test fails, the design does not pass because it is attractive, fashionable, or difficult to rebuild.

P1

Quiet surface, loud state

Squint at the view. Real state should outrank ornament.

P2

Speed is the aesthetic

Useful controls respond immediately. Theater never makes the user wait.

P3

One emphasis per view

A newcomer should name the dominant action or idea in 3 seconds.

P4

Plain words, real outcomes

Explain what changes in the user's world, not what the software calls it.

P5

Earn density and space

Dense tools need hierarchy. Spacious scenes need composition. Empty height is not polish.

P6

Familiar surface, deeper system

Make the action clear before revealing architecture underneath.

P7

Product proof over abstraction

Replace diagrams with real interface states whenever product evidence can carry the idea.

P8

Human control is visible

Context, proposal, permission, decision, and result remain identifiable.

P9

Durable over trendy

Choose materials and behavior that would work in 2020 and 2030.

P10

Everyone, every input

Keyboard, touch, reduced motion, localization, text growth, and both modes are required.

Visual identity · 04

Dark Pacific. Material. Operational.

The palette is controlled, the typography has range, and the imagery feels like durable infrastructure rather than a software effect placed behind a headline.

Obsidian#0D0D0E
Bone#F6F5F2
Stone#D9D7D2
Moss#3F5A4A
Oxidized#315B59
Cedar#2F6C7D
Bronze#B48755
Rust#9B5B3F
Gold#E8BE75

Official identity: the supplied cedar-ring C is available in custom-pages/homepage/assets/brands/. Use the asset unchanged. Installing it into the site header is separate; the kernel’s square-and-dot is a placeholder.

Cedar locates.Brand presence, links, selection, and active location.
Bronze routes.Sparse environmental flow and operational focus.
Gold approves.True milestones and explicit human approval only.
Imagery carries place.Pacific blue-green belongs mainly in material and atmosphere. Ledgers over boxes. A comparison or compatibility study may need several objects; give the group one clear purpose.

Quiet structure.
Useful work.

Hero display · NewsreaderWebsites that think, act, and work for you.
Product heading · IBM Plex Sans 500–600Review the proposed update
Lead · 1.05–1.35rem publicYour website, with an AI assistant built in. Shared context and useful capabilities underneath.
Metadata · IBM Plex Monosource: Rush orders · approved · 2 min ago
Label budgetOne tracked-uppercase kicker per section. Every other label is sentence case at 12–13px. Mono only for provenance and state. No pills for vocabularies.
A concrete structure set into a fogged Pacific cliff with a circular opening lit from within.
Living infrastructure · architectural-aperture-01coast · architecture · quiet operational light
A customer browses a creative-course website in a mobile browser on their phone.
Human outcome · human-outcome-serviceillustrative customer browsing · a familiar website, visible on the device

Campaign images may be generated. Product evidence may not. Shipped human photography must be candid, physically plausible, and free of dashboards covering the subject.

Foundations · 05

A material palette.
A precise interface.

Use semantic pairs for text and controls. Use the campaign palette for place. The same roles stay readable in light and dark.

Shipped public preset · toggle the board to compare
RolePublic tokenLightDark
Ground--cedros-background#F6F5F2#0D0D0E
Text--cedros-foreground#07111F#F6F5F2
Quiet surface--cedros-muted#EDEBE6#17181A
Secondary text--cedros-muted-foreground#5F6065#A6A7A9
Decorative divider--cedros-border#D9D7D2#2A2B2D
Link--cedros-link#2F6C7D#7FB0BD
Primary action fill--cedros-primary#0D0D0E#F6F5F2
Primary action text--cedros-primary-foreground#F6F5F2#0D0D0E
Selected surface--cedros-accent#E7EEEF#1D2A2C
Focus / control boundary--cedros-ring#2F6C7D#7FB0BD
Success text / icon--cedros-success#166534#4ADE80
Error text / icon--cedros-error#B91C1C#F87171

Public inputs are --cedros-*; the kernel resolves --cds-* aliases. Workbench owns --cd-* and --admin-*. This board's local variables illustrate the roles. Accent is a surface, never foreground text.

Space follows a scale

4px
8px
12px
16px
24px
32px
48px

8–12px within a group; 24–32px between groups. Panel padding is 24px, or 16px on narrow screens. Control labels and instructions can grow.

Shape and depth have jobs

6px
Compact · small shadow
8px
Ordinary · medium shadow
12px
Feature · large shadow

Ground needs no shadow. A contained object may use a border; an anchored overlay uses medium depth; a modal uses large depth plus a backdrop. Nested radii subtract the actual inset. Dark surfaces also need edge separation.

Type remains operational

Compact title · 20px / 1.25

Body and fields · 16px / 1.6

Control labels · 14px / 500

Metadata · 12–13px. Editorial display uses Newsreader; controls and prose use IBM Plex Sans; exact identifiers use IBM Plex Mono. These specimens use local font fallbacks when the brand fonts are unavailable.

Layers and containers

Content → sticky navigation → anchored popover → modal and backdrop → modal-local feedback.

Use the host's stacking contract or native top layer. The public manifest has no z-layer group. Ordinary shell: 46rem content / 75rem wide. Campaign canvas: 68ch reading / 76rem content / 100rem wide.

Campaign section spacing: clamp(4.5rem, 10vw, 10rem); compact: clamp(3rem, 6vw, 6rem). The preset's ordinary shell has its own section-gap token.

Icons support the action.

16px20px24px

Lucide-compatible 24-unit grid, 2-unit stroke, round ends, no fill. 20px default; 16px metadata; 24px standalone. Hit targets remain at least 44px. Decorative icons are hidden from assistive technology; icon-only actions have a name.

Composition · 06

Fewer, stronger section modes.

A Cedros page changes register with purpose. It does not repeat a centered serif heading over an equal card grid until the footer.

01

Full-bleed environmental media

02Cedros admin: the How customers reach you card with Hours set to Tue–Sat 9–6.

Dark product theatre

03

Light editorial document

04
Order status shared
Recorded2 min ago

Split human outcome

05

Conventional content

06
What are you building?Compact conversion through the same conversation

Conversational close

Public components · 07

One clear choice for each job.

Links go somewhere. Buttons act. Fields collect information. Disclosures reveal detail. Give each its familiar behavior before adding expression.

Actions and destinations

These links navigate within the standard. Primary, secondary, and ghost share a 44px minimum target. One dominant action per task group.

Delete draft

Appearance specimens: destructive language names the object. Continue is disabled until its prerequisite is met; this board has no submission flow.

Labels, help, and errors

Editable specimen. Nothing is sent or stored.
Error specimen: enter a complete email address, such as name@example.com.
Read-only specimen. Select and copy the value; editing belongs to the site's owner.

Choose a value

Preferred reply method
Topics to include

Native selection specimens. Radios choose one value. Checkboxes choose independently. A switch is reserved for a setting that applies immediately; consent is never preselected.

Search, files, and long answers

Input specimen only; this does not search the board. A live search distinguishes no results from a failed request.
PNG or JPEG. Native picker only; this board does not upload. Live fields disclose size limits and show per-file errors.
The label and help stay visible. A failed submission must preserve the message.

Switch a view

Component guidance

A selected view has an underline and selected control. Selection is immediate and never depends only on color.

Production tabs need associated tab panels, one tab stop, arrow/Home/End navigation, and a manual activation option when loading is slow.

Native radio view selector. This demonstrates visual selection and panel switching; it does not claim the ARIA tab keyboard contract.

Surface choice

Reveal detail and navigation

When should a section use a card?

When a single object needs a clear boundary. Related prose or repeated capabilities usually work better as ruled rows.

Does an accordion replace essential copy?

No. Keep the definition, consequence, and main action visible. A disclosure holds optional detail.

Browse this standard

Native disclosures work with Enter, Space, and touch. The navigation specimen is in flow. Live overlay navigation also handles Esc, dismissal, and restored trigger focus.

Decisions have a boundary

Delete this draft?

The unpublished draft will be removed. The published page will stay available.

CancelDelete draft

Static dialog anatomy; these labels are not controls. A live modal has a title, consequence, safe action, explicit confirmation, contained focus, inert background, and a return path. Short decisions: 28rem; reviews: 40rem, bounded by viewport insets.

Location, identity, and state

Creative workshop Illustrative identityAvailable

An avatar supports a name; a badge describes state. A removable chip needs a named remove action and a sensible next focus location. Pagination uses real links; chapter indexes follow reading position.

Static chip and pagination anatomy:

Website design Previous · 1 · 2 · Next
Help with labels

Use the words visible in the control as its accessible name. Supplementary help can use a dismissible popover; essential instructions stay in the page.

The public component contracts are in Markdown §§5.12–5.13. These board-local classes are not runtime exports. Reuse the owning renderer and verify host availability before implementing a new component.

States and feedback · 08

Show what happened.
Keep a way forward.

State is part of the component. Design the waiting, blocked, empty, and failed paths with the same care as the successful one.

Illustrative states below are static content, not live system status. Native editable, invalid, read-only, disabled, and selected controls appear in Components.

Empty

No pages yet.

Create a first page to give visitors somewhere to start.

No results

No pages match “workshop”.

Try another term or clear the filters. Existing content has not disappeared.

Loading

Loading your pages…

Preserve useful old content while refreshing. Name work; never invent progress.

Error / offline

Your message was not sent.

The text is preserved. Reconnect and try again.

Success

Message received.

Show this only after the server accepts it. Keep a receipt when the outcome matters.

Permission-limited

You can view this page.

Editing requires access from the site owner. Protected details stay private.

Approval

Update the published opening hours?

Source: approved schedule. Scope: hours page and FAQ. Publishing needs an explicit decision.

Warning

Your session will end soon.

Explain how to preserve the work and continue. A transient toast is insufficient.

Information

Your changes are a draft.

Visitors will see them only after you publish.

Feedback follows the consequence

Inline notice
A field issue or persistent condition.
Banner
An interruption affecting the whole page.
Toast
A transient confirmed result, with a persistent record when needed.
Dialog
A decision the person must make.

One announcement per event. Routine updates use status; urgent failures may use alert. No duplicate inline and toast announcements.

Progress has evidence

60%
  1. ✓ Complete · File selected
  2. → Running · Uploading file
  3. ○ Pending · Confirm receipt

Only known progress earns a percentage. A failed step keeps its explanation and recovery next to the work.

Every action has a full state vocabulary
StateRequired treatment
RestRecognizable action and persistent label.
Hover160ms surface change; no moving hit target.
FocusImmediate visible ring, distinct from selection.
PressedAcknowledge within 100ms; optional 0.98 scale, removed for reduced motion.
DisabledReduced emphasis and an explanation of what unlocks the action.
Read-onlyLegible, selectable value with a reason editing is unavailable.
LoadingStable dimensions, preserved input, duplicate submission prevented.
ErrorEffect on the work, associated error, and recovery.
Chat-first public interface · 09

Another interface to the same system.

Chat is immediate, truthful, accessible, and connected to the same context, tools, permissions, and records as conventional UI. The homepage opens a dedicated conversation page: a back link, checked availability, a readable thread, and one composer. Marketing navigation and imagery give way to the conversation.

See the dedicated assistant page example. The component specimens below show idle, proposed, complete, and error states.

Cedros assistantPublic interface specimen
Cedros assistantWhat are you building? Describe the business or tell me what you want the website to handle.
Suggested requestShow how Cedros handles a new lead
Suggested requestCould Cedros work for my online store?
YouOur service hours changed. Update the website and FAQ, then prepare a reply for current inquiries.
Cedros assistantI found the approved hours and 2 places that use the old schedule. I can update both. I can prepare the reply, but sending it needs your review.
SourceBusiness hours · approved
Proposed actionApproval required
  • Update the Hours page and FAQ
  • Prepare replies for open inquiries
  • Do not send until approved
YouApprove the website changes. Keep the replies as drafts.
Cedros assistantThe Hours page and FAQ are updated. I prepared 3 replies and left them waiting for review.
OutcomeCompleted and recorded
YouUpdate our service hours to 8–5.
Cedros couldn't finish this request.
Your message is preserved. The assistant is offline, so no website changes were made. Try again or use the normal editor.

These are state specimens. The dedicated assistant page checks availability through a read-only request: checking, unknown, unavailable, human-only, or ready. Readiness means configured, not proven provider uptime. A check never creates a conversation; a recorded state requires confirmation from the response.

Product evidence · 10

Use the interface. Or just ask.

The strongest proof keeps the result stable while the input method changes. Both routes reach the same supported product state.

Interface / chat parity specimen

Change through the interface

Cedros admin, Settings › Site: the How customers reach you card with email, phone, and Hours set to Tue–Sat 9–6.
Product capture · Settings › Site · example data

Change through conversation

Set our hours to Tuesday to Saturday, 9 to 6. Sunday and Monday closed.
I can update the saved hours in Settings, then prepare related page and FAQ edits for review. Publishing is a separate action.

Same resulting state

Business hours · Tue–Sat, 9–6

ObjectSettings › Site › Hours
PermissionEdit site settings; review related publishing separately
StateSaved setting; related content requires separate review and publication
RecordInspect the relevant product history where supported

Same target record, whichever interface you use. Reading, changing, publishing, and recording are separate capabilities.

Shipped proof ruleThe interface side is a real capture of the current Cedros admin with example data, taken as a whole card at 2× from a 1440px viewport. The result side is an explanatory specimen, not a live record. It does not establish automatic cross-surface publishing or universal action history. Never generate fictional product UI, and never crop a capture mid-sentence.
Motion · 11

Fast at work. Spatial on stage.

Workspace motion explains state in fractions of a second. Brand motion explains relationships through architecture, environment, and product narrative. Never swap the registers.

Workspace register

Felt, not watched.

Controls acknowledge immediately. State changes settle without bounce, theater, or delay.

Press100ms
Hover / fade160ms
Panel / view220ms
Dialog240ms
Metric500ms
Highlight800ms
Brand register

Quiet orchestration.

Longer motion earns its time by revealing place, relation, permission, and product state.

Editorial450–900
Product500–1200
Architecture800–1800
Environment8–24s
Architectural revealsurface opens into shared layersSectional cut from the public deck into the connected layers beneath.
Flowcontext reaches an approved tool
ContextApproved tool
Resolvestate becomes inspectable
Environmental depthimage relief and material-aware lighting
Editorial revealsemantic line mask
Useful work moves forward.
Permission boundarycedar-ring geometry

Check to play; uncheck, then check to replay. All six controls work with touch, keyboard, and pointer. The resting composition is complete. Reduced motion keeps editorial text, diagrams, and product states visible and removes decorative movement. Permission geometry illustrates a relationship; it does not grant consent.

Everyday interface motion

Menu entry

180ms in / 120ms out. This preview demonstrates entry only; production lifecycle follows the recipe table.

Menu motion specimen

Dialog entry

240ms in / 160ms out. This preview demonstrates entry only; production lifecycle follows the recipe table.

Dialog motion specimen

Toast entry

220ms in / 160ms out. This preview demonstrates entry only; production lifecycle follows the recipe table.

Toast motion specimen
Public recipes · trigger, movement, and lifecycle
Pattern / triggerMovement and timingLifecycle / reduced motion
Control feedback / pointer or activationColor/surface 160ms; optional press scale 1 → 0.98 in 100ms, origin centerReverse from current value on release; focus instant; no scale under reduced motion
Navigation disclosure / explicit openFade + y −4px → 0; 180ms standard in, 120ms ease-in out; origin at triggerClosing interrupts opening; trigger and hit area stay still; reduced: immediate visibility
Dialog / explicit openFade + y 8px → 0, scale 0.98 → 1; 240ms standard in, 160ms ease-in outFocus behavior never waits for animation; reduced: immediate final state
Accordion / toggleContent fade 160ms; optional measured height change ≤220msEssential answer available immediately; rapid toggles reverse; reduced: no height animation
Tabs / selectionIndicator 220ms standard; optional panel crossfade 160msUpdate selected semantics immediately; no wait for distant panels; reduced: immediate selection
Confirmed feedback / responseInline text crossfade 160ms; public toast fade + y 8px → 0, 220ms in / 160ms outOne arrival per event; no repeat on rerender; reduced: static receipt
Editorial reveal / first meaningful appearanceClip line group while translating text y 12px → 0; 720ms standardOnce per scene, never on back navigation; no essential copy hidden before enhancement; reduced: text visible
Product resolve / selected stateFade 0.35 → 1, y 16px → 0, scale 0.97 → 1; 900ms standardInteraction acknowledges immediately; final content remains inspectable; reduced: final state
Architecture / deliberate explorationReveal mask bottom 68% → 0, or flow line scaleX 0 → 1 from its source; 1400ms standardOne relationship; reset/replay only on explicit input; reduced: complete diagram
Environmental depth / pointerDecorative planes move at most 8px; settle ≤1400ms standardNo text or control movement, no required hover; touch and reduced: original still
Permission geometry / explanationInner rings rotate at most 18° / −24° over 900ms; restrained border emphasisDecorative explanation cannot indicate actual consent; reduced: static rings and explicit state text

Standard: cubic-bezier(0.16, 1, 0.3, 1). Exit: cubic-bezier(0.4, 0, 1, 1). New input replaces the current transition; never queue motion. First-entry stagger is at most 45ms per item and 180ms total added delay. No replay on history, refetch, or mode changes. Nonessential loops default off; justified loops need pause/stop and offscreen suspension. Workbench owns its workspace-specific menu and toast bindings.

Copy · 12

A capable colleague who respects your time.

Plain, confident, warm, specific, and calm. Outcome before capability. Exact when risk or permission matters.

CategoryThe operating system for AI built businesses.
PromiseWebsites that think, act, and work for you.
SupportTurn your website into a working part of your business.
ProofAI builds better on Cedros.
Error formula

Cedros couldn't finish this request. Your draft is safe. Try again; if it keeps happening, contact support with code req_8f3a.

Approval language

Allowed to prepare, not send. Review the proposed reply before it reaches the customer.

Prefer

  • Approved business knowledge
  • Needs your review
  • Completed and recorded
  • Website in marketing; site in product
  • Verb + object CTAs

Avoid

  • Magic, limitless, revolutionary
  • Runs itself or replaces your team
  • Leverage, utilize, seamless
  • Plugin, module, add-on
  • Dead or misleading CTAs
Data and technical content · 13

Make the detail readable.

Quantities align. Identifiers stay exact. Charts explain their units and source. Missing information never becomes a convincing-looking zero.

Numbers and comparisons

Formatting specimens · illustrative values
QuantityDisplay
Money$1,240.00 USD
Percentage12.5%
Count1,240
UnavailableNot available

Use locale formatters, sans, and tabular numerals. Prices include currency and billing interval when applicable; these values are not a Cedros catalog.

Code and prose

Use the identifier example.com in mono. Human names, quantities, and email addresses stay in sans.

JSON · static formatting specimen; select text to copy. This is not a platform schema.

{
  "title": "Creative workshop",
  "status": "draft"
}
Explain what changes in the person's world, then show the detail needed to decide.

Live code blocks expose one copy action. “Copied” follows a successful clipboard write; failure keeps a manual selection path. Nothing in this board claims a clipboard write occurred.

A chart has a reading path

Illustrative page counts · zero baseline, scale 0–100 pages. The table gives the same values without depending on color or bar length.
Illustrative chart data
Page stateCount
Drafts60
Published90

Every data state is intentional

Empty
No observations in the named period.
Loading
Keep the title, units, and expected footprint.
Unavailable
Say why data cannot be shown, with recovery where supported.
Refresh
Keep the axes stable; crossfade values in 160ms.

Categorical order: cedar, gold, sage, clay, indigo, mist. Use direct labels and accessible values; semantic status colors retain their meaning. No gradients, 3D bars, unexplained axes, or fabricated customer evidence.

Access and responsive behavior · 14

The same work.
Every input.

Focus, reading order, errors, and motion are part of the design. A narrow screen changes the composition while preserving every necessary decision.

Visible focus, useful targets

Public controls have a 44px minimum target. Focus appears immediately, remains distinct from selection, and clears sticky navigation. Inline prose links keep their normal text flow.

Try a keyboard disclosure

Tab reaches the summary. Enter or Space opens and closes it. Content stays in reading order. Production overlays additionally dismiss with Esc and restore their trigger.

Settings apply immediately

This switch changes the size of this paragraph immediately. Its name stays the same in both states.

Use a switch for a reversible setting. Use a checkbox when a value waits for a form submission. This preview changes only its own paragraph.

Reading order survives reflow

  • Split layouts stack when the content no longer fits.
  • Actions wrap and their labels may grow.
  • Errors and instructions stay beside their fields.
  • Tables and code scroll inside named frames.
  • Virtual keyboards must not hide the active field or submit action.

Review 200% text zoom, 320 CSS-pixel reflow, 35% translation growth, and representative RTL. The board demonstrates stacking at 980px and compact groups at 680px; the kernel is not tied to those breakpoints.

Announce the event once

  • Routine confirmed result: status announcement.
  • Urgent failure: alert when warranted.
  • Field error: persistent message associated with the field.
  • Streaming chat: coherent updates, never every token.
  • Modal: contained focus, inert background, safe initial focus, and restored focus on close.

The static state specimens do not emit live announcements. In the product, avoid a toast and inline message both announcing the same event.

Reduced motion means a complete resting state.

Disable parallax, loops, and nonessential movement. Show the complete diagram, visible editorial text, and resolved product. Turn on your system's reduced-motion preference, then try every replay control: the content remains complete.

Contrast and reflow requirements follow WCAG 2.2 AA. Use at least 4.5:1 for ordinary text and 3:1 for large text and necessary control indicators where applicable. Check both modes and actual media surfaces.

Implementation and review · 15

Secure assets. Real product. Evidence at review.

The standard is complete only when the theme boundary holds, generated campaign media is secure and reviewed, product proof is authentic, and the page passes functional and visual validation.

Rounded cream shellNo page-within-a-page container, in either mode or under a legacy host bundle.
Empty full-height sectionsWhitespace must carry composition or meaning.
Centered heading + card gridDo not repeat one section formula. Ledgers over boxes; no pill rows; one kicker per section.
Knowledge sphere or orbitUse operating-surface architecture and real proof.
Glass, HUD, neon, particlesAvoid generic AI and cyberpunk spectacle.
Fake or tiny product UIWhole cards at an inspectable scale, never a capture cut mid-sentence.
Scroll hijackingNative scroll. Pin only when the scroll changes the composition; a list that fills in is not worth the friction.
Luxury coastal real estateInfrastructure, not resort or residence.
Fake assistant activityReal behavior or clearly labeled demonstration.
BrandRecognizable without the logo
ClarityWebsite in 5s, useful work in 10s
ChatReal, immediate, accessible, truthful
ProductSupported UI and visible control
CompositionFewer, stronger integrated ideas
EngineeringNo dead routes, leaks, or reduced-motion gaps
01

Architecture

Semantic tokens, separate kernel and Cedros preset, existing primitives extended before forks, and one-off choreography kept out of shared components.

  • No monolithic homepage component
  • No scattered theme literals
  • design-admin.md wins in /admin
02

Campaign media

gpt-image-2 may create environments and documentary campaign art through a secure local or protected server workflow.

  • Key never enters browser or repository
  • Small candidate set, deliberate selection
  • Static optimized output with manifest
03

Product proof

Verify the capability, seed believable nonprivate data, capture whole cards at 2× from a 1440px admin viewport (scripts/homepage-media/capture.mjs), and label demonstrations.

  • No image-generated product UI
  • No private credentials or customer data
  • No unsupported state presented as live
.envserver or local only
gpt-image-2campaign art and edits
candidate reviewselect, reject, record lineage
optimizationWebP/AVIF, responsive sizes
static deliverymanifest, alt status, no runtime API
1728×1117wide desktop
1440×900desktop
1280×800laptop
1024×768small laptop
768×1024tablet
430×932mobile
390×844mobile
360×800minimum

Also review mobile keyboard-open, 35% text growth, representative RTL, slow network, failed media, reduced motion, anonymous assistant behavior, sign in, signup, pricing, and representative customer-theme routes.