## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/termsquad-com/d12b8131-9740-4063-aef8-780525dfffce-1789166919347-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/termsquad-com/d12b8131-9740-4063-aef8-780525dfffce-1789166917198.webp
- Design on Kage: https://kage.design/designs/termsquad-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, colours, typography, logo, and imagery). Wait for their answers before designing. Apply the system below to their product, not to the reference product, and use their own content and brand assets.

## Page structure
1. **Global header:** Build a compact, near-black navigation bar with a small brand mark at left, a centered/inline set of product links, and login plus a high-contrast primary button at right.
2. **Hero:** Center a very large two-line headline, short muted supporting copy, paired light and outlined CTAs, and a small compatibility strip of tool marks beneath. Place a large framed product-interface visual below the copy, with a dark browser shell and multi-column agent activity/status panes.
3. **Hero transition row:** Add a quiet caption at the lower left and a directional exploration link at the lower right, separated from the next section by a thin horizontal rule.
4. **Persistent-computer section:** Use a small uppercase eyebrow, a large two-line headline with one brighter and one gray line, and a right-aligned explanatory paragraph. Below, place a wide bordered demonstration panel showing a connected laptop on the left and a browser terminal on the right, followed by a small caption/link row.
5. **Agent-squad section:** Repeat the eyebrow and split headline/copy arrangement. Add a wide dark panel containing an orchestration node above three parallel implementer nodes feeding into a reviewer node; use fine connector lines and subtle colored node accents. Under it, show three evenly spaced numbered steps explaining delegation, parallel progress, and review.
6. **Shared-memory section:** Create a two-column feature block with explanatory copy on the left and a framed vertical workflow visual on the right. Stack agent/session cards around a highlighted memory card connected by a thin line, then add a small caption beneath.
7. **Tools and infrastructure section:** Center an eyebrow, headline, and short paragraph, then present a two-by-two grid of large bordered cards. Cover compatible agents, browser/SSH access, fully managed infrastructure, and workload capacity; use miniature terminal, server, icon, and bar-graph UI details inside the cards. Finish with a quiet comparison/caption row.
8. **Pricing section:** Center an eyebrow, headline, and supporting copy. Add a slim row of included benefits, then four equal pricing cards in one row with plan label, description, large monthly price, CTA, and compact CPU/RAM/storage specifications. Give one recommended card a subtle green wash, green border, and light CTA. Add a provider-cost note and comparison link below.
9. **FAQ section:** Divide the area into a left heading block with eyebrow, title, and help link, and a right accordion list. Use full-width horizontal rules, concise questions, and plus controls aligned to the far right.
10. **Final CTA band:** Switch to a very dark green-tinted background. Center a small eyebrow, two-line headline, short supporting text, paired CTAs, and a small price/availability note.
11. **Footer:** Return to near-black. Place the brand and short description in the left column, grouped product/resources/connect links across the right, then a bottom row with copyright, a compact brand statement, and legal links.

## Design language
- Use a near-black foundation around **#07090A / #090B0C**, with panel surfaces around **#0D1011** and barely visible gray-green gradients behind major product visuals.
- Build hierarchy through scale and contrast: oversized geometric sans headlines around 56–76px desktop, compact 12–16px body copy, and tiny uppercase mono-style eyebrows with generous letter spacing.
- Pair bright off-white headline text around **#F1F3F2** with secondary gray around **#8C9291**. Frequently make the second line of a headline gray to create a two-tone editorial rhythm.
- Treat green as a status and action accent, not a decorative palette: use a pale mint/green around **#BFF5D3** for primary buttons, a muted neon green around **#8FE8B2** for online states and labels, and deep green washes around **#10251C** for highlighted panels.
- Keep layouts spacious and vertically paced. Use large blank intervals between feature stories, then increase density inside framed interface demos, diagrams, pricing cards, and FAQ rows.
- Use a wide desktop container with approximately 32–36px side gutters, two-column editorial splits, and four-column card grids. Let large product visuals span nearly the full content width.
- Define panels with 1px borders around **rgba(180,210,200,.12)**, subtle inner highlights, 12–16px corner radii, and almost no conventional shadow. Use layered dark surfaces and hairline dividers instead of heavy elevation.
- Make interface mockups feel operational: browser chrome, terminal rows, status dots, tiny labels, connectors, monospace snippets, and restrained green completion states. Keep diagrams precise and sparse rather than illustrative.
- Use square or compact geometric controls, modest button radii around 7–9px, and arrow-forward affordances. Primary buttons are light; secondary buttons are transparent with a thin border.
- On interaction, preserve the quiet technical tone: use short opacity, border, and background transitions; let accordions expand with a restrained height animation; avoid bouncy motion, excessive parallax, or decorative effects.
- On smaller screens, stack split sections and pricing cards, keep mockups horizontally scrollable or simplify them, and preserve the large type-to-small-label contrast without crowding.

## Never
- Do not copy the reference product's logos, wordmarks, product name, tagline, copy, interface labels, illustrations, photography, or icon set.
- Do not present the result as the reference product or imply an affiliation.
- Do not reproduce its exact agent names, pricing, diagrams, screenshots, or marketing claims; translate the structural and visual principles into the user's own product and content.