LLTG — Long Live The Grain

Overview

LLTG is a minimalist digital archive for analog film photographers, designed to celebrate the craft of film stock documentation and roll management. It serves photographers who value precision, restraint, and the tactile authenticity of film photography. The aesthetic is 'Architectural Minimalism'—a design philosophy that treats negative space as a material, typography as structure, and color as a surgical accent rather than decoration. The UI evokes a sense of quiet confidence: clean grids, generous whitespace, and a monochromatic foundation punctuated by a single electric blue accent (#2563EB) that draws the eye to actionable moments. The emotional response is one of clarity and focus—the interface dissolves, leaving only the photographs and metadata.

The brand voice is precise, understated, and reverent toward the analog process. Vocabulary favors technical specificity (ISO, C41, frame count, keeper ratio) over marketing language. The tone is never breathless or trendy; instead, it speaks with the quiet authority of someone who has spent years in darkrooms and with light meters. Example sentence in brand voice: 'Kodak Portra 800 — 34 frames, 6 keepers. Leica MP, 50mm Summicron. London, February 2026.'

Colors

The color system is built on a foundation of near-white and near-black neutrals, creating a high-contrast, legible canvas that respects the photographs as the primary visual content. Primary (#2563EB) is a saturated electric blue used exclusively for interactive elements—focus states, hover effects on buttons, and the progress bar. It appears sparingly, never on passive surfaces. The surface stack ranges from pure white (#FFFFFF) at the brightest level through carefully calibrated greys (#F8F8F8, #EEEEEE, #E9ECEF, #DBDBDB) that provide visual hierarchy without introducing color. On-surface text is set at #202020 (near-black) for maximum legibility; secondary text uses #686868 (mid-grey) for reduced emphasis. Tertiary (#454545) is a warm dark grey used for icons and subtle UI elements. Erro

Typography

The type system uses a single typeface family (ft-primary, with system fallbacks) across all scales, creating visual unity and reducing cognitive load. Display (56px, 700 weight, -0.02em tracking) is reserved for page titles and hero moments; headline-lg (36px, 600 weight) structures major sections; headline-md (24px, 600 weight) breaks content into readable chunks; title-lg (18px, 600 weight) labels metadata fields. Body text operates at two scales: body-lg (16px, 400 weight, 24px line-height) for primary content and body-md (14px, 400 weight, 20px line-height) for secondary information. Labels (12px, 600 weight, 0.02em tracking) are used for form fields, badges, and UI chrome. All body text maintains a 1.5x line-height ratio (24px for 16px text) to ensure comfortable reading. When small

Layout

The layout uses a 12-column grid with a max-width of 1280px, allowing content to breathe on large screens while remaining constrained on ultra-wide displays. The grid is fluid on mobile (full bleed with 24px gutters) and fixed at 1280px on desktop. Whitespace is semantic: the lg spacing token (40px) separates major sections (metadata block from grid, grid from footer); md spacing (24px) groups related content (keypairs, form fields); sm spacing (12px) provides breathing room within components. The sheet-info sidebar on the right uses a fixed width and right-aligned layout, creating a two-column rhythm: image grid on the left (fluid), metadata on the right (fixed). Container padding is consistently 24px on all sides, creating a frame around content. The grid of photograph cards uses CSS Gri

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): flat white surface (#FFFFFF) with no shadow, representing the primary content plane. Level 2 (Cards & Inputs): 1px solid border in outline-variant (#B7B7B7) with a soft shadow of '0 3px 8px rgba(0, 0, 0, 0.15)' on hover, creating a gentle lift. Level 3 (Modals & Dropdowns): 1px solid border in surface-container-high (#D1D5DB) with a deeper shadow of '0 8px 24px rgba(0, 0, 0, 0.12)', signaling modal importance. Focus states use a 2px outline in primary blue (#2563EB) with no shadow, pri

Shapes

The shape philosophy is 'Surgical Precision'—rounded corners are minimal and functional, never decorative. The default radius is 6px, applied to buttons, inputs, and cards, creating a soft but professional appearance. Smaller UI elements (icon buttons, badges) use 3px for tighter, more refined corners. Larger containers (modals, expanded panels) use 12px to signal importance and create visual breathing room. The full radius (9999px) is reserved for pill-shaped badges and circular icon buttons. Border-radius is never used on the body or major layout containers; only interactive and contained el

Components

Action Elements Buttons follow a strict hierarchy: primary buttons use the electric blue background (#2563EB) with white text, 12px horizontal padding, and 44px height for touch targets. On hover, the background darkens to #1E40AF with a 150ms transition. Focus states add a 2px blue outline (box-shadow: 0 0 0 2px #2563EB). Secondary buttons use a transparent background with a 1px outline in outline color (#8F8F8F) and primary text; on hover, they fill with surface-container-low (#EEEEEE). Ghost buttons (used for back links, secondary actions) have no background or border, only text in tertiary grey (#454545); on hover, they gain a subtle background fill. All buttons use label-md typography (12px, 600 weight) and border-radius of 6px. Icon buttons are 40px × 40px with transparent backgr

Do's and Don'ts

**Do**

• Do use the primary blue (#2563EB) exclusively for interactive elements—buttons, focus states, links—never on passive surfaces or backgrounds.
• Do maintain the 24px gutter and 40px section spacing consistently; whitespace is a design material, not wasted space.
• Do apply the 6px default border-radius to all interactive components; never use sharp corners on buttons or inputs.
• Do use the near-black text color (#202020) for primary content and #686868 for secondary information; never use pure black or pure white for text.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on card hover and the lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) on modals; shadows should feel warm and soft, not harsh.
• Do use label-md (12px, 600 weight) for all UI labels, form fields, and badges; maintain consistent typographic hierarchy.
• Do transition all interactive state changes over 150–200ms with ease-out timing; avoid instant state changes.
• Do use the surface container stack (#F5F5F5 through #D1D5DB) for visual hierarchy; never introduce new greys outside this range.

**Don't**

• Don't use the primary blue on backgrounds, cards, or passive surfaces; it is reserved for interactive moments only.
• Don't mix border-radius values; stick to the defined scale (3px, 6px, 8px, 12px, 16px, 9999px).
• Don't apply shadows to flat surfaces or the page background; shadows are reserved for elevated components (cards on hover, modals, dropdowns).
• Don't use system fonts or generic sans-serif fallbacks; always specify ft-primary with system fallbacks as the secondary chain.
• Don't create custom colors outside the defined palette; the monochromatic surface stack and single accent blue are intentional constraints.
• Don't use letter-spacing greater than 0.03em on body text; it reduces legibility and breaks the refined aesthetic.
• Don't apply padding inside card components; padding is the responsibility of internal content elements.
• Don't animate opacity or transform on hover for buttons; only animate background-color and box-shadow over 150ms.