Flat Solid-Color Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

A desktop storefront: sidebar, filters, product cards and a campaign banner.

A full-bleed hero where oversized type is split across a photographic frame.

A finance landing page with a device in hand showing cards and transactions.

A three-column UI kit — product cards, checkout, tabs and payment rows under one treatment.

Description

Solid color, hard edges, and no simulated depth at all — every surface is what it says it is. Bright, unfussy, and fast to read, with color doing the job shadows do elsewhere.

Colors

#FFFFFF25%Usage: Background

#1AA7B820%Usage: Primary sections

#2C3E5015%Usage: Dark typography

#F5B33510%Usage: Warning accents

#E5533D10%Usage: Error accents

#3DBE6E10%Usage: Success accents

#ECF0F110%Usage: Secondary surfaces

Palette Size

6–8 colors

Color Temperature

Mixed

Saturation Range

Vivid

Contrast Strategy

Hue contrast

Gradient Policy

No gradients

Color Dominance

Balanced

Accessibility Level

WCAG AA

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Square

Corner treatment

Slight radius

Padding rules

Moderate

Edge behavior

Content fully contained

Spatial Structure & Hierarchy

Grid System

Column grid

Visual Density

Comfortable

Hierarchy Clarity

Strong

Layout Axis

Vertical

Symmetry

Near symmetry

Balance Type

Center-weighted

Plane Separation Method

Color/value shift

Surface, Material & Detail

Surface Treatment

Flat

Texture Usage

None

Transparency / Opacity

Opaque

Imperfection Level

Flawless

Line & Stroke System

Stroke Usage

No stroke (fill-only)

Custom Style Items

Section Structure

Stack full-width flat color bands vertically; place content in a wide aligned container within each band.

Color Semantics

Use category and state color as the primary structural and navigation cue.

Type on Color

Set white or dark slate type directly on solid color fields; rely on labels for affordance.

Illustration Rendering

Simple filled geometric shapes only; no outlines, shading, texture, or perspective.

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Web

UI & Web

Color Theme

Light

Background Tone

Pure white

Accent Strategy

Multi-tonal palette

Semantic Colors

Full set (error / warning / success / info)

Layout Archetype

Marketing page

Content Width

Wide container (1280–1440px)

Surface Layers

Flat page and flat color-block sections; no simulated elevation

Elevation Approach

Flat — no elevation

Shadow Technique

No shadows

Border Philosophy

Borderless or solid-line separation only

Corner Radius Scale

Small (2–6px)

Card Style

Filled tint

Button Shape

Softly rounded (4–8px)

Button Hierarchy

Primary + Secondary

Input Field Style

Filled / tinted

Icon Style

Flat geometric

Navigation Pattern

Top bar

Loading Style

Progress bar

Empty State Style

Illustration + CTA

Hover Treatment

Color change

Focus Ring Style

Solid offset ring

Animation Philosophy

Functional only

Transition Speed

Fast (80–150ms)

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles, Circles

Edge Sharpness

Razor-sharp

Silhouette Clarity

Iconic

Curve Consistency

Uniform radius

Negative Space Usage

Balanced

Artistic Mediums & Techniques

Physical Medium

None

Illustrative Technique

Flat design, Vector illustration

Typography

Regular, Medium, Aa, Bb, Typography

Font FamilyGeometric sans

Line HeightNormal

Font WeightsRegular, Medium, Bold

Letter SpacingNormal

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Single family

Hierarchy

Clear typographic scale

Text Presence

Required

Text Integration

Overlaid

Mood & Personality

Clean, Friendly, Confident, Minimalist

Energy Level

Active

Emotional Bias

Positive

Representation Mode

Symbolic

Characters

Allowed (faceless)

Humor Usage

Occasional

Light & Shadow

Lighting Presence

None (flat)

Voice & Language

Formality

Approachable

Vocabulary Level

Simple

Directness

Clear

Sentence Length

Short

Metaphor Density

Literal

Writing Perspective

Second person (you)

Copy Pacing

Punchy

Jargon / Technical Level

None

References

Cultural References

2013 Flat Design, Minimalism

Temporal Reference

2010s

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing, Heavy Bokeh / Blur, Lens Flare, Stylistic filters

Avoided Visuals

soft shadows; button gradients; bevels; gloss; texture; ghost buttons; unlabeled icon-only controls; pastel washes

Allowed Visuals

solid color fills; hard-edged rectangles; small-radius controls; labeled controls; flat geometric icons; flat vector figures

......X