# Bento Tile Dashboard

A clean, minimalist UI/UX style featuring an asymmetrical grid of unequal rounded tiles for dashboards and overview screens.

| | |
|---|---|
| Style | Bento Tile Dashboard |
| Category | UI/UX |
| Tags | dashboard, bento layout, asymmetrical grid, minimalist, clean design, data visualization, ui design, web design, modern, flat design |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #f2f3f7 #ffffff #14161d #697086 #4b5bff #12b981 |
| Published | 2026-08-24 |
| Canonical URL | https://styleref.io/share/vs0ue8ya-291ecb28c75f |

## Specification

Paste this into any AI tool. Keep the attribution line and the canonical URL.

STYLE REFERENCE — HARD CONSTRAINT (HIGHEST PRIORITY)

This style must be applied to ALL generated content (text, image, video).
If any part of the request conflicts with this style, the style OVERRIDES the request.
STYLE DEFINITION (to be operationally enforced):

Bento Tile Dashboard

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web.
 • Container / Boundary: Container: Explicit (shape mask); Container shape: Rounded square; Medium radius Corners; Container Dominance: Primary visual identity; Padding: Generous; Edge Behavior: Tile-contained content; imagery and renders may bleed to the tile edge.
 • Mood & Personality: Confident, Clean, Minimalist; Energy: Active; Emotional bias: Neutral; Representation mode: Literal; Real-world accuracy: Precise.
 • Colors: Palette: Solid Colors: [ #F2F3F7 35% (Page background),  #FFFFFF 30% (Tile surfaces),  #14161D 15% (Primary typography),  #697086 8% (Secondary typography),  #4B5BFF 4% (Contextual indigo),  #12B981 3% (Success accents),  #FF8A3D 3% (Warning accents),  #E3E6EF 2% (Hairline borders)]; 6–8 colors; Cool temperature; Value contrast; Color dominance: Background-dominant; No gradients; Accessibility: WCAG AA.
 • Typography: Geometric sans; Medium, Semibold, Bold; Text case: Uppercase, tightly tracked tile labels; oversized values; Font pairing: Weight contrast; Hierarchy: Strong contrast; Type scale: Modular; Text presence: Required; Text visual role: Secondary visual element.
 • Light & Shadow: Lighting presence: Implied; Shadow type: Soft.
 • Spatial Structure & Hierarchy: Grid system: Modular grid; Symmetry: Asymmetrical balance; Hierarchy: Moderate; Double- or triple-size hero tile leads; remaining tiles form a gapless overview focal structure; Visual density: Comfortable; Flat perspective.
 • Surface, Material & Detail: Surface treatment: Matte; Texture: Smooth; Texture usage: None; Transparency: Opaque.
 • Shape Language: Geometric; Primitive dominance: Rectangles; Edge sharpness: Soft; Curve consistency: Uniform radius; Negative space usage: Balanced.
 • Line & Stroke System: Structural outlines; Hairline; Stroke Color: Neutral.
 • Voice & Language: Formality: Professional; Conversational vocabulary; Directness: Clear; Short sentences; Metaphors: Factual; Perspective: Second person (you); Pacing: Punchy.
 • Background & Environment: Background type: Solid color; Background complexity: Minimal.
 • References: Minimalism, Bento box layout; Temporal reference: Contemporary.
 • UI & Web: Color theme: Light; Background tone: Cool light gray; Accent strategy: Workflow / contextual accents; Semantic colors: Full set (error / warning / success / info); Layout archetype: Dashboard; Content width: Wide container (1280–1440px); Surface layers: Two-layer (page + card); Elevation: Mixed; Shadow technique: Multi-layer stack; Borders: Hairline (0.5–1px, low opacity); Corner radius scale: Large (16–24px); Card style: Hairline-bordered, flat at rest; soft shadow only on hover; Data display: Card grid; Data visualization: Bold KPI numerals with tile-scaled sparklines, donuts, and bar sets; UI imagery: Product screenshots and 3D renders; illustration only for empty states; Empty state: Illustration + CTA; Hover: Scale + shadow; Focus ring: Colored outline; Animation: Functional only; Transition speed: Standard (200–300ms).
 • Guardrails: Avoid Visuals: uniform equal-size tiles; multi-message tiles; mismatched corner radii; persistent card shadows; decorative gradient washes; Allowed Visuals: unequal tile spans; one message per tile; identical gutters and radii; flat tile resting states; contextual accent tints.
 •  Tile Span Logic: Every tile spans one, two, four, or six cells within a twelve-column grid., Single-Idea Rule: Each tile contains one metric, chart, control, photograph, or screenshot—never competing content., Load Sequence: Stagger tile entrances one grid cell at a time; chart values count up once, then remain still., Dark Mode Treatment: Near-black page background with lifted charcoal tiles; retain contextual accents and strong ink-to-surface contrast..


ENFORCEMENT RULE: Before finalizing the output, internally verify that ALL elements comply with the style definition above. If compliance is uncertain, simplify or soften the output until it fully matches the style. Generated by StyleRef.io

## Other formats and live access

The specification above is the portable default. Tool-specific builds and a
ready-to-commit STYLE.md are available without a login:

**REST** (anonymous, read-only)

```
https://styleref.io/api/v1/styles/vs0ue8ya-291ecb28c75f?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/vs0ue8ya-291ecb28c75f/style.md           # a ready-to-commit STYLE.md
```

**MCP** (Streamable HTTP at `https://styleref.io/api/mcp`)

```
styleref://gallery/vs0ue8ya-291ecb28c75f
styleref://gallery/vs0ue8ya-291ecb28c75f/style.md
```

Or call the `get_style` tool with `ref` set to the slug above, and
`apply_style_to_prompt` to wrap a request for a specific tool.

Attribution: this style was created by @styleref. Keep the `Generated by StyleRef.io`
line and the canonical URL when you use a compiled spec, and credit the author.

Source: https://styleref.io/share/vs0ue8ya-291ecb28c75f