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.
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.
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.
The operating system for AI built businesses.
Websites that think, act, and work for you.
Turn your website into a working part of your business.
AI builds better on Cedros.
What are you building?
Build faster, build better, and keep improving with AI. Be ready for customers who use it, too. The website must connect those two changes.
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.
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.
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.
Living infrastructure, documentary people, editorial type, chat-first entry.
Semantic roles, state, forms, media, navigation, responsiveness, accessibility.
Customer palette, type, imagery, spacing, and composition remain configurable.
design-admin.md wins inside /admin.
Never solve a Cedros marketing problem by globally restyling every customer site.
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.
Section height follows content unless a composition or interaction genuinely requires the viewport.
Each principle has a test. When the test fails, the design does not pass because it is attractive, fashionable, or difficult to rebuild.
Squint at the view. Real state should outrank ornament.
Useful controls respond immediately. Theater never makes the user wait.
A newcomer should name the dominant action or idea in 3 seconds.
Explain what changes in the user's world, not what the software calls it.
Dense tools need hierarchy. Spacious scenes need composition. Empty height is not polish.
Make the action clear before revealing architecture underneath.
Replace diagrams with real interface states whenever product evidence can carry the idea.
Context, proposal, permission, decision, and result remain identifiable.
Choose materials and behavior that would work in 2020 and 2030.
Keyboard, touch, reduced motion, localization, text growth, and both modes are required.
The palette is controlled, the typography has range, and the imagery feels like durable infrastructure rather than a software effect placed behind a headline.
#0D0D0E#F6F5F2#D9D7D2#3F5A4A#315B59#2F6C7D#B48755#9B5B3F#E8BE75Official 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.
Quiet structure.
Useful work.
architectural-aperture-01coast · architecture · quiet operational light
human-outcome-serviceillustrative customer browsing · a familiar website, visible on the deviceCampaign images may be generated. Product evidence may not. Shipped human photography must be candid, physically plausible, and free of dashboards covering the subject.
Use semantic pairs for text and controls. Use the campaign palette for place. The same roles stay readable in light and dark.
| Role | Public token | Light | Dark |
|---|---|---|---|
| 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.
8–12px within a group; 24–32px between groups. Panel padding is 24px, or 16px on narrow screens. Control labels and instructions can grow.
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.
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.
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.
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.
A Cedros page changes register with purpose. It does not repeat a centered serif heading over an equal card grid until the footer.
01
04Links go somewhere. Buttons act. Fields collect information. Disclosures reveal detail. Give each its familiar behavior before adding expression.
These links navigate within the standard. Primary, secondary, and ghost share a 44px minimum target. One dominant action per task group.
Appearance specimens: destructive language names the object. Continue is disabled until its prerequisite is met; this board has no submission flow.
Native selection specimens. Radios choose one value. Checkboxes choose independently. A switch is reserved for a setting that applies immediately; consent is never preselected.
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.
When a single object needs a clear boundary. Related prose or repeated capabilities usually work better as ruled rows.
No. Keep the definition, consequence, and main action visible. A disclosure holds optional detail.
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.
The unpublished draft will be removed. The published page will stay available.
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.
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:
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.
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.
No pages yet.
Create a first page to give visitors somewhere to start.
No pages match “workshop”.
Try another term or clear the filters. Existing content has not disappeared.
Loading your pages…
Preserve useful old content while refreshing. Name work; never invent progress.
Your message was not sent.
The text is preserved. Reconnect and try again.
Message received.
Show this only after the server accepts it. Keep a receipt when the outcome matters.
You can view this page.
Editing requires access from the site owner. Protected details stay private.
Update the published opening hours?
Source: approved schedule. Scope: hours page and FAQ. Publishing needs an explicit decision.
Your session will end soon.
Explain how to preserve the work and continue. A transient toast is insufficient.
Your changes are a draft.
Visitors will see them only after you publish.
One announcement per event. Routine updates use status; urgent failures may use alert. No duplicate inline and toast announcements.
Only known progress earns a percentage. A failed step keeps its explanation and recovery next to the work.
| State | Required treatment |
|---|---|
| Rest | Recognizable action and persistent label. |
| Hover | 160ms surface change; no moving hit target. |
| Focus | Immediate visible ring, distinct from selection. |
| Pressed | Acknowledge within 100ms; optional 0.98 scale, removed for reduced motion. |
| Disabled | Reduced emphasis and an explanation of what unlocks the action. |
| Read-only | Legible, selectable value with a reason editing is unavailable. |
| Loading | Stable dimensions, preserved input, duplicate submission prevented. |
| Error | Effect on the work, associated error, and recovery. |
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.
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.
The strongest proof keeps the result stable while the input method changes. Both routes reach the same supported product state.
Business hours · Tue–Sat, 9–6
Same target record, whichever interface you use. Reading, changing, publishing, and recording are separate capabilities.
Workspace motion explains state in fractions of a second. Brand motion explains relationships through architecture, environment, and product narrative. Never swap the registers.
Controls acknowledge immediately. State changes settle without bounce, theater, or delay.
Longer motion earns its time by revealing place, relation, permission, and product state.

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.
180ms in / 120ms out. This preview demonstrates entry only; production lifecycle follows the recipe table.
240ms in / 160ms out. This preview demonstrates entry only; production lifecycle follows the recipe table.
220ms in / 160ms out. This preview demonstrates entry only; production lifecycle follows the recipe table.
| Pattern / trigger | Movement and timing | Lifecycle / reduced motion |
|---|---|---|
| Control feedback / pointer or activation | Color/surface 160ms; optional press scale 1 → 0.98 in 100ms, origin center | Reverse from current value on release; focus instant; no scale under reduced motion |
| Navigation disclosure / explicit open | Fade + y −4px → 0; 180ms standard in, 120ms ease-in out; origin at trigger | Closing interrupts opening; trigger and hit area stay still; reduced: immediate visibility |
| Dialog / explicit open | Fade + y 8px → 0, scale 0.98 → 1; 240ms standard in, 160ms ease-in out | Focus behavior never waits for animation; reduced: immediate final state |
| Accordion / toggle | Content fade 160ms; optional measured height change ≤220ms | Essential answer available immediately; rapid toggles reverse; reduced: no height animation |
| Tabs / selection | Indicator 220ms standard; optional panel crossfade 160ms | Update selected semantics immediately; no wait for distant panels; reduced: immediate selection |
| Confirmed feedback / response | Inline text crossfade 160ms; public toast fade + y 8px → 0, 220ms in / 160ms out | One arrival per event; no repeat on rerender; reduced: static receipt |
| Editorial reveal / first meaningful appearance | Clip line group while translating text y 12px → 0; 720ms standard | Once per scene, never on back navigation; no essential copy hidden before enhancement; reduced: text visible |
| Product resolve / selected state | Fade 0.35 → 1, y 16px → 0, scale 0.97 → 1; 900ms standard | Interaction acknowledges immediately; final content remains inspectable; reduced: final state |
| Architecture / deliberate exploration | Reveal mask bottom 68% → 0, or flow line scaleX 0 → 1 from its source; 1400ms standard | One relationship; reset/replay only on explicit input; reduced: complete diagram |
| Environmental depth / pointer | Decorative planes move at most 8px; settle ≤1400ms standard | No text or control movement, no required hover; touch and reduced: original still |
| Permission geometry / explanation | Inner rings rotate at most 18° / −24° over 900ms; restrained border emphasis | Decorative 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.
Plain, confident, warm, specific, and calm. Outcome before capability. Exact when risk or permission matters.
Cedros couldn't finish this request. Your draft is safe. Try again; if it keeps happening, contact support with code req_8f3a.
Allowed to prepare, not send. Review the proposed reply before it reaches the customer.
Quantities align. Identifiers stay exact. Charts explain their units and source. Missing information never becomes a convincing-looking zero.
| Quantity | Display |
|---|---|
| Money | $1,240.00 USD |
| Percentage | 12.5% |
| Count | 1,240 |
| Unavailable | Not available |
Use locale formatters, sans, and tabular numerals. Prices include currency and billing interval when applicable; these values are not a Cedros catalog.
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.
| Page state | Count |
|---|---|
| Drafts | 60 |
| Published | 90 |
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.
Focus, reading order, errors, and motion are part of the design. A narrow screen changes the composition while preserving every necessary decision.
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.
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.
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.
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.
The static state specimens do not emit live announcements. In the product, avoid a toast and inline message both announcing the same event.
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.
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.
Semantic tokens, separate kernel and Cedros preset, existing primitives extended before forks, and one-off choreography kept out of shared components.
design-admin.md wins in /admingpt-image-2 may create environments and documentary campaign art through a secure local or protected server workflow.
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.
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.