Oversized Display Type Interface

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

Oversized Display Type Interface

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web; Presentation: Raw UI.
 • Container / Boundary: Container: None; Container Dominance: Invisible (purely functional); Padding: Tight; Edge Behavior: Clipped elements.
 • Mood & Personality: Bold, Confident, Minimalist, Clean, Experimental; Energy: High-Octane; Emotional bias: Positive; Tone register: Performative; Representation mode: Literal; Real-world accuracy: Stylized.
 • Colors: Palette: Solid Colors: [ #0E0E0E 62% (Ground),  #F3F0E9 30% (Display type),  #D6FF3D 4% (Accent word or control),  #1B1B1B 2% (Supporting panel),  #9A9A94 1% (Secondary text),  #2A2A2A 1% (Rules),  #F3F0E9 (Inverse mode: Bone ground)]; 6–8 colors; Neutral temperature; Saturation: Electric; High contrast; No gradients; Color dominance: Single dominant color; Black/White point: Pure black + Pure white; Accessibility: WCAG AA.
 • Typography: Display / Decorative or Grotesque; Bold, Extra Bold; Text case: ALL CAPS or tight lowercase; Font pairing: Single family; Hierarchy: Expressive / Art-directed; Type scale: Responsive; Tight (1.1); Letter spacing: Tight; Text presence: Required; Text visual role: Primary visual driver; Text integration: Embedded in shapes.
 • Light & Shadow: Lighting presence: None (flat).
 • Spatial Structure & Hierarchy: Flat perspective; Single focal structure; Hierarchy: Strong; Symmetry: Asymmetrical balance; Balance: Edge-weighted; Layout axis: Horizontal; Plane separation: Scale; Scale relationship: Monumental; Grid system: Free-form; Visual density: Airy.
 • Surface, Material & Detail: Surface treatment: Flat; Texture usage: None; Transparency: Opaque; Imperfection level: Flawless.
 • Camera and Motion: Transition: Slide; Sequencing: Sequential; Title animation: Scroll-masked, one line at a time.
 • Shape Language: Geometric; Primitive dominance: Rectangles; Edge sharpness: Razor-sharp; Silhouette clarity: Iconic; Negative space usage: Minimal.
 • Voice & Language: Formality: Casual; Simple vocabulary; Directness: Blunt; Three-to-five-word headline; one-sentence body copy sentences; Perspective: Second person (you); Pacing: Staccato; Jargon level: None.
 • Post-processing & Render Style: Image treatment: Masked.
 • Background & Environment: Background type: Solid color; Environment mood: Abstract; Background–Subject: Contrasting; Background complexity: Minimal.
 • References: Swiss/International Style; Temporal reference: Contemporary; Reference Brands: Awwwards-era studio sites; fashion e-commerce.
 • UI & Web: Color theme: Dark; Background tone: Near-black; Accent strategy: Single functional accent; Layout archetype: Marketing page; Content width: Full-bleed; Surface layers: Flat (one background); Elevation: Flat — no elevation; Borders: Borderless; Corner radius scale: Sharp (0px); Card style: No cards (flat sections); Icon style: Flat geometric; Navigation: Top bar; Nav style: Hidden on scroll down; UI imagery: Photography; Hover: Headline letter-spacing shift; Animation: Expressive; Transition speed: Instant; Scroll behavior: Scroll-triggered reveals; Focus ring: Colored outline.
 • Guardrails: Avoid: Stylistic filters, Heavy Bokeh / Blur, Lens Flare; Avoid Visuals: lightweight display type; busy backgrounds behind display type; decorative illustration; oversized icons; competing type scales; Avoid Colors: gradient overlays; multiple competing accent colors; Avoid Layouts: centered display type on busy backgrounds; body copy scaled to compete with headlines; Allowed Visuals: oversized cropped typography; quiet solid fields; one acid accent word; small minimal icons; photography as supporting plate or clipped letterform fill.
 •  Display Scale: Headlines occupy 12–20% of viewport height and dominate the first screen., Crop Discipline: Deliberately crop one word at the frame; allow descenders to cut against the fold., Hierarchy Ratio: Keep body copy intentionally small; supporting content lives in a narrow bottom or side strip., Below-Fold Reset: Shift to a normal-width, calmer content container below the hero..


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 single list screen: two stacked program cards over a fixed bottom navigation.

Loose UI parts under one treatment — the components a design system ships.

An in-car display: map, proximity view and a large speed gauge in one wide frame.

A connected-car app across three screens: garage, vehicle detail and efficiency charts.

Description

Type is the picture. Headlines run to the edges of the viewport, crop against the frame, and carry the hierarchy that images usually would — with the rest of the interface kept quiet enough to let them.

Mood & Personality

Bold, Confident, Minimalist, Clean, Experimental

Energy Level

High-Octane

Emotional Bias

Positive

Tone Register

Performative

Representation Mode

Literal

Real-world Accuracy

Stylized

Light & Shadow

Lighting Presence

None (flat)

Container / Boundary

Container presence

None

Container Dominance

Invisible (purely functional)

Padding rules

Tight

Edge behavior

Clipped elements

Spatial Structure & Hierarchy

Perspective Style

Flat

Focal Structure

Single

Hierarchy Clarity

Strong

Symmetry

Asymmetrical balance

Balance Type

Edge-weighted

Layout Axis

Horizontal

Plane Separation Method

Scale

Scale Relationship

Monumental

Grid System

Free-form

Visual Density

Airy

References

Cultural References

Swiss/International Style

Temporal Reference

Contemporary

Reference Brands

Awwwards-era studio sites; fashion e-commerce

Guardrails

Common Artifacts to Avoid

Stylistic filters, Heavy Bokeh / Blur, Lens Flare

Avoided Visuals

lightweight display type; busy backgrounds behind display type; decorative illustration; oversized icons; competing type scales

Avoided Colors

gradient overlays; multiple competing accent colors

Avoided Layouts

centered display type on busy backgrounds; body copy scaled to compete with headlines

Allowed Visuals

oversized cropped typography; quiet solid fields; one acid accent word; small minimal icons; photography as supporting plate or clipped letterform fill

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Web

Presentation Context

Raw UI

UI & Web

Color Theme

Dark

Background Tone

Near-black

Accent Strategy

Single functional accent

Layout Archetype

Marketing page

Content Width

Full-bleed

Surface Layers

Flat (one background)

Elevation Approach

Flat — no elevation

Border Philosophy

Borderless

Corner Radius Scale

Sharp (0px)

Card Style

No cards (flat sections)

Icon Style

Flat geometric

Navigation Pattern

Top bar

Navigation Style

Hidden on scroll down

UI Imagery

Photography

Hover Treatment

Headline letter-spacing shift

Animation Philosophy

Expressive

Transition Speed

Instant

Scroll Behavior

Scroll-triggered reveals

Focus Ring Style

Colored outline

Voice & Language

Formality

Casual

Vocabulary Level

Simple

Directness

Blunt

Sentence Length

Three-to-five-word headline; one-sentence body copy

Writing Perspective

Second person (you)

Copy Pacing

Staccato

Jargon / Technical Level

None

Camera and Motion

Transition Type

Slide

Animation Sequencing

Sequential

Title Animation Style

Scroll-masked, one line at a time

Surface, Material & Detail

Surface Treatment

Flat

Texture Usage

None

Transparency / Opacity

Opaque

Imperfection Level

Flawless

Colors

#0E0E0E62%Usage: Ground

#F3F0E930%Usage: Display type

#D6FF3D4%Usage: Accent word or control

#1B1B1B2%Usage: Supporting panel

#9A9A941%Usage: Secondary text

#2A2A2A1%Usage: Rules

#F3F0E9Usage: Inverse mode: Bone ground

Palette Size

6–8 colors

Color Temperature

Neutral

Saturation Range

Electric

Contrast Strategy

High contrast

Gradient Policy

No gradients

Color Dominance

Single dominant color

Black & White Point

Pure black + Pure white

Accessibility Level

WCAG AA

Typography

Bold, Aa, Bb, Typography

Font FamilyDisplay / Decorative or Grotesque

Line HeightTight

Font WeightsBold, Extra Bold

Letter SpacingTight

Type ScaleResponsive

Text Case

ALL CAPS or tight lowercase

Font Pairing Strategy

Single family

Hierarchy

Expressive / Art-directed

Text Presence

Required

Text Visual Role

Primary visual driver

Text Integration

Embedded in shapes

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles

Edge Sharpness

Razor-sharp

Silhouette Clarity

Iconic

Negative Space Usage

Minimal

Post-processing & Render Style

Image Treatment

Masked

Background & Environment

Background Type

Solid color

Environment Mood

Abstract

Background–Subject Relationship

Contrasting

Background Complexity

Minimal

Custom Style Items

Display Scale

Headlines occupy 12–20% of viewport height and dominate the first screen.

Crop Discipline

Deliberately crop one word at the frame; allow descenders to cut against the fold.

Hierarchy Ratio

Keep body copy intentionally small; supporting content lives in a narrow bottom or side strip.

Below-Fold Reset

Shift to a normal-width, calmer content container below the hero.

......X