features.bento-mosaic · Bento mosaic

A features pattern from Bento Tech, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2. Give the section root data-pattern="features.bento-mosaic". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A dominant tile on 1–7 (label, title at step 5, body, 4:3 screenshot) beside a 2×2 of feature tiles on 8–12 (big mono index at the top, title and line at the bottom); below, an accent statement tile on 1–4 and a 21:9 screenshot tile on 5–12.
Slots
sectionLabel, title, body, image, features[4..4], statement, cta, gallery1
Grid areas
big 1-7 · small 8-12 · accent 1-4 · wide 5-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • The signature section. Rows 1–2, columns 1–7: the big tile (mono label, h2 at step 5, weight 600, ≤20 ch, a muted line at the top; a 4:3 screenshot pinned to the bottom). Rows 1–2, columns 8–12: four small feature tiles in a 2×2, each with a big mono index at step 5 in the link colour at the top and the title (step 1, weight 600) plus one muted line at the bottom. Row 3: an accent tile in 1–4 with a short statement (step 4, onAccent) at the top and a secondary button at the bottom, and a 21:9 screenshot tile in 5–12. Tile sizes must differ.

What you get

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "features.bento-mosaic",
  "kind": "features",
  "grid": {
    "big": "1-7",
    "small": "8-12",
    "accent": "1-4",
    "wide": "5-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "image",
    "features[4..4]",
    "statement",
    "cta",
    "gallery1"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-2",
        "bg": "surface",
        "gap": 6,
        "pad": [
          8,
          8
        ],
        "justify": "between",
        "border": "all",
        "children": [
          {
            "el": "box",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "sectionLabel",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 20
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "body",
                "role": "body",
                "maxCh": 48
              }
            ]
          },
          {
            "el": "media",
            "slot": "image",
            "aspect": "4/3",
            "treatment": "product",
            "frame": "rounded"
          }
        ]
      },
      {
        "el": "repeat",
        "span": "8-12",
        "rowSpan": "1-2",
        "slot": "features",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 2,
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 6,
          "pad": [
            6,
            6
          ],
          "justify": "between",
          "border": "all",
          "children": [
            {
              "el": "text",
              "color": "link",
              "slot": "number",
              "role": "number",
              "step": 5,
              "weight": 500,
              "tracking": "tight",
              "font": "mono"
            },
            {
              "el": "box",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h4",
                  "step": 1,
                  "weight": 600,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small",
                  "maxCh": 30
                }
              ]
            }
          ]
        }
      },
      {
        "el": "box",
        "span": "1-4",
        "rowSpan": "3-3",
        "bg": "accent",
        "gap": 6,
        "pad": [
          8,
          6
        ],
        "justify": "between",
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "statement",
            "role": "h3",
            "step": 4,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 18
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "arrow": true
          }
        ]
      },
      {
        "el": "box",
        "span": "5-12",
        "rowSpan": "3-3",
        "bg": "surface",
        "gap": 2,
        "pad": [
          3,
          3
        ],
        "border": "all",
        "children": [
          {
            "el": "media",
            "slot": "gallery1",
            "aspect": "21/9",
            "treatment": "product",
            "frame": "rounded"
          }
        ]
      }
    ]
  }
}
Component example: reference/features.bento-mosaic.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.bento-mosaic — Bento Tech</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .big { grid-column: 1 / 8; grid-row: 1 / 3; padding: 32px; gap: 12px; }
  .big h2 { font-size: var(--step-5); max-width: 20ch; line-height: 1.05; }
  .big { justify-content: space-between; }
  .big .shot { aspect-ratio: 4 / 3; margin-top: auto; }
  .small-grid { grid-column: 8 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .small-grid .tile { justify-content: space-between; gap: 24px; }
  .small-grid .idx { font-size: var(--step-5); font-weight: 500; line-height: 1; }
  .small-grid h4 { font-size: var(--step-1); }
  .acc { grid-column: 1 / 5; grid-row: 3; justify-content: space-between; }
  .acc h3 { color: var(--on-accent); font-size: var(--step-4); line-height: 1.05; max-width: 18ch; }
  .acc .btn { align-self: flex-start; }
  .wide { grid-column: 5 / 13; grid-row: 3; padding: 12px; }
  .wide .shot { aspect-ratio: 21 / 9; }
  @media (max-width: 640px) { .small-grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="bento">
    <div class="tile big"><span class="mono link">Previews</span><h2>Every branch gets its own URL.</h2><p style="max-width:48ch">Share a link with design and QA before you merge. Comments land straight in the pull request.</p>
      <div class="shot"><img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1000" alt="Preview deployment with comment thread"></div></div>
    <div class="small-grid">
      <div class="tile"><span class="mono link idx">01</span><div><h4>Edge cache</h4><p class="small muted">Static assets in 34 regions.</p></div></div>
      <div class="tile"><span class="mono link idx">02</span><div><h4>Secrets</h4><p class="small muted">Scoped per branch, never logged.</p></div></div>
      <div class="tile"><span class="mono link idx">03</span><div><h4>Cron</h4><p class="small muted">Schedules next to your code.</p></div></div>
      <div class="tile"><span class="mono link idx">04</span><div><h4>Logs</h4><p class="small muted">Streamed, searchable, 30 days.</p></div></div>
    </div>
    <div class="tile accent acc"><h3>Free for side projects. Forever.</h3><a class="btn" href="#pricing">See pricing →</a></div>
    <div class="tile wide"><div class="shot"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1400" alt="Build logs streaming in the dashboard"></div></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page