OLED Black Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

One vehicle-details screen, alone in the frame — the style at the size a gallery card shows it.

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

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

A vehicle OS with an icon rail, drive readouts, a map and a music player.

Shipment list beside a full-height map — the style handling a live tracking view.

Description

A true-black interface where the screen's unlit pixels are the background and everything else glows against them. Restrained contrast, luminous accents, and imagery that carries the color.

Colors

#00000070%Usage: Background

#14141410%Usage: Elevated surfaces

#DEDEDE8%Usage: Primary text

#8F8F8F5%Usage: Secondary text

#2626263%Usage: Dividers

#3DE0D52%Usage: Accent

#F0A93B2%Usage: Accent

Palette Size

6–8 colors

Color Temperature

Cool

Saturation Range

Subdued

Contrast Strategy

Value contrast

Hue Relationships

Complementary

Gradient Policy

Subtle gradients only

Color Dominance

Background-dominant

Black & White Point

Pure black + Rolled-off highlights

Accessibility Level

WCAG AA

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Mobile

Presentation Context

Raw UI

Spatial Structure & Hierarchy

Grid System

Column grid

Visual Density

Comfortable

Hierarchy Clarity

Strong

Layout Axis

Vertical

Symmetry

Asymmetrical balance

Balance Type

Edge-weighted

Perspective Style

Flat

Plane Separation Method

Color/value shift

Camera and Motion

Transition Type

Dissolve

Animation Duration Feel

Standard

References

Cultural References

Minimalism

Temporal Reference

Contemporary

Custom Style Items

OLED Luminance Rule

Keep all interface chrome below media and imagery in luminance; express elevation through lifted black surfaces, never shadows.

Image Edge Treatment

High-contrast media is the color source; fade image edges gradually into the true-black ground.

Typography OLED Compensation

Use Regular and Medium only; reduce weights one step from a light variant to prevent OLED glow and smearing.

UI & Web

Animation Philosophy

Functional only

Transition Speed

Standard (200–300ms)

Hover Treatment

Pressed elements briefly brighten; no scale response

Color Theme

Dark

Background Tone

Deep black

Accent Strategy

Dual accent

Layout Archetype

Feed or master–detail, prioritized by product context

Content Width

Full-bleed

Density

Comfortable

Surface Layers

Two-layer (page + card)

Elevation Approach

Background contrast only

Shadow Technique

No shadows

Glass / Blur Effect

Subtle tint overlay

Border Philosophy

Borderless

Card Style

Filled tint

Icon Style

Outline / Stroke

Icon Weight

Regular (1.5px)

Navigation Pattern

Bottom tab bar

Navigation Style

Sticky glass (blur)

UI Imagery

Photography

Focus Ring Style

Glow halo

Mood & Personality

Sophisticated, Minimalist, Confident

Energy Level

Mellow

Emotional Bias

Neutral

Tone Register

Detached

Representation Mode

Literal

Real-world Accuracy

Precise

Light & Shadow

Lighting Presence

Implied

Lighting Mood Style

Low-key

Shadow Type

None

Bloom / Glow Usage

Low-opacity soft outer glow on accents and faint color halos around imagery

Background & Environment

Background Type

Solid color

Environment Mood

Abstract

Background–Subject Relationship

Contrasting

Background Complexity

Minimal

Typography

Regular, Aa, Bb, Typography

Font FamilyGrotesque

Line HeightNormal

Font WeightsRegular, Medium

Letter SpacingWide

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Weight contrast

Hierarchy

Clear typographic scale

Text Presence

Required

Text Visual Role

Secondary visual element

Text Integration

Overlaid

Voice & Language

Formality

Professional

Vocabulary Level

Conversational

Directness

Straightforward

Sentence Length

Short

Metaphor Density

Literal

Writing Perspective

Second person (you)

Copy Pacing

Punchy

Emoji Usage

None

Container / Boundary

Container presence

Implicit (visual edges only)

Container Dominance

Invisible (purely functional)

Padding rules

Generous

Edge behavior

Intentional bleed

Shape Language

Negative Space Usage

Dominant

Surface, Material & Detail

Surface Treatment

Matte

Surface Texture Style

No texture; subtle noise dither only on large tinted panels

Texture Usage

Subtle noise

Imperfection Level

Flawless

Transparency / Opacity

Opaque

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing, Heavy Bokeh / Blur, Lens Flare, Over-saturation, Studio Post-processing

Avoided Visuals

dark gray backgrounds; pure white body text; small bold text; fully bright saturated accents; drop shadows; inverted light-theme components; hard-edged image boxes

Allowed Visuals

true-black ground; lifted matte surfaces; #DEDEDE primary text; #8F8F8F secondary text; dim luminous accents; soft accent glow; full-bleed imagery fading into black; 1.5px outline icons

......X