Bento Box Grid

ui-ux-pro-maxMITSaaS / B2B · saasLanding · landingFuturistic · futuristicLight and dark · bothHigh (data-dense) · highNeutral · neutralMuted · mutedSerif · serif

Bento Box Grid. Best for Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Bento Box Grid" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bento-box-grid @ 28b3b8dee8c9.

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · src/ui-ux-pro-max/data/styles.csv#bento-box-grid · 28b3b8dee8c9 · © Next Level Builder

Do

Grid responsive (4→2→1 cols)
☐ Card spans varied
☐ Rounded corners consistent
☐ Shadows subtle
☐ Content fits cards
☐ Hover scale (1.02)

Don't

Dense data tables
text-heavy content
real-time monitoring

Prompt

Design a Bento Box grid layout. Use: modular cards with varied sizes (1x1, 2x1, 2x2), Apple-style aesthetic, rounded corners (16-24px), soft shadows, clean hierarchy, asymmetric grid, neutral backgrounds (#F5F5F7), hover effects.

---
"Bento Box Grid" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bento-box-grid @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Bento Box Grid. \"Bento Box Grid\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bento-box-grid @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-bento-box-grid",
      "license": "MIT",
      "attribution": "\"Bento Box Grid\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bento-box-grid @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "primary": {
      "$type": "color",
      "$value": "#f5f5f5"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ebebeb"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "accent": {
      "$type": "color",
      "$value": "#f5f5f5"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6b6a68"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#f5f5f5"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Bento Box Grid" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bento-box-grid @ 28b3b8dee8c9. */
:root {
  --background: #ffffff;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --primary: #f5f5f5;
  --primary-foreground: #1c1917;
  --secondary: #ebebeb;
  --secondary-foreground: #1c1917;
  --accent: #f5f5f5;
  --accent-foreground: #1c1917;
  --muted: #f0f0f0;
  --muted-foreground: #6b6a68;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #f5f5f5;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Bento Box Grid" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bento-box-grid @ 28b3b8dee8c9. */
/** Tailwind theme extend for Bento Box Grid (uupm-bento-box-grid) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#1c1917",
        "card": "#ffffff",
        "primary": "#f5f5f5",
        "primary-foreground": "#1c1917",
        "secondary": "#ebebeb",
        "accent": "#f5f5f5",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#f5f5f5"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Bento Box Grid" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bento-box-grid @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --primary: #f5f5f5;
  --primary-foreground: #1c1917;
  --secondary: #ebebeb;
  --secondary-foreground: #1c1917;
  --accent: #f5f5f5;
  --accent-foreground: #1c1917;
  --muted: #f0f0f0;
  --muted-foreground: #6b6a68;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #f5f5f5;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}