Safelight Active

Darkroom

Design System

Red glow.
Chemical magic.
Slow reveal.

01 / COLOR

Color Palette

Deep, warm blacks punctuated by the distinctive red safelight glow. Amber and sepia tones evoke chemical processes and aged prints.

Darkroom Blacks

Deep Black #0D0A08
Dark #1A1513
Charcoal #231D1A
Medium Gray #3D3330

Safelight Reds

Deep #4A0D0D
Safelight Red #8B1E1E
Bright #C43C3C
Glow #D94545

Amber & Sepia

Amber Deep #3D2810
Amber Medium #7A5020
Sepia #8B7355
Cream #C4B49A

02 / TYPOGRAPHY

Type System

Special Elite for headlines evokes vintage photo annotations. IBM Plex Mono provides crisp readability in low light conditions.

Display

Special Elite / 72px

Aa

H1

Special Elite / 48px

Heading One

H2

Special Elite / 32px

Heading Two

H3

Special Elite / 20px

Heading Three

Body

IBM Plex Mono / 16px

The image slowly emerges in the developer tray, shapes materializing from nothing into memory.

Caption

IBM Plex Mono / 14px

Technical notes and metadata appear in this smaller size.

Label

IBM Plex Mono / 12px / Uppercase

Exposure settings and film data

03 / SPACING

Spacing Scale

A 4px base unit creates consistent rhythm. Generous spacing aids visibility in low light.

4px
xs
8px
sm
16px
md
24px
lg
32px
xl
48px
2xl
64px
3xl
96px
4xl

04 / BUTTONS

Controls

Inspired by darkroom timers and enlarger controls. The safelight glow guides interaction.

Timer Display

00:12:45

Process Steps

01
Developer
02
Stop Bath
03
Fixer
04
Wash

05 / FORMS

Input Fields

Clean fields with subtle borders. Focus states glow with safelight red.

Exposure Information

Aperture f/8
Shutter 1/125
ISO 400
Filter Y2
Lens 50mm

06 / CARDS

Content Cards

Like photo paper emerging in the developer tray. Hover reveals the safelight glow.

01

Exposure

Light passes through the negative, projecting the latent image onto sensitive paper below.

02

Development

Chemical reactions reveal the hidden image. Time and temperature are critical variables.

03

Fixation

The fixer halts development and removes unexposed silver, making the image permanent.

Photo Card Variant

[ Image Area ]

Frame 24 35mm

[ Image Area ]

Frame 25 35mm

[ Image Area ]

Frame 26 35mm

Contact Sheet

1A
2A
3A
4A
5A
6A
7A
8A

07 / DATA TABLE

Development Times

Like a chemical timing chart. Clear headers, minimal lines, easy scanning in dim light.

Film Stock Developer Dilution Time Temp
Tri-X 400 D-76 1:1 9:30 20C
HP5 Plus HC-110 B 6:00 20C
T-Max 100 XTOL 1:1 10:00 20C
Delta 3200 DD-X 1:4 12:00 20C
FP4 Plus Rodinal 1:50 13:00 20C

08 / BADGES

Status Indicators

Film canister labels and processing markers. Compact, distinct, functional.

Default Active Processing Negative Archived

Film Negative Reference

KODAK TRI-X 400    5063    24 EXP    DX 135-36

Developer Tray

Developer Tray 01 In Use
Contains fresh D-76 working solution at 20C. Capacity: 8 sheets 8x10 or 16 sheets 5x7.

09 / PRINCIPLES

Design Principles

Patience

Like waiting for an image to emerge in the developer, good design reveals itself slowly. Allow time for elements to develop their full impact.

Restraint

The darkroom works under strict limitations. Embrace constraints: limited color, minimal light. What you cannot use becomes as important as what you can.

Atmosphere

Every element contributes to the mood. The warm blacks, the red glow, the chemical references - they create an immersive experience that transcends mere interface.

Permanence

A properly fixed print lasts generations. Design decisions should be intentional and lasting, not trendy or ephemeral. Build for archival quality.