Pick, don’t invent.
English mirror of the Waimia closed design system. Use existing tokens and components first, then assemble W6 sections instead of creating a new pattern from scratch.
Canonical foundations exposed through CSS variables. The English mirror keeps the surface short: color, typography and spacing are enough to understand the system’s hierarchy.
Color palette
--paper default page background --paper-2 raised surfaces --ink primary text and strong CTA --accent editorial emphasis Type stack
Display headlines, contrast, editorial pacing.
UI text, body copy, functional density.
Labels, system notes, metadata and code snippets.
Existing utility layer already covers reveal patterns, hairlines and button classes. Reuse first, extend only when a new primitive is justified.
.reveal-fade,.reveal-up,.clip-up,.blur-infor scroll entry..btnplus variant classes for direct HTML usage when no Astro component is needed..hlineand.hline-strongfor quiet editorial separation.
Smallest reusable pieces. The EN page keeps the core demos: kicker rhythm, chapter labels, buttons and raw form fields aligned on the same tokens.
Kicker + ChapterLabel
Form elements (raw HTML · DS tokens)
Functional compositions used repeatedly across sales, editorial and diagnostic pages.
SectionHeader
Four operational surfaces, one system.
Enough structure to ship, enough room to adapt.
NewsletterSignup · card + inline
Weekly AI Intelligence
Trends, analyses, tools — for leaders who run on AI.
✓ Welcome! Check your inbox.
✓ Welcome! Check your inbox.
PainPointInline · two severities
Attach a triage agent that scores, enriches and routes each lead into the right pipeline in minutes.
Add lightweight CRM instrumentation so every editorial push is tied to business signals that matter.
ShareButtons
Legacy or page-specific assemblies remain useful, but they are no longer the preferred default for new pages. W6 sections below are the main composition target.
Composable page sections used to build offer pages, trust pages and landing flows. The mirror keeps five concrete examples in English.
Turn a marketing bottleneck into an operating system.
Diagnosis, agent design, integration and supervision in one execution path.
Closed systems make faster pages.
A constrained library beats improvised layout decisions when the goal is repeatable quality.
Three execution layers.
- ▸ 01Signal capture
Forms, CRM and inboxes feed a clean operational queue.
- ▸ 02Agent action
Scoring, enrichment and drafting happen with visible guardrails.
- ▸ 03Human review
A human stays accountable on the irreversible decisions.
Two structural constraints.
- ▸ ASmall primitive set
Fewer blocks means fewer edge cases and stronger visual consistency.
- ▸ BStrict naming
Components stay searchable and handoff remains predictable across sessions.
Need a faster baseline?
Start from the closed system, then tune the page where the business constraint is real.
Existing reveal classes and magnetic hover are part of the system surface and should be demonstrated explicitly.
Scroll reveal classes
Magnetic hover
Editorial atoms remain available for essays, case studies and white papers: callouts, pull quotes, drop caps, key metrics and styled tables.
Heavier motion components stay reserved for signature pages such as home, console and atlas.
English routes already consume dedicated templates. Use the closed system to feed them instead of branching the visual language.
Agency pages→ /en/agence/aboutMethod page→ /en/agence/methodePrompt library→ /en/agence/promptsOffers hub→ /en/offresSolutions hub→ /en/solutionsContact→ /en/contact