---
version: alpha
name: "curl"
description: "curl's current homepage celebrates thirty years with a large navy-and-green wordmark, a navy navigation bar, white technical canvas, bold Arial copy, protocol tables, and a visible sponsor rail. Preserve its unusually direct, standards-oriented information density and recognizable slash motif."
colors:
  bg: "#ffffff"
  surface: "#e7e7e7"
  text: "#000000"
  brand: "#173b5b"
  on-brand: "#ffffff"
  border: "#222222"
  text-soft: "#4f4f4f"
  accent-green: "#285c50"
  link: "#4040ff"
  sponsor-bg: "#efefef"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "56px"
    lineHeight: 1.45
    letterSpacing: "0"
  body:
    fontFamily: "Inter"
    fontSize: "18px"
    lineHeight: 1.45
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "4px"
  card: "6px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "24px"
  xl: "48px"
---

## Overview

## Overview

curl is direct, celebratory, and deeply technical. A slim navy navigation bar sits above a very large thirty-year curl graphic, followed immediately by a plain-language description, protocol support, downloads, documentation, and a visible sponsor rail.

The design should keep the transfer tool itself larger than surrounding promotion. Dense tables and lists are a feature when they remain legible, searchable, and responsive.

**Key Characteristics**
- White technical canvas
- Navy navigation and core identity
- Green secondary identity
- Large anniversary or project mark
- Bold Arial headings
- Dense protocol and capability tables
- Visible sponsor rail
- Square, minimally animated interface

## Colors

Use #173b5b for navigation, primary actions, and core identity. Green #285c50 is a supporting brand accent, not a second action hierarchy. Black carries body copy; conventional blue #4040ff identifies inline links. Gray surfaces support protocol tables and sponsor content.

## Typography

Use Arial or Helvetica throughout. The observed body can be unusually large at 18-20px; preserve that legibility around dense technical material. Use 30px h2 and 24px h3 headings, with monospace for commands, flags, protocols, URLs, and response examples. Keep letter spacing at zero.

## Layout

Use a 1000px centered shell with a 760px main column and narrow sponsor rail where space permits. Keep the project mark and direct definition in the first viewport. On documentation pages, prioritize command examples and stable navigation over the anniversary art.

Below 900px, move the sponsor rail below the main content. Below 640px, collapse navigation, scale the project graphic with a bounded image container, keep 18px reading text where possible, and make protocol tables horizontally scrollable within their region.

## Elevation & Depth

Use borders, fills, and typographic weight rather than shadows. The sponsor rail and tables can use gray fills; the main content stays flat. Menus may use a small shadow only when they overlap other content.

## Shapes

Use 0-2px for navigation and controls, 4px for sponsor or table containers, and at most 8px for an overlay. Tables, code, and protocol blocks remain square. Pills are reserved for version or protocol status.

## Components

Primary buttons are square navy actions; secondary buttons are white with a navy border; tertiary actions are underlined blue links; destructive actions require a separate semantic red. Protocol tables use navy or green headers, clear row boundaries, and text labels. Sponsor modules remain visually secondary. Navigation uses text links rather than icon-only controls. Inputs include explicit labels and strong blue focus.

Use immediate link feedback, 80ms button states, and 120ms menu changes. Copy actions confirm without moving layout. Focus is a 2px blue outline with 2px offset. Reduced motion removes smooth scrolling and any anniversary graphic movement.

Keep blue links underlined, identify protocol support in text, and provide accessible table headers. Command samples need labels and copy buttons; URLs must wrap or scroll without widening the page. Sponsor logos require meaningful names, and navigation must be keyboard operable.

Use literal, standards-oriented copy: "Download curl", "Read the documentation", "Browse libcurl", and "Get help". State protocol, operating system, version, and command consequences. Avoid vague networking language when an exact URL, header, or option is available.

The audited page is light-only. A dark reader theme needs dedicated navy, green, link, table, code, border, and sponsor tokens. Do not invert the anniversary mark or collapse protocol color distinctions.

curl belongs to Internet protocol references, Unix manual pages, and standards documentation. The current anniversary treatment adds celebration without displacing the project's defining qualities: broad protocol support, portability, and exact technical access.

## Do's and Don'ts

**Do**
- Keep the tool definition visible.
- Use navy as the main identity.
- Keep protocol support searchable.
- Make commands copyable.
- Preserve large readable body text.
- Keep sponsors secondary.
- Reflow tables safely.
- Underline inline links.

**Don't**
- Do not turn protocols into decorative icons only.
- Do not hide libcurl behind product copy.
- Do not clip long URLs.
- Do not over-round tables.
- Do not animate the anniversary mark continuously.
- Do not use green as a second primary action.
- Do not bury downloads.
- Do not replace exact standards language with slogans.

**Quick colors:** background #ffffff; text #000000; curl navy #173b5b; curl green #285c50; link #4040ff; surface #e7e7e7; border #222222.

**Example prompts**
- Create a curl homepage with a navy navigation bar, large project mark, and immediate tool definition.
- Design a protocol support table with accessible headers and bounded mobile scrolling.
- Build a command example with URL context, flags, output, and a labeled copy action.
- Create a responsive page that moves sponsors below the technical content under 900px.

**Iteration guide:** establish tool and protocol hierarchy; set navy and green roles; build tables and command state; keep sponsors secondary; verify mobile overflow; then test link and focus visibility.