Linky logoLinky

Design system · v0.1.0

The Linky design system.

One source of truth for how Linky looks, speaks, and moves.

Rendered live from design/tokens.json. If you're about to hard-code a hex, size, or duration, use a token from this page instead.

Brand

Many URLs. One Linky.

Positioning, personas, customer language, and launch plan live in .agents/product-marketing-context.md. The rules below are how that strategy shows up in the product.

Sanctioned copy

  • H1

    Many URLs. One Linky.

    Canonical since PR #10. The many→one parallel IS the product.

  • Hero lead

    One short link that opens every tab — for humans or agents alike.

    Outcome sentence; names the audience.

  • Hero sub-lead

    Paste your list, share the link. Works the same in any browser, CLI, or agent prompt.

    How + where.

  • Sub-CTA microcopy

    No signup, no credit card. MIT-licensed — self-host anytime.

    Anxiety-reducers at the conversion moment.

  • Demo heading

    Paste a few URLs. Get one Linky back.

    Imperative, concrete.

Retired — do not resurrect

  • One Linky to open them all.

    LOTR reference tax + ambiguous "them" + cleverness over clarity.

  • Agent-first launch orchestration.

    Abstract category jargon; doesn't tell a first-time reader which shelf Linky sits on.

  • Give Linky a list of URLs and get back one short launcher link. Purpose-built for agents, workflows, and fast context handoffs.

    "Fast context handoffs" is vague filler.

Product language (strict)

TermUse forNever
Linky (singular)The brand, the short URL, the verb.—
launch bundle(s)The plural in prose.Linkies in UI / docs
launcher page/l/[slug] — Open All lives here."Linky page", "the landing"
claim URL / claim flowAgent → human handoff."activation link", "bind URL"

Color

Monochrome by design.

--linky-color-ink

#111111

Primary foreground. Body text, wordmark, slash mark, primary button fill.

--linky-color-paper

#ffffff

Canonical background. Unchallenged — no gradients, no off-whites.

--linky-color-mute

#666666

Secondary text (leads, muted captions, table meta).

--linky-color-line

#d9d9d9

Hairline rule. Borders, dividers, terminal panels.

--linky-color-line-strong

#111111

Active focus border. Primary CTA outline. Same ink as text — always square.

--linky-color-surface-soft

#fafafa

Faint surface lift for docs tables + zebra blocks. Reach for it sparingly.

--linky-color-code-fill

#f4f4f4

Inline-code background, matched to line for 1px borders to read.

--linky-color-danger

#9a2f24

Only sanctioned hue beyond monochrome. Use for destructive confirmations and hard errors — never decoration.

--linky-color-scrim

rgba(17, 17, 17, 0.03)

Horizontal scanline. Applied via body::before to carry the terminal texture.

Typography

Two families. One system.

Display — Bricolage Grotesque

Many URLs. One Linky.

Bricolage 600 · tracking -0.02em · leading 0.9 · hero only.

Mono body — IBM Plex Mono 500

One short link that opens every tab — for humans or agents alike.

Paste your list, share the link. Works the same in any browser, CLI, or agent prompt.

Type scale

TokenremSpecimen
micro0.66remMany URLs. One Linky.
xs0.72remMany URLs. One Linky.
sm0.82remMany URLs. One Linky.
base0.88remMany URLs. One Linky.
body1remMany URLs. One Linky.
lead1.25remMany URLs. One Linky.
h31.35remMany URLs. One Linky.
h21.875remMany URLs. One Linky.
h13remMany URLs. One Linky.
display3.75remMany URLs. One Linky.

Space + Radius

The rhythm is square and 1px.

Spacing scale

  • space-00
  • space-10.25rem
  • space-20.5rem
  • space-30.75rem
  • space-41rem
  • space-51.25rem
  • space-61.5rem
  • space-82rem
  • space-102.5rem
  • space-123rem
  • space-164rem

Radius

square

0

pill

9999px

Terminal aesthetic is square. 0 is the default and 99% of surfaces. pill requires design review.

Shadow

Applied to .terminal-input:focus. Two layers: sharp inline ring + long soft lift.

Primary button hover.

Resting copy-to-clipboard chip.

Terminal shell surface. Only the app chrome gets this — not cards.

Motion

Short, scoped, cued to action.

Hover the samples to see the transition fire. Nothing loops. Nothing moves on its own.

Duration

TokenValueUse
instant80ms—
fast120msHover + focus transitions.
base160msInput focus lift.
entrance460msShell rise on page load.

Easing

TokenValueUse
standardease—
outease-outEntrance animations.
in-outcubic-bezier(0.4, 0, 0.2, 1)—
spring-ishcubic-bezier(0.2, 0.9, 0.3, 1)CTA press + copy confirmation.

Interactions

Each button lifts by --linky-lift (1px) on hover over --linky-duration-fast (120ms). Anything more is a regression.

Components

Terminal primitives. Site primitives.

Buttons

Input

Chips

Source: agentTeam-ownedPolicy attachedAnonymous

Code shell

bash
npx getalinky create \
  https://example.com \
  https://example.org \
  --title "Design review"

Divider list + card

Hand off full context packs between agents and teammates — one URL replaces a wall of links.

Give every agent task a clean ending: one Linky instead of 10+ URLs in chat.

Patterns

Composing pages out of the primitives.

Hero composition

Open source · Agent-first · MIT

Many URLs. One Linky.

One short link that opens every tab — for humans or agents alike.

Paste your list, share the link.

No signup, no credit card. MIT-licensed — self-host anytime.

Launcher attribution footer (spec)

Made with Linky · getalinky.com

Hosted free + anonymous launchers only. Hosted paid tier removes it; self-hosters configure their own default. Hover the footer text for the low-surveillance reassurance line.

Voice

Stark. Agent-first. No fluff.

BeforeAfter
Welcome to Linky! Ready to get started?Paste your list, share the link.
Oops, something went wrong.Linky is temporarily unavailable. Try again in a few seconds.
Your LinkiesYour launch bundles
Unlock custom domainsCustom domains ship with accounts.
Supercharge your agent workflowYour agent returns one URL instead of ten.
Powered by LinkyMade with Linky · getalinky.com

Full seven-sweep editing framework lives in .agents/skills/copy-editing/SKILL.md. Run it on every copy change before shipping — especially on the landing page and hero.

Meta

Where this lives.

  • design/tokens.json

    Canonical tokens. W3C DTCG format; imports cleanly into Figma Tokens Studio, Style Dictionary, and agent tooling.

  • design/tokens.css

    Same tokens as CSS custom properties, imported by globals.css and the /design route.

  • design/*.md

    Brand, color, typography, logo, motion, components, layout, writing, slides, animation, accessibility guidance.

  • .agents/product-marketing-context.md

    Source of truth for strategy. The design system derives from it.

  • .agents/skills/copy-editing/SKILL.md

    Seven-sweep editing framework for all copy changes.