The Pack · 50 entries

Steal the system,
not the screenshot.

Name: Annotated Interfaces — Pack 01
Brand: Annotated
Price: 29 USD
Availability: PreOrder

50 interfaces from the index, annotated. Every entry ships with its full type stack, semantic colors, type and spacing scales, radii, 7–10 notes and a prompt you can hand to your AI agent to rebuild it.

Get the Pack — $29 What's inside

50 entries live in the free index. The Pack adds the full token set, 7–10 notes per entry and the prompts.

What's inside

Everything you need to go from “I like this” to “I can rebuild this”.

50 teardowns, 7–10 notes each

Typography, color, layout, motion and the system behind them. No “clean and modern” filler.

Design tokens, as JSON

Full type stacks, semantic colors, type and spacing scales, font weights and radii, extracted from the live page. One file per entry, plus a combined pack file.

Rebuild prompts

A ready-to-paste prompt per entry for Cursor, Claude, Codex or any agent, built from the same tokens and notes. Constraints included, proprietary assets excluded.

Free index, forever

The browsable index stays free. The Pack is the export layer: tokens, prompts and the full annotation set.

Free vs Pack

The index is for browsing. The Pack is for building.

What you get	Free index	The Pack
50 annotated entries	Yes	Yes
Notes per entry	3	7–10
Type stack	Primary font	Full stack
Palette + radii	3-color preview	Full set
Semantic colors	—	Background, text, muted, border, accent
Type + spacing scale	—	Yes
Motion notes	—	Yes
Rebuild prompts	1 sample	All 50
Structured JSON	—	tokens.json + 50 files
Client work	Yes	Yes
Resale / redistribution	No	No

Get the Pack

Sample entry

Linear, in tokens.

Every export has this shape: semantic colors, type and spacing scales, motion, 7–10 notes and a prompt built from the same fields.

Open the full sample →

color
Deep black background (#0f1011) paired with neutral gray border strokes and crisp white heading text creates high contrast.
typography
Set in Inter Variable with tight tracking on oversized, multi-line hero headers establishing a serious developer-tool tone.
layout
Product preview window utilizes rounded containers and nested sidebar elements that mirror the actual software interface accurately.

{
  "slug": "linear-app",
  "name": "Linear",
  "url": "https://linear.app/",
  "category": "developer tool",
  "tagline": "The system for product development and AI agents.",
  "theme": "dark",
  "type": {
    "primary": "Inter Variable",
    "stack": [
      "Inter Variable",
      "SF Pro Display",
      "-apple-system",
      "system-ui",
      "Segoe UI"
    ]
  },
  "palette": [
    "#f7f8f8",
    "#8a8f98",
    "#62666d",
    "#d0d6e0",
    "#ffffff",
    "#0f1011",
    "#e2e4e7",
    "#2e2e32"
  ],
  "semantic": {
    "background": "#08090a",
    "surface": "#0f1011",
    "text": "#f7f8f8",
    "muted": "#8a8f98",
    "border": "#23252a",
    "accent": "#e4f222"
  },
  "typeScale": {
    "sizes": [
      10,
      12,
      13,
      14,
      15,
      16,
      18,
      24,
      48,
      64
    ],
    "body": 14,
    "display": 64
  },
  "spacingScale": {
    "values": [
      2,
      3,
      4,
      6,
      7,
      8,
      10,
      12,
      14,
      16,
      24,
      32
    ],
    "base": null
  },
  "fontWeights": [
    300,
    400,
    500,
    600
  ],
  "radii": [
    "9999px",
    "50%",
    "8px",
    "12px",
    "4px",
    "9px"
  ],
  "motion": {
    "animatedElements": 423,
    "durations": [
      100,
      160,
      1600,
      2800,
      3200
    ],
    "easings": [
      "ease",
      "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
      "steps(1)"
    ]
  },
  "notes": [
    {
      "kind": "color",
      "text": "Deep black background (#0f1011) paired with neutral gray border strokes and crisp white heading text creates high contrast."
    },
    {
      "kind": "typography",
      "text": "Set in Inter Variable with tight tracking on oversized, multi-line hero headers establishing a serious developer-tool tone."
    },
    {
      "kind": "layout",
      "text": "Product preview window utilizes rounded containers and nested sidebar elements that mirror the actual software interface accurately."
    },
    {
      "kind": "color",
      "text": "Semantic palette: background #08090a, surface #0f1011, text #f7f8f8, muted #8a8f98, border #23252a, accent #e4f222."
    },
    {
      "kind": "typography",
      "text": "Type scale: 10, 12, 13, 14, 15, 16, 18, 24, 48, 64px; body at 14px, display at 64px."
    },
    {
      "kind": "layout",
      "text": "Spacing repeats at 2, 3, 4, 6, 7, 8, 10, 12, 14, 16, 24, 32px."
    },
    {
      "kind": "detail",
      "text": "Corner radii: 9999px, 50%, 8px, 12px, 4px, 9px."
    },
    {
      "kind": "motion",
      "text": "423 elements animate; durations 100, 160ms; primary easing ease."
    },
    {
      "kind": "typography",
      "text": "Font weights in use: 300 / 400 / 500 / 600."
    }
  ],
  "prompt": "Rebuild the above-the-fold of Linear (https://linear.app/) as a responsive web page.\nTheme: dark\nPrimary typeface: Inter Variable\nType stack: Inter Variable, SF Pro Display, -apple-system, system-ui, Segoe UI\nSemantic colors: background #08090a, surface #0f1011, text #f7f8f8, muted #8a8f98, border #23252a, accent #e4f222.\nType scale: 10, 12, 13, 14, 15, 16, 18, 24, 48, 64px.\nSpacing: 2, 3, 4, 6, 7, 8, 10, 12, 14, 16, 24, 32px.\nCorner radii: 9999px, 50%, 8px, 12px, 4px, 9px.\nMotion: durations 100, 160ms; primary easing ease.\nLayout: Product preview window utilizes rounded containers and nested sidebar elements that mirror the actual software interface accurately.\nMatch the hierarchy and spacing shown in the source page. Treat the palette, type stack and scales as constraints.\nReplace all copy, logos and proprietary imagery with your own. Do not copy assets you do not have the rights to.",
  "capturedAt": "2026-10-25T02:57:33.887Z"
}

Who it's for

People who build interfaces, not just bookmark them.

Designers who need to explain why a layout works, not just show a screenshot.
Founders and indie builders shipping with AI and tired of generic output.
Engineers who want the type, palette and radii before writing the first component.

Questions

Is this just a folder of screenshots?

No. Screenshots belong to their owners and are not included. You get the annotations, extracted tokens and prompts, plus links to the original pages.

Can I use it in client work?

Yes. Use the notes and tokens in unlimited personal and client projects. You cannot resell or redistribute the Pack itself.

Do I need Figma?

No. The export is plain JSON and Markdown. It works with any editor or agent.

When do I get it?

Immediately after checkout. The download link is emailed to you, and the same file is available on the confirmation page. If the email is delayed, use the backup link or email support.

Refunds?

7 days, no questions asked, as long as you have not resold it.Email [email protected].

Free sample

Start with the free sample.

Open Linear's full teardown now, or join the waitlist for the next free entry and the launch price. No newsletter spam, no drip sequence.

Screenshots and trademarks remain the property of their respective owners. The Pack contains original annotations, extracted values and prompts; it does not include font files, imagery or other licensed assets. See the license.

Steal the system,not the screenshot.