{
  "id": "arc",
  "title": "Arc Browser",
  "url": "https://arc.net",
  "tags": [
    "Consumer",
    "Warm",
    "Friendly",
    "Product"
  ],
  "colors": {
    "principle": "Warm off-white base with vibrant blue accent, using subtle noise textures for depth.",
    "bg": "#FFFCF7",
    "bgSoft": null,
    "bgQuiet": null,
    "ink": "#000000",
    "inkSoft": null,
    "muted": "#696969",
    "mutedSoft": null,
    "accent": "#3139FB",
    "line": "rgba(0, 0, 0, 0.1)"
  },
  "typography": {
    "rules": [
      "Use transitional-serif for large display headlines to create warmth.",
      "Use humanist-sans for body copy to maintain readability.",
      "Apply generous negative tracking to display sizes."
    ],
    "scaleUses": [
      "Hero headlines",
      "Section titles",
      "Body text",
      "UI labels and captions"
    ],
    "display": "transitional-serif",
    "body": "humanist-sans",
    "mono": "monospace",
    "scale": [
      {
        "token": "display",
        "size": 56,
        "lh": 1.0,
        "weight": 700,
        "ls": "-1.4px"
      },
      {
        "token": "heading",
        "size": 28,
        "lh": 1.2,
        "weight": 700,
        "ls": "-0.28px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.6,
        "weight": 400,
        "ls": "0.4px"
      },
      {
        "token": "caption",
        "size": 12,
        "lh": 1.4,
        "weight": 500,
        "ls": "0.4px"
      }
    ]
  },
  "spacing": {
    "rhythm": "Consistent 4px base with generous padding around interactive elements.",
    "base": 4,
    "scale": [
      4,
      8,
      12,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "shadows": [
      "0px 5px 5px 0px rgba(0, 0, 0, 0.1)",
      "0px 2px 8px 0px rgba(0, 0, 0, 0.25)"
    ],
    "borders": "Subtle 1px solid borders, often using the accent blue for emphasis.",
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 22,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "Standard 12-column grid with responsive behavior, generous whitespace.",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Subtle transform on hover for interactive elements.",
      "Smooth background color transitions."
    ],
    "durations": {
      "micro": 100,
      "small": 150,
      "medium": 200
    },
    "easing": "cubic-bezier(0.25, 0.1, 0.25, 1)"
  },
  "identity": {
    "keywords": [
      "playful",
      "warm",
      "expressive",
      "modern",
      "approachable"
    ],
    "analogy": "A friendly, creative studio workspace that feels personal and inviting.",
    "oneLiner": "A warm, expressive browser experience that blends playful personality with modern productivity."
  },
  "components": {
    "button": "Dark filled buttons with pill shape and playful icon integration.",
    "card": "Light cards with subtle noise texture and soft shadows.",
    "chip": "Small rounded labels with accent colors.",
    "input": "Clean text inputs with minimal styling.",
    "hero": "Large expressive headline with warm gradient background and noise overlay."
  },
  "interaction": {
    "hover": "Subtle transform and box-shadow elevation on interactive elements.",
    "click": "Slight scale down or opacity change.",
    "transition": "All transitions are brief (100-200ms) for snappy feel.",
    "keyboard": "Standard focus rings using accent color."
  },
  "voice": {
    "tone": "Playful, friendly, and conversational.",
    "headlineStyle": "Expressive serif headlines with personality.",
    "ctaStyle": "Direct and inviting with playful icons.",
    "avoid": [
      "Corporate jargon",
      "Overly technical language",
      "Cold or sterile tone"
    ]
  },
  "donts": [
    "Don't use cold grays — screenshot shows warm off-white (#FFFCF7) as primary background.",
    "Don't use sharp corners everywhere — screenshot shows generous pill shapes and rounded corners.",
    "Don't use stark white backgrounds — screenshot shows warm, slightly yellowed whites.",
    "Don't use thin, lightweight typography — screenshot shows bold, expressive serif headlines.",
    "Don't use aggressive shadows — screenshot shows soft, subtle shadows for depth.",
    "Don't use rigid, corporate layout — screenshot shows playful, expressive compositions with noise textures."
  ],
  "systemPrompt": "This is a warm, friendly browser product website that uses playful serif typography and expressive color to feel approachable. Key colors include warm off-white (#FFFCF7), vibrant blue (#3139FB), and black text. Font categories are transitional-serif for display and humanist-sans for body. Critical donts: don't use cold gray backgrounds, don't use sharp corners everywhere, don't use stark white (#FFFFFF), don't use thin typography, don't use aggressive shadows, don't use corporate layouts. The design balances modern productivity with playful personality through noise textures and warm tones."
}