---
meta:
  name: Bento
  version: 1.0.0
  updated: 2026-04-20
  description: Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
tokens:
  colors:
    bg: "#FFF5E6"
    surface: "#F8F8F5"
    accent: "#FAD4C0"
    text: "#111827"
    border: "#E5E7EB"
    status:
      success: "#16A34A"
      warning: "#D97706"
      danger: "#DC2626"
  typography:
    families:
      primary: Inter
      display: Inter
      mono: JetBrains Mono
    scale:
      - 12px
      - 14px
      - 16px
      - 20px
      - 24px
      - 32px
    weights:
      - 100
      - 200
      - 300
      - 400
      - 500
      - 600
      - 700
      - 800
      - 900
  spacing:
    - 4px
    - 8px
    - 12px
    - 16px
    - 24px
    - 32px
antiPatterns:
  - id: no-side-stripe-borders
    category: layout
    pattern: border-left:\s*(?:[3-9]|\d{2,})px
    why: Side-stripe callouts (>= 3px left borders) are an AI tell — they read as generic CMS snippets, not designed surfaces.
    rewrite: Use a subtle background tint, a top-aligned icon, or a semantic text color instead of a left stripe.
  - id: no-nested-cards
    category: layout
    pattern: class="[^"]*rounded-(?:xl|2xl|3xl)[^"]*shadow[^"]*"[^>]*>\s*<[^>]*class="[^"]*rounded-(?:xl|2xl|3xl)[^"]*shadow
    why: A rounded-shadowed card containing another rounded-shadowed card reads as 'I didn't know how to group these'. Flatten.
    rewrite: Use section-level whitespace and a single card, or swap the outer card for a plain div.
  - id: no-gradient-text
    category: typography
    pattern: background-clip:\s*text
    why: "Gradient text (background-clip: text) is the single strongest AI aesthetic. It reads as try-hard landing-page filler."
    rewrite: Use a solid color from tokens.colors.text or tokens.colors.accent. Reserve gradients for non-type surfaces.
  - id: no-inter-only
    category: typography
    pattern: font-family:\s*['"]?Inter['"]?\s*[,;]?\s*$
    why: Inter as the sole declared font is the AI-default and signals zero type choice was made.
    rewrite: Declare a primary family with intentional fallbacks (see tokens.typography.families.primary) or pick a distinctive display face.
  - id: no-all-bold-headings
    category: typography
    pattern: <h[1-3][^>]*class="[^"]*font-black\b
    why: "`font-black` on every heading collapses type hierarchy into shouting. Weight differentiates; shouting doesn't."
    rewrite: Reserve font-black for one hero moment per page; use semibold/bold for most headings.
  - id: no-uppercase-body
    category: typography
    pattern: <p[^>]*class="[^"]*uppercase\b
    why: ALL-CAPS body text kills readability. Uppercase belongs on labels and eyebrow text only.
    rewrite: Use tracking-widest or small-caps on short labels; keep body at normal case.
  - id: no-purple-saas-gradient-hero
    category: color
    pattern: linear-gradient\([^)]*#[68][0-9a-f]{2}[a-f0-9]f[a-f0-9]
    why: Purple→pink hero gradients are the generic SaaS tell.
    rewrite: Use a single tokens.colors.accent flood or a neutral photograph.
  - id: no-cyan-on-dark
    category: color
    pattern: color:\s*#(?:0[0-9a-f]f[0-9a-f]ff|00ffff|22d3ee|06b6d4|0891b2)\b
    why: Bright cyan/electric-teal text on dark backgrounds is the 2015 futuristic-dashboard trope — high chroma, low information density.
    rewrite: Use a desaturated accent from tokens.colors.accent or a neutral color at reduced alpha.
  - id: no-rainbow-accents
    category: color
    pattern: (?:text|bg|border)-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-500[^"]*"[^>]*(?:text|bg|border)-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-500
    why: Multiple saturated Tailwind 500-series accents on the same surface reads as 'I couldn't decide'. Commit to one accent.
    rewrite: Use tokens.colors.accent for primary actions; reserve status colors for semantic contexts only.
  - id: no-bounce-easing
    category: motion
    pattern: cubic-bezier\(0\.68,\s*-0\.55
    why: Overshoot/bounce easings feel juvenile on UI surfaces.
    rewrite: Use tokens.motion.easing.standard for UI, emphatic only for hero-level moments.
  - id: no-slow-default
    category: motion
    pattern: transition(?:-[a-z]+)?:\s*(?:all|[a-z-]+)\s+(?:[5-9]\d{2}|\d{4,})ms
    why: Transitions >= 500ms on UI interactions feel sluggish; users interpret them as jank.
    rewrite: Keep UI transitions under 280ms (tokens.motion.duration.slow). Reserve 500ms+ for hero entrances only.
  - id: no-permanent-spinner
    category: motion
    pattern: animation:\s*spin\s+\d+(?:\.\d+)?s\s+linear\s+infinite
    why: "A perpetual spinner (`animation: spin … infinite`) left in a mockup for 'loading state' always ships to prod."
    rewrite: Use discrete loading/empty/error variants side-by-side, or replace with a skeleton.
  - id: no-missing-focus
    category: interaction
    pattern: <button[^>]*class="[^"]*(?:focus:outline-none|outline-none)[^"]*"(?![^>]*focus-visible:)
    why: Removing the focus outline without replacing it breaks keyboard accessibility. This is the AI's laziest shortcut.
    rewrite: Either keep the default outline or replace with `focus-visible:outline-2 focus-visible:outline-offset-2`.
  - id: no-placeholder-names
    category: content
    pattern: \b(John|Jane)\s+Doe\b
    why: John/Jane Doe placeholder strings leak into shipped UI when the AI skips real sample data.
    rewrite: Use sample data that reflects the actual product (real-looking names, real tasks, real copy).
  - id: no-lorem-ipsum
    category: content
    pattern: \bLorem\s+ipsum\s+dolor\s+sit\s+amet\b
    why: Lorem ipsum in a shipped mockup means no one thought about what the copy should actually say.
    rewrite: Write real copy that reflects the feature. If the feature is too early for copy, render a single-word label instead.
inspiration:
  - bento
---

# Bento — design contract

> Source: typeui-sh/bento. See `provenance.yaml` for extraction notes + any default fallbacks.

## 1. Visual Theme

Extracted from the typeui-sh bento skill. The machine-readable tokens live in the YAML frontmatter above; narrative sections point at them so `apt-tools design-lint` and `apt-tools design-validate` can cite specific fields.

## 2. Color Palette

See `tokens.colors` in the frontmatter.

## 3. Typography

See `tokens.typography` in the frontmatter.
