Bento Tile Dashboard

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

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