Kleros Skills — Landing Page Design SpecLegacy format

A single-page landing site that distributes machine-readable knowledge packs ("skills")

to AI agents. The page must read as developer-native and agent-first — it should feel

like documentation/CLI tooling, not a marketing splash. The core action is *copy a prompt

and paste it into your agent*.

Aesthetic direction: a hybrid of warm paper UI and a dark terminal. The body is a calm,

cream-colored reading surface; the hero and code surfaces are dark "terminal" panels. The

contrast frames the product as a bridge between human-friendly docs and machine-facing code.

---

Light cream body with dark terminal accents and a single violet brand hue (Kleros purple).

### Light surface (body)

| Token | Value | Use |

|---|---|---|

| --bg | #f6f1ea | Page background (warm cream) |

| --bg-soft | #efe7dc | Inset rows, tab bar |

| --card | #ffffff | Cards, panels |

| --border | #e3d8c8 | Primary borders |

| --border-soft | #ece2d2 | Subtle dividers, dashed rules |

| --ink | #1f1530 | Primary text |

| --ink-dim | #6b5f7e | Secondary text |

### Accent (Kleros violet)

| Token | Value | Use |

|---|---|---|

| --accent | #6b2fd6 | Links, CTAs, active states, left card rule |

| --accent-soft | #f0e6ff | Tag/chip backgrounds, code highlight |

### Dark surface (hero + code blocks)

| Token | Value | Use |

|---|---|---|

| --dark | #1a1426 | Hero panel, code block bg |

| --dark-panel | #221a33 | Nested dark surfaces |

| --dark-border | #3a2f55 | Dark borders, terminal dots |

| --dark-accent | #c084ff | ASCII art, accents on dark |

| --dark-fg | #ebe6f7 | Text on dark |

| --dark-dim | #9b8fc4 | Muted text on dark |

| --danger | #c94a4a | Error states (modal load failure) |

Rule: exactly one accent hue (violet). It appears on light as #6b2fd6 and lifts to

#c084ff on dark for contrast. No gradients, no secondary accent colors.

---

• Centered column, max-width: 1180px, 56px side padding (20px on mobile).

• Vertical rhythm between major sections: padding-top: 72px.

• Generous radii: panels 14–18px, cards 12px, code blocks 8px, chips 3px.

• Shadows are soft and long, low-opacity, violet/ink-tinted — used sparingly on the

hero panel and on hover, never as decoration.

### Page structure (top → bottom)

1. Top nav — brand mark (K in a dark rounded square) + kleros / skills + beta tag; right-side anchor nav + GitHub link.

2. Hero panel (dark) — terminal chrome dots + path, large ASCII Kleros logo + ASCII wordmark, one-line tagline.

3. Primary CTA (light card) — "① Paste this into your agent", the one-line prompt in an inset row with a big Copy button.

4. Works with strip — Claude · ChatGPT · Cursor · Codex · OpenClaw · … any agent.

5. Skills — 2-up responsive grid of skill cards (collapses to 1 column < 760px).

6. Persistent setup — tabbed widget (Codex / Cursor / Claude Code / OpenClaw / Scripts) with copyable code blocks.

7. Contribute — PR call-to-action panel.

8. Footer — license, links, SKILL.md.

---

• Transitions are short (.15s) and limited to color/border/transform.

• Hover affordances: card lift, button border/color shift.

• Copy actions give a 1.5s "Copied!" confirmation (label swap or checkmark).

• Modal: fadeIn backdrop + slideUp box (~0.2–0.25s).

• No scroll-jacking, parallax, autoplay, or looping decorative animation.

---

Terse, imperative, developer-to-developer. Numbered steps ("① Paste this…"). Mono for

anything a machine consumes (paths, commands, URLs). Honest scale signals ("2 live",

"beta"). Both "humans and agents" addressed as readers.

---

• < 880px: hero ASCII stacks vertically, shrinks.

• < 760px: skills grid → single column.

• < 720px: nav text links hidden, page padding → 20px.

• < 540px: hero padding tightens, wordmark shrinks, CTA row wraps.

---

Adapted from [ethskills](https://github.com/austintgriffith/ethskills). Bot-readable by

design — each skill lives at //SKILL.md; the site is the human-facing index over

that same content. MIT licensed.