E-Ink Reader Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

One home screen, alone in the frame — the style at the size a card shows it.

Onboarding, home and product detail — one style across three screens.

A desktop storefront: sidebar, filters, product cards and a campaign banner.

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

Description

Designed for a screen that cannot animate: achromatic, no shadows, no hover, hard edges, high contrast and instant state changes. Constraint-driven, and unusually pleasant on a normal display too.

Typography

Regular, Medium, Aa, Bb, Typography

Font FamilySerif

Line HeightRelaxed

Font WeightsRegular, Medium, Bold

Letter SpacingNormal

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Serif + Sans

Hierarchy

Clear typographic scale

Text Presence

Required

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Mobile

Canvas Behavior

Strict frame (nothing escapes)

Light & Shadow

Shadow Type

None

Lighting Presence

None (flat)

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles

Edge Sharpness

Razor-sharp

Negative Space Usage

Balanced

Angle Usage

None

Guardrails

Common Artifacts to Avoid

Heavy Bokeh / Blur, Lens Flare, Film Grain / Noise, HDR over-processing, Over-saturation, Studio Post-processing, Stylistic filters

Avoided Visuals

color accents; gradients; shadows; hover effects; animated transitions; thin typography; reflowing layouts

Allowed Visuals

achromatic fills; full inversion; solid 1px borders; hard-edged rectangles; outline icons; static bottom controls

UI & Web

Color Theme

Light

Background Tone

Mid gray

Accent Strategy

No accent color; selection uses black-on-grey inversion

Semantic Colors

None

Layout Archetype

Reader with persistent bottom controls

Content Width

Centered reading column

Density

Comfortable

Spacing Scale

Strict vertical rhythm

Surface Layers

Flat (one background)

Elevation Approach

Flat — no elevation

Shadow Technique

No shadows

Border Philosophy

Visible solid border

Corner Radius Scale

Sharp (0px)

Card Style

Bordered

Button Shape

Sharp rectangle

Button Hierarchy

Primary + Secondary

Icon Style

Outline / Stroke

Icon Weight

Medium (2px)

Navigation Pattern

Bottom tab bar

Navigation Style

Static solid

Hover Treatment

None

Focus Ring Style

Inset border

Animation Philosophy

None (instant)

Transition Speed

Instant

Scroll Behavior

Static

Mood & Personality

Minimalist, Clean, Calm, Serious

Energy Level

Dormant

Emotional Bias

Neutral

Surface, Material & Detail

Surface Treatment

Flat

Surface Texture Style

Smooth

Texture Usage

None

Imperfection Level

Flawless

Colors

#E9E7E255%Usage: Background

#11111120%Usage: Typography and selected fills

#5A585410%Usage: Borders and dark secondary UI

#9C9A958%Usage: Secondary fills

#C8C6C17%Usage: Tertiary fills

Palette Size

3–5 colors

Color Temperature

Neutral

Saturation Range

Achromatic

Contrast Strategy

High contrast

Gradient Policy

No gradients

Color Dominance

Background-dominant

Black & White Point

Pure black + Rolled-off highlights

Accessibility Level

AAA

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Card

Corner treatment

Sharp

Container Dominance

Visual element

Edge behavior

Content fully contained

Spatial Structure & Hierarchy

Perspective Style

Flat

Hierarchy Clarity

Moderate

Symmetry

Near symmetry

Layout Axis

Vertical

Grid System

Manuscript grid

Visual Density

Comfortable

Line & Stroke System

Stroke Usage

Structural outlines

Stroke Weight

Solid 1px

Stroke Consistency

Uniform

Stroke Color

Neutral

Custom Style Items

Type Roles

Generous serif reading text; grotesque sans-serif controls; hierarchy limited to size and weight.

Reading Structure

Wide reading measure, strict vertical rhythm, and a persistent bottom control row.

State Signalling

Communicate state through fill inversion, icon, and label; never color, hover, or elevation.

Interaction Stability

No reflow on interaction; preserve fixed layout to minimize expensive screen repaints.

......X