Untitled Design System
Professional LiDAR onboarding page with cool-blue instructional UI, modular cards, and high-clarity workflow storytelling. The interface combines instructional clarity with product confidence: light neutral canvas, dense modular cards, and controlled blue emphasis for guidance, navigation, and action.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Professional LiDAR onboarding page with cool-blue instructional UI, modular cards, and high-clarity workflow storytelling. The interface combines instructional clarity with product confidence: light neutral canvas, dense modular cards, and controlled blue emphasis for guidance, navigation, and action.
Components
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Buttons
journey-step-badge
default
Elevation & Depth
Do's & Don'ts
Do
Don't
- Do preserve the blue-led instructional hierarchy.
- Do keep heavy typography only for headings and CTA anchors.
- Do maintain large radii and soft shadows for modular clarity.
- Don't replace operational cards with generic marketing banners.
- Don't introduce multiple accent families that weaken process signaling.
- Don't over-animate; this page is a workflow guide, not a showcase microsite.
Design Intent
The page should feel like a field operations manual rendered as a modern web product.
• Prioritize scanability over decorative complexity.
• Keep hierarchy explicit: hero, process, standards, resources, outputs, troubleshooting.
• Use blue as the dominant instructional signal color.
• Reserve dark high-contrast panels for “outcome/value” blocks (deliverables, support).
Foundations
### Color System
The palette is cool, technical, and trust-oriented.
• Light background and white cards establish reading comfort.
• Blue family (#2563eb, #1d4ed8, #eaf2ff) drives action and orientation.
• Green family (#16a34a, #e9f8ef) communicates checklist correctness.
• Dark gradients (#172033 → #0f172a → #111827) emphasize final outputs.
### Typography
Roboto is used as a single-family system for consistency across instructional and product UI contexts.
• Heavy weights (800/900) are used for section titles and CTA emphasis.
• Body copy maintains generous line height for long-form operational guidance.
• Small labels remain compact but bold for quick category parsing.
### Shape and Elevation
Rounded geometry and soft shadows create approachable but structured information blocks.
• Card radii: 20-24px.
• Panel radius: 28px.
• Shadows are soft and broad to separate zones without harsh contrast.
Layout and Responsiveness
### Desktop (>= 990px)
• Hero: two-column composition with visual background support.
• Journey: 4 + 3 step topology with animated dashed path.
• Resource cards: 4-column grids.
• Deliverable chips: 3-column grid.
### Tablet (700px - 989px)
• Resource and content grids collapse to 2 columns.
• Priority cards can span full width.
### Mobile (<= 699px)
• Single-column flow.
• CTA buttons become full width.
• VR showcase shifts to portrait ratio (9:16) for device ergonomics.
Interaction and Motion
• Journey path animation: continuous dashed flow (18s linear infinite).
• Card hover: subtle translateY lift for discoverability.
• Resource CTA hover: slight translateX to reinforce “go deeper”.
• Keep all motion short, meaningful, and operationally calm.
Content Model (DesignMD-friendly)
• Hero value proposition
• Process map (7-step)
• Standards and checks
• Actionable resource matrix
• Deliverable proof block
• Troubleshooting knowledge base
• Support conversion block
Implementation Guidance
• Convert --guide-* variables into your global token layer first.
• Implement components in this order: hero -> journey -> resource-card -> faq -> deliverables-panel.
• Keep content externalized (CMS/JSON) so links and FAQ can evolve without style drift.
Use with MCP
Don't have the MCP? Install it here