Oversized Display Type Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

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