01 · Type
Poster-scale typography
Use giant headlines and restrained copy so the thesis lands immediately without decorative scaffolding.
Cloudflare-inspired microsite direction
The system for building agent experiences.
A mini site built around oversized type, visible rails, rounded technical components, and a single warm accent color — so the product feels less like generic AI marketing and more like a clear operating surface.
Design familySystems modernism
Visual postureOutline-first UI
Reading modeHero → compare → inspect
Best useAI platforms + tools
Four principles that make the page feel like a system.
The point is not to imitate Cloudflare pixel-for-pixel. The point is to preserve the logic: typography carries authority, structure stays visible, interaction is calm, and the brand only needs one strong color to hold the page together.
02 · Color
One accent does the work
Keep the background warm and neutral. Let one warm brand color carry the title, dividers, controls, and emphasis.
03 · Structure
Expose the rails
Thin borders, split grids, and center dividers become part of the identity instead of something to hide.
04 · UI
Friendly technical components
Pills, rounded cards, and chat bubbles make the system approachable without softening its precision.
Show the product logic, not just the slogan.
A useful agent microsite should compare modes, reveal behavior, and make the interaction model inspectable. This toggle is a simple example of how the same visual system can explain two product postures.
Prompt surface
Draft a launch page for an AI workflow product. Keep it elegant. Explain what it does.
System behavior
Returns copy and a generic layout. Strong answer, weak operating model.
Turn the microsite into a map of the runtime.
Once the hero establishes the thesis, the rest of the page can act like a calm architecture diagram: what comes in, what gets reasoned over, what state persists, and where action happens.
Input
Requests enter through a clear surface.Chat, forms, and operator prompts all share one visual language so the system feels consistent before any AI shows up.
Reasoning
Model calls become an explicit layer.Rather than hide the intelligence behind decorative product copy, the page names the reasoning stage and shows its job.
State
Long-running work needs visible memory.State, workflows, history, and retries can all be described in framed modules that reinforce system trust.
Action
Tools are where the page gets real.Show the APIs, runtimes, and integrations as first-class capabilities instead of burying them in feature bullets.
Tokenize the pattern so it can become a real design system.
These are the reusable decisions underneath the page. Once they are stable, you can promote this from a mockup into a proper mini site, docs landing page, or product microsite family.
TypographyOversized groteskStrong headline scale, tight tracking, strategic italics, low copy density.
ColorWarm white + one orange axisBrand expression comes from one primary hue, not from a palette explosion.
StructureFramed canvas + thin rulesLet the grid be visible so the site feels infrastructural rather than merely polished.
ComponentsPills, cards, bubblesFriendly technical UI that can carry both marketing and explanation modes.
MotionQuiet and statefulSubtle fades, toggles, and content swaps instead of theatrical reveal sequences.
ContentHero → compare → inspectLead with a thesis, then show behavior, then show architecture or operational logic.
Use this as a starter for a real microsite.
Next step: adapt the copy, accent color, and lower modules to your actual product story — Focus, agent runtime, workflow studio, or ecosystem report — while keeping the same structural skeleton.