Docs

Flat Solid-Color Interface

StyleRef·@styleref·
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): Flat Solid-Color Interface • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web. • Container / Boundary: Container: Explicit (shape mask); Container shape: Square; Slight radius Corners; Padding: Moderate; Edge Behavior: Content fully contained. • Mood & Personality: Clean, Friendly, Confident, Minimalist; Energy: Active; Emotional bias: Positive; Representation mode: Symbolic; Characters: Allowed (faceless); Humor: Occasional. • Colors: Palette: Solid Colors: [ #FFFFFF 25% (Background), #1AA7B8 20% (Primary sections), #2C3E50 15% (Dark typography), #F5B335 10% (Warning accents), #E5533D 10% (Error accents), #3DBE6E 10% (Success accents), #ECF0F1 10% (Secondary surfaces)]; 6–8 colors; Mixed temperature; Saturation: Vivid; Hue contrast; No gradients; Color dominance: Balanced; Accessibility: WCAG AA. • Typography: Geometric sans; Regular, Medium, Bold; Text case: Sentence case; Font pairing: Single family; Hierarchy: Clear typographic scale; Type scale: Modular; Normal (1.4); Letter spacing: Normal; Text presence: Required; Text integration: Overlaid. • Light & Shadow: Lighting presence: None (flat). • Spatial Structure & Hierarchy: Grid system: Column grid; Visual density: Comfortable; Hierarchy: Strong; Layout axis: Vertical; Symmetry: Near symmetry; Balance: Center-weighted; Plane separation: Color/value shift. • Surface, Material & Detail: Surface treatment: Flat; Texture usage: None; Transparency: Opaque; Imperfection level: Flawless. • Shape Language: Geometric; Primitive dominance: Rectangles, Circles; Edge sharpness: Razor-sharp; Silhouette clarity: Iconic; Curve consistency: Uniform radius; Negative space usage: Balanced. • Line & Stroke System: No stroke (fill-only). • Voice & Language: Formality: Approachable; Simple vocabulary; Directness: Clear; Short sentences; Metaphors: Literal; Perspective: Second person (you); Pacing: Punchy; Jargon level: None. • Artistic Mediums & Techniques: Physical medium: None; Illustrative technique: Flat design, Vector illustration. • References: 2013 Flat Design, Minimalism; Temporal reference: 2010s. • 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: Flat — no elevation; Shadow technique: No shadows; Borders: 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: Top bar; Loading style: Progress bar; Empty state: Illustration + CTA; Hover: Color change; Focus ring: Solid offset ring; Animation: Functional only; Transition speed: Fast (80–150ms). • Guardrails: Avoid: AI Gloss / Plastic Smoothing, Heavy Bokeh / Blur, Lens Flare, Stylistic filters; Avoid 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. • 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.. 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.

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

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
Terms of ServicePrivacy PolicyBlogDocsSTYLE.mdllms.txt
......X
© 2026 StyleRef. All rights reserved.