Respect the 4px–48px spacing range — the design uses a wide scale for visual breathing room
Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
Repeat the primary CTA across 3 banner sections — conversion paths are layered, not single
Don't
Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't increase letter-spacing on headings — the type is designed to run tight at scale
Don't invent new shadow values — use only the extracted shadow levels
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't make the nav sticky — this design lets it scroll away to maximize content focus
10
Agent guide & export
Paste-ready prompt + the real files behind this page
Build a UI in the composio.dev design system.
Canvas #f6f6f6 · ink #0f0f0f · accent #ffffff.
Type: abcDiatype — respect the size/weight ladder in §3.
Radius, spacing, shadow: use only the extracted scales (no magic numbers).
Full spec follows — paste the DESIGN.md below into your agent.