Framer design guide

marketing: Dark, product-led

• Canvas: #000000
• Card surface: #111111
• Raised surface: #171717
• Primary text: #ffffff
• Secondary text: rgba(255, 255, 255, 0.6)
• Muted UI text: #999999
• Accent blue: #0099ff
• Secondary button fill: rgba(255, 255, 255, 0.1)

Layout and components

• Content sits in a 1200px column centred in the 1440px viewport (120px side margins); the headline, logo strip and cards all align to it.
• The navigation bar (logo, Platform, Solutions, Resources, Enterprise, Pricing, Log in, Sign up) is pinned to the top of the viewport and sits directly on the black page with no visible band or border.
• Section headings are left-aligned with a small action button aligned right on the same row; about 240px of empty black separates the end of one section from the next heading.
• Home and CMS end with the same centred 'Your next idea starts here' prompt box, suggestion chips and a six-column footer.
• Buttons: 34px high, 8px radius, 10px / 14px padding; the primary has a white fill with a dark label, the secondary a rgba(255, 255, 255, 0.1) fill with a white label; the Pro plan button is filled #0099ff.
• Feature cards: a dark rounded card holding a product mockup, with a title, a 60% white description and a 'Start with Agents →' link; the first card has an agent-chat panel beside it (prompt, 'Thinking…', a changes list and a follow-up box).
• Bento grids: cells separated by hairline borders inside one rounded outline, each labelled at the bottom left, some with an arrow link.
• Pricing: plan columns in one bordered row with a credits dropdown and tick list; a comparison table with a sticky plan header row, ticks and crosses; the FAQ shows every answer open.