Bento Tile Dashboard

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

One workout home screen — greeting, summary, program card and bottom navigation.

A banking landing page with card objects, an app preview and analytics below.

Training analytics: session bars, a portrait card, ranked teams and a track chart.

A learning dashboard: sidebar, XP bar, illustrated course cards and a schedule column.

Description

An asymmetric grid of unequal rounded tiles, each holding exactly one thing — a metric, a chart, a control, a photograph. Built for dashboards and overview screens where a dozen unrelated facts have to sit together and still read.

Voice & Language

Formality

Professional

Vocabulary Level

Conversational

Directness

Clear

Sentence Length

Short

Metaphor Density

Factual

Writing Perspective

Second person (you)

Copy Pacing

Punchy

Spatial Structure & Hierarchy

Grid System

Modular grid

Symmetry

Asymmetrical balance

Hierarchy Clarity

Moderate

Focal Structure

Double- or triple-size hero tile leads; remaining tiles form a gapless overview

Visual Density

Comfortable

Perspective Style

Flat

Line & Stroke System

Stroke Usage

Structural outlines

Stroke Weight

Hairline

Stroke Color

Neutral

References

Cultural References

Minimalism, Bento box layout

Temporal Reference

Contemporary

Guardrails

Avoided 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

Custom Style Items

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.

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Web

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 Approach

Mixed

Shadow Technique

Multi-layer stack

Border Philosophy

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 Style

Card grid

Data Visualization Style

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 Style

Illustration + CTA

Hover Treatment

Scale + shadow

Focus Ring Style

Colored outline

Animation Philosophy

Functional only

Transition Speed

Standard (200–300ms)

Mood & Personality

Confident, Clean, Minimalist

Energy Level

Active

Emotional Bias

Neutral

Representation Mode

Literal

Real-world Accuracy

Precise

Light & Shadow

Lighting Presence

Implied

Shadow Type

Soft

Colors

#F2F3F735%Usage: Page background

#FFFFFF30%Usage: Tile surfaces

#14161D15%Usage: Primary typography

#6970868%Usage: Secondary typography

#4B5BFF4%Usage: Contextual indigo

#12B9813%Usage: Success accents

#FF8A3D3%Usage: Warning accents

#E3E6EF2%Usage: Hairline borders

Palette Size

6–8 colors

Color Temperature

Cool

Contrast Strategy

Value contrast

Color Dominance

Background-dominant

Gradient Policy

No gradients

Accessibility Level

WCAG AA

Typography

Medium, Semibold, Aa, Bb, Typography

Font FamilyGeometric sans

Font WeightsMedium, Semibold, Bold

Type ScaleModular

Text Case

Uppercase, tightly tracked tile labels; oversized values

Font Pairing Strategy

Weight contrast

Hierarchy

Strong contrast

Text Presence

Required

Text Visual Role

Secondary visual element

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Rounded square

Corner treatment

Medium radius

Container Dominance

Primary visual identity

Padding rules

Generous

Edge behavior

Tile-contained content; imagery and renders may bleed to the tile edge

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles

Edge Sharpness

Soft

Curve Consistency

Uniform radius

Negative Space Usage

Balanced

Surface, Material & Detail

Surface Treatment

Matte

Surface Texture Style

Smooth

Texture Usage

None

Transparency / Opacity

Opaque

Background & Environment

Background Type

Solid color

Background Complexity

Minimal

......X