Overview
Design the page so the message becomes easier to understand.
The layout should support credibility, not decoration.
Core rules
- Keep layout simple and readable.
- Use strong section hierarchy.
- Make the hero immediately understandable.
- Prefer whitespace and alignment over visual clutter.
- Keep responsive behavior predictable.
- Reuse patterns consistently.
Visual character
The site should feel:
- technical
- industrial
- precise
- modern
- restrained
Avoid:
- overly soft consumer-app styling
- startup cliché gradients everywhere
- crowded dashboards on the homepage
- flashy motion that weakens credibility
Preferred homepage flow
Default page order:
- Hero
- Problem
- Solution
- Platform architecture / how it works
- Key capabilities
- Why teams care
- CTA
Only deviate when the narrative becomes stronger.
Section design guidance
Hero
Must communicate:
- what UCE is
- who it is for
- why it matters
Should include:
- headline
- supporting copy
- primary CTA
- optional visual such as architecture diagram or structured workflow graphic
Problem section
Show current workflow pain clearly:
- fragmented spreadsheets
- documents
- inconsistent logic definitions
- difficult validation
- commissioning risk
Solution section
Explain the structured model-driven approach simply.
Architecture section
Use a simplified stack or flow:
- define
- validate
- compile
- hand off
Do not overwhelm with too many boxes.
Capability section
Use cards or a clean grid. Keep each capability distinct.
CTA section
Make it easy to take one action. Do not present too many competing actions.
Responsive rules
- Mobile layout must remain clear and linear.
- Avoid complex multi-column logic on small screens.
- Collapse grids cleanly.
- Keep hero readable without relying on desktop-only visuals.
- Maintain consistent spacing rhythm.
Component rules
Prefer a small reusable set:
- section wrapper
- headline block
- feature card
- architecture block
- CTA block
Avoid building too many custom patterns in the MVP.
Diagram rules
Architecture visuals should:
- simplify
- reinforce the model
- not attempt full product UI simulation
Preferred diagram themes:
- flow from engineering intent to outputs
- platform stack
- engineering model / validation / export flow
Implementation rules
- Use semantic HTML where possible.
- Keep CSS organized and readable.
- Avoid dependency-heavy visual libraries unless approved.
- Use minimal JavaScript.
- Keep interactions lightweight.
Output preference
When proposing layout changes, provide:
- section order
- purpose of each section
- visual pattern recommendation
- responsive considerations
- implementation notes only when needed