# Monochrome Single-Hue Interface

A minimalist UI/UX style using a single hue with varying values for hierarchy and a clean, elegant aesthetic.

| | |
|---|---|
| Style | Monochrome Single-Hue Interface |
| Category | UI/UX |
| Tags | minimalist, monochrome, flat design, clean, elegant, swiss style, typography-focused, value hierarchy, professional, modern |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #f4f6f8 #ffffff #c6d2dc #7a8fa3 #2f4358 #12202c |
| Published | 2026-08-23 |
| Canonical URL | https://styleref.io/share/8d2hhshu-9196ed58042f |

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

Monochrome Single-Hue Interface

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web.
 • Container / Boundary: Container: Implicit (visual edges only); Slight radius Corners; Container Dominance: Neutral frame.
 • Mood & Personality: Elegant, Clean, Confident, Minimalist; Emotional bias: Neutral; Tone register: Observational; Representation mode: Literal; Real-world accuracy: Precise.
 • Colors: Palette: Solid Colors: [ #F4F6F8 30% (Page background),  #FFFFFF 20% (Light surfaces),  #C6D2DC 15% (Secondary surfaces),  #7A8FA3 12% (Borders and icons),  #2F4358 12% (Primary type),  #12202C 6% (Deep contrast),  #1C6EA4 5% (Active accent)]; Monochrome; Cool temperature; Saturation: Subdued; Value contrast; No gradients; Color dominance: Single dominant color; Black/White point: Lifted blacks + Pure white; Accessibility: AAA.
 • Typography: Grotesque; Regular, Medium, Bold; Text case: Sentence case; Font pairing: Weight contrast; Hierarchy: Strong contrast; Type scale: Modular; Normal (1.4); Text visual role: Primary visual driver.
 • Light & Shadow: Lighting presence: None (flat); Shadow type: Low-opacity darkest ramp step only; Shadow density: Faint.
 • Spatial Structure & Hierarchy: Grid system: Column grid; Hierarchy: Strong; Layout axis: Vertical; Symmetry: Asymmetrical balance; Plane separation: Color/value shift; Visual density: Comfortable.
 • Surface, Material & Detail: Surface treatment: Matte; Texture: Grain only on the largest flat fields; subtle enough to prevent banding; Texture usage: Subtle noise.
 • Shape Language: Geometric; Primitive dominance: Rectangles; Edge sharpness: Soft; Curve consistency: Uniform radius; Negative space usage: Balanced.
 • Line & Stroke System: Structural outlines; Thin; Uniform consistency; Stroke Color: Derived from fill.
 • Voice & Language: Formality: Professional; Advanced vocabulary; Directness: Clear; Medium sentences; Metaphors: Factual; Perspective: Third person for descriptions; second person for actions; Pacing: Flowing; Jargon level: Light industry terms.
 • Post-processing & Render Style: Image treatment: Duotone; Monochrome.
 • Background & Environment: Background type: Solid color; Environment mood: Abstract; Background complexity: Minimal.
 • References: Swiss/International Style, Minimalism; Temporal reference: Timeless.
 • UI & Web: Color theme: Light; Background tone: Cool light gray; Accent strategy: Single functional accent; Semantic colors: None; Layout archetype: Dashboard; Content width: Wide container (1280–1440px); Surface layers: Two-layer (page + card); Elevation: Background contrast only; Borders: Hairline (0.5–1px, low opacity); Corner radius scale: Small (2–6px); Button shape: Softly rounded (4–8px); Button hierarchy: Primary + Secondary + Ghost; Icon style: Outline / Stroke; Icon weight: Regular (1.5px); Navigation: Sidebar; Nav style: Sticky solid; Data display: Comfortable table; Data visualization: Minimal (no gridlines); UI imagery: Photography; Hover: Shift the element exactly one ramp step; Focus ring: Solid offset ring in the darkest ramp step; Animation: Functional only; Transition speed: Fast (80–150ms).
 • Guardrails: Avoid Visuals: second hues; muddy mid-values; warm-cool grayscale drift; full-color photography; gloss; material simulation; Allowed Visuals: single-hue nine-step ramp; crisp value-separated surfaces; ramp-end duotone photography; icon-and-label semantic states; large flat section fields; Avoid Words: emphatic adjectives; decorative emphasis language.
 •  Value Ramp: Use a single hue as a nine-step near-white-to-near-black ramp; reserve one saturated step for active accents., Hierarchy Rule: Establish hierarchy through lightness, type size, weight, and spacing—never through a second hue., Semantic States: Signal errors, warnings, success, and information with icon and label; do not introduce semantic colors., Imagery Integration: Map photography to the lightest and darkest ends of the same ramp; use single-hue line illustration with ramp-step fills., Section Structure: Separate major sections with large uninterrupted flat fields of distinct ramp steps..


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

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

```
styleref://gallery/8d2hhshu-9196ed58042f
styleref://gallery/8d2hhshu-9196ed58042f/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/8d2hhshu-9196ed58042f