# Flat Solid-Color Interface

Clean, minimalist UI/UX design with solid colors, sharp edges, and no simulated depth for fast, positive digital experiences.

| | |
|---|---|
| Style | Flat Solid-Color Interface |
| Category | UI/UX |
| Tags | flat design, minimalist, geometric, solid color, clean, modern, vector, interface |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #ffffff #1aa7b8 #2c3e50 #f5b335 #e5533d #3dbe6e |
| Published | 2026-07-25 |
| Canonical URL | https://styleref.io/share/bvqq4w81-ced8380b5368 |

## 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):

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

## 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/bvqq4w81-ced8380b5368?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/bvqq4w81-ced8380b5368/style.md           # a ready-to-commit STYLE.md
```

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

```
styleref://gallery/bvqq4w81-ced8380b5368
styleref://gallery/bvqq4w81-ced8380b5368/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/bvqq4w81-ced8380b5368