Tuple

**Quick Color Reference** - Text: #27272a (primary), #71717a (secondary), #a1a1aa (muted) - Background: #fafafa (page), #ffffff (card), #f4f4f5 (wash), #18181b (dark band) - Border: #e4e4e7 (hairline), #d4d4d8 (muted), #52525b (emphasized) - Accent: #3f71d4 (blue), #db5434 (orange), #1bb152 (green) - primary action: #6a5ed9 (filled action) **3-5 Example Component Prompts** 1. *Create a hero section:* Background #fafafa. Centered DM Mono eyebrow pill in #1bb152 (13px, letter-spacing 0.1em, uppercase, 4px 12px padding, 9999px radius). Headline 'Headline here' at 48px Inter Variable weight 700, #27272a, line-height 1.14. Subtitle at 18px Inter weight 400, #71717a, max-width 640px. Violet CTA button (#6a5ed9 fill, white text, Inter 16px weight 500, 12px radius, 12px 24px padding). Section padding 96px top/bottom. 2. *Create a feature card:* White background, 1px #e4e4e7 border, 12px radius, 24px padding. Small brand-color icon (32px, #3f71d4 stroke). Heading 'Feature title' at 20px Inter weight 600, #27272a. Body copy at 16px Inter weight 400, #71717a, line-height 1.63. 3. *Create a dark feature band:* Background #18181b, 96px vertical padding. Centered DM Mono eyebrow in #4ade80 ('WORKFLOW', 13px, 0.1em letter-spacing, uppercase). Heading at 36px Inter weight 700, #ffffff. Content card with #27272a surface, 1px #3f3f46 border, 12px radius, containing a file-tree UI with folder icons in #3f71d4 and #1bb152. 4. *Create a trusted-by logo strip:* Background #fafafa. Centered DM Mono eyebrow 'TRUSTED BY THOUSANDS OF TEAMS' in #71717a (12px, 0.1em letter-spacing, uppercase, #1bb152 word). Below: single horizontal row of 5–6 grayscale partner logos spaced 64px apart, all desaturated to #71717a opacity. 5. *Create a product screenshot frame:* Rounded container at 12px radius with 0 25px 50px -12px rgba(0,0,0,0.25) shadow. Inside: a macOS window screenshot showing a code editor over a green-to-coral gradient wallpaper. Frame max-width 900px, centered, with 64px section padding above and below.

**Four-color accent palette, not one.** Most brands commit to a single accent color. Tuple uses four — violet, blue, orange, green — but enforces a strict rule: violet is action, the other three are decoration. This lets the CTA stay singular and urgent while giving illustrations, product chrome, and section eyebrows a playful multi-color personality. **Mono eyebrows above every section.** A DM Mono uppercase label in a brand accent color sits above section headings throughout the site. This is the strongest 'devtool identity' signal: it borrows the terminal/CLI aesthetic without being a code block, and it creates consistent vertical rhythm across sections. **Dark band as rhythm device.** Most of the page is light. One dark band appears mid-page (the 'Built for developers' section), creating a dramatic contrast reset that makes the surrounding light sections feel brighter. The dark band also hosts the most technical UI (file tree, folder icons), reinforcing the 'product for engineers' message. **Zinc-based neutral scale.** Tuple avoids blue-tinted or warm-tinted grays — the neutrals are true zinc (cool but achromatic). This keeps the four accent colors visually pure; warm grays would muddy the coral and saffron, cool grays would fight the cobalt and iris.