A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
21tokens
10type steps
2radius steps
7pxspacing base
Flickr, in one page
Flickr's iOS app is a photography-first design system where the *image* is the entire interface and chrome is engineered to disappear. Open the app and you land in the photostream — a justified mosaic where photos are scaled to fill the screen edge-to-edge in rows of varying height, separated only by hairline 3pt gutters. There are no cards, no rounded corners on the photos, no drop shadows competing for attention. The canvas is near-black (#0C0D0E in dark, #FFFFFF in light) precisely so that full-color photography reads first and the UI recedes into negative space. This is the opposite of a typical content-card app: Flickr treats every screen as a gallery wall.
The two signature UI moments are the justified grid and the photo detail page. The justified grid is Flickr's heritage layout — a row-packing algorithm that preserves each photo's native aspect ratio while making every row the same height and full-bleed width, so a landscape, a square, and a portrait sit side-by-side with no cropping and no letterboxing. Tap any photo and you drop into the photo detail page: the image at full width, then the title in Proza Libre, the author row with avatar, the action bar (Fave / Comment / Share / Add to album), and — Flickr's truly distinctive surface — the EXIF / camera detail table: a clean key-value list of Camera, Lens, Exposure, Aperture, ISO, Focal length, and Date taken. No other mainstream photo app surfaces camera metadata this prominently; it is the core of Flickr's photographer-centric identity.
The brand is anchored by two dots: Flickr Pink (#FF0084) and Flickr Blue (#0063DC), drawn as overlapping circles in the logomark. Pink is the favorite/like color and the primary action color (Upload, Follow); Blue is the link and secondary-action color (Add to album, view links, hyperlinked tags). These two saturated hues are the *only* chromatic accents in an otherwise grayscale system — everything else is photography. A Pro gold star (#FFB200) appears only on Pro-account badges. The favorite "star" is Flickr's like primitive (not a heart) — a five-point star that fills Flickr Pink when active.
Typography pairs an editorial serif with a UI sans. Proza Libre (Google Fonts, an open serif designed for screen body text) carries titles, photo titles, and section headers — giving Flickr its "this is curated photography, not a social feed" magazine voice. Inter (or SF Pro fallback) handles all functional UI: tab labels, metadata, buttons, EXIF tables. EXIF values are set in a monospace face (SF Mono / IBM Plex Mono) so f/2.8 · 1/250s · ISO 100 · 35mm aligns like a camera readout. Hierarchy is gallery-like: a 32pt screen title, 18pt photo titles, 13pt photographer metadata, 11pt monospace EXIF.
Key Characteristics:
- Near-black gallery canvas (
#0C0D0Edark /#FFFFFFlight) — photography reads first, chrome recedes - Justified photo mosaic — row-packed full-bleed grid preserving native aspect ratios, 3pt gutters
- Photo detail page — full-width image + title + author row + action bar + EXIF table
- EXIF / camera detail table — Camera / Lens / Exposure / Aperture / ISO / Focal length / Date taken key-value rows
- Twin brand dots — Flickr Pink (
#FF0084) for favorites & primary, Flickr Blue (#0063DC) for links & secondary - Five-point favorite star (not a heart) — fills
#FF0084when active, with fave count overlay - Proza Libre serif (titles, headers) + Inter sans (UI) + monospace EXIF readouts
- Pro gold star (
#FFB200) — appears only on Pro-account badges - Photos never dim across themes — only chrome, dividers, and EXIF tables invert
- Camera & lens metadata as tappable chips — link to "more from this camera/lens"
- Albums & galleries as curated collections — cover photo + count, magazine-styled
- Minimal navigation chrome — bottom tab strip (Feed / Search / Camera / Notify / You), center camera FAB-style tab
Do's and don'ts
Do
- Use a near-black canvas (
#0C0D0Edark /#FFFFFFlight) so photography reads first - Build the photostream as a justified mosaic — row-packed, native aspect ratios, 3pt gutters
- Surface the EXIF / camera detail table prominently on photo detail — it's Flickr's identity
- Use the five-point star (not a heart) as the favorite primitive — fills
#FF0084 - Use Flickr Pink (
#FF0084) for favorites + primary actions, Flickr Blue (#0063DC) for links + secondary - Set EXIF values in monospace so
f/2.8 · 1/250s · ISO 100aligns like a camera readout - Use Proza Libre (serif) for titles/headers, Inter (sans) for all functional UI
- Keep photo grid tiles square-cornered, borderless, shadowless — the wall is continuous
- Make camera/lens metadata tappable chips that link to "more shot with this gear"
- Reserve the gold star (
#FFB200) for Pro badges only - Keep nav/tab chrome translucent and blurred so it floats invisibly over photos
Don't
- Don't crop photos in the grid — the justified algorithm preserves native aspect ratios
- Don't round the corners of grid tiles or the detail image — full-bleed, square
- Don't use a heart for favorites — Flickr's like is a five-point star
- Don't add drop shadows to photos — shadows muddy the gallery wall
- Don't use the serif (Proza Libre) for EXIF, tab labels, or buttons — that's Inter's job
- Don't set EXIF values in a proportional font — they must be monospace and column-aligned
- Don't lighten the dark canvas toward gray — near-black
#0C0D0Eis intentional - Don't introduce accent colors beyond Pink/Blue (and the Pro gold) — everything else is photography
- Don't dim photos in dark mode — only chrome and EXIF tables recede
- Don't widen the grid gutter beyond 3pt — the tight mosaic is the signature
- Don't bury camera metadata in a secondary screen — the EXIF table is core, not optional
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Flickr design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Flickr Pink: #ff0084
- Flickr Pink Pressed: #d60070
- Flickr Blue: #0063dc
- Flickr Blue Pressed: #0052b8
- Gallery Canvas: #0c0d0e
- Surface 1: #1a1b1d
- Surface 2: #232427
- Divider: #2a2c30
- Canvas White: #ffffff
- Surface Gray: #f5f6f7
Type:
- families: Proza Libre, Editorial Serif, Inter, UI Sans
- scale: 10, 11, 12, 13, 15, 16, 18, 22, 26
- weights: 400, 500, 600, 700
Shape:
- radius: 6, 10
- elevation: No corner radius (full-bleed), no border, no shadow
Spacing: 7, 8, 11, 13
Rules:
- Use a near-black canvas (`#0C0D0E` dark / `#FFFFFF` light) so photography reads first
- Build the photostream as a justified mosaic — row-packed, native aspect ratios, 3pt gutters
- Surface the EXIF / camera detail table prominently on photo detail — it's Flickr's identity
- Use the five-point star (not a heart) as the favorite primitive — fills `#FF0084`
- Use Flickr Pink (`#FF0084`) for favorites + primary actions, Flickr Blue (`#0063DC`) for links + secondary
- Set EXIF values in monospace so `f/2.8 · 1/250s · ISO 100` aligns like a camera readout
Avoid:
- Don't crop photos in the grid — the justified algorithm preserves native aspect ratios
- Don't round the corners of grid tiles or the detail image — full-bleed, square
- Don't use a heart for favorites — Flickr's like is a five-point star
- Don't add drop shadows to photos — shadows muddy the gallery wall
- Don't use the serif (Proza Libre) for EXIF, tab labels, or buttons — that's Inter's job
- Don't set EXIF values in a proportional font — they must be monospace and column-aligned
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Flickr Pink (
#FF0084): Primary action color — Upload button, Follow button, active favorite star, primary CTAs. - Flickr Pink Pressed (
#D60070): Pressed state for pink controls. - Flickr Blue (
#0063DC): Secondary/link color — Add to album, hyperlinked tags, "View all" text links, in-text links. - Flickr Blue Pressed (
#0052B8): Pressed state for blue controls.
Canvas & Surfaces (Dark Mode — default for gallery viewing)
- Gallery Canvas (
#0C0D0E): Primary dark canvas — intentionally near-black so photos dominate. - Surface 1 (
#1A1B1D): Cards, sheets, EXIF table container, settings rows. - Surface 2 (
#232427): Chips, raised controls, search field background. - Divider (
#2A2C30): Hairline dividers between EXIF rows, list rows, sections.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas. - Surface Gray (
#F5F6F7): Cards, EXIF container, grouped settings. - Surface Pressed (
#EAECEF): Pressed/selected rows. - Divider Light (
#E2E4E8): Hairline dividers.
Text
- Text Primary Dark (
#FFFFFF): Primary text on dark — photo titles, headers. - Text Secondary Dark (
#B0B3B8): Metadata, photographer names, captions. - Text Tertiary Dark (
#6E7176): EXIF labels, timestamps, disabled. - Text Primary Light (
#1C1F23): Primary text on light — near-black, not pure black. - Text Secondary Light (
#6B7077): Metadata on light.
Accent & Semantic
- Pro Gold Star (
#FFB200): Pro-account badge star — used *only* for Pro badging. - Success Green (
#00C781): Upload-complete toast, save confirmation. - Error Red (
#FF3B5C): Upload-failed, destructive confirmation. - Favorite Star Active (
#FF0084): The fave star fill (= Flickr Pink). - Photo Overlay Scrim (
rgba(0,0,0,0.45)): Bottom-up gradient behind fave-count text on grid tiles.
| Role | Light Mode | Dark Mode |
|---|---|---|
| Canvas | #FFFFFF | #0C0D0E |
| Surface 1 | #F5F6F7 | #1A1B1D |
| Surface 2 | #EAECEF | #232427 |
| Divider | #E2E4E8 | #2A2C30 |
| Text Primary | #1C1F23 | #FFFFFF |
| Text Secondary | #6B7077 | #B0B3B8 |
| Flickr Pink | #FF0084 | #FF0084 |
| Flickr Blue | #0063DC | #0063DC |
| Pro Gold | #FFB200 | #FFB200 |
Type scaleRead the full spec
Font Family
- Editorial Serif:
Proza Libre(by Jasper de Waard / Bureau Roffa, Google Fonts, SIL OFL) — a sturdy screen-optimized serif used for titles, photo titles, and section headers; gives Flickr its curated-photography editorial voice. - UI Sans:
Inter(by Rasmus Andersson, SIL OFL) — all functional UI: tab labels, metadata, buttons, settings, EXIF labels. - Monospace (EXIF readout):
IBM Plex Mono/ systemSF Mono— EXIF values sof/2.8 · 1/250s · ISO 100aligns like a camera display. - Fallback Stack (serif):
'Proza Libre', Georgia, 'Times New Roman', serif - Fallback Stack (sans):
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Proza Libre | 32pt | 700 | 1.2 | -0.4pt | "Explore", large nav title |
| Section Header | Proza Libre | 26pt | 700 | 1.25 | -0.3pt | "Recent activity", album section |
| Nav Title | Proza Libre | 22pt | 600 | 1.3 | -0.3pt | Compact nav bar title ("Photostream") |
| Photo Title | Proza Libre | 18pt | 600 | 1.3 | -0.2pt | Title on photo detail page |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Photo description, comment text |
| Card Title | Inter | 15pt | 600 | 1.35 | 0pt | Album / gallery card title |
| Button | Inter | 15pt | 700 | 1.0 | 0pt | Primary / secondary buttons |
| Meta | Inter | 13pt | 400 | 1.4 | 0pt | "by Sofia Marent · 312 faves · 2d" |
| Fave Count (overlay) | Inter | 11pt | 600 | 1.0 | 0pt | Grid tile fave count, on scrim |
| EXIF Label | Inter | 12pt | 400 | 1.4 | 0pt | EXIF row key ("Aperture") |
| EXIF Value | IBM Plex Mono | 11pt | 600 | 1.4 | 0.3pt | EXIF row value ("f/2.8") |
| Tag Chip | Inter | 12pt | 600 | 1.0 | 0pt | Camera / lens / keyword chips |
| Tab Label | Inter | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Caption | Inter | 12pt | 400 | 1.4 | 0pt | Timestamps, small print |
Principles
- Serif for curation, sans for function: Proza Libre signals "this is photography worth reading about"; Inter handles every interactive/utility surface. Never set EXIF or tab labels in the serif.
- EXIF is monospace: camera readouts (
f/2.8,1/250s,ISO 100,35mm) are always monospace so columns and decimals align like a camera display. - Photo titles breathe: Proza Libre 18pt w600 with generous 16pt top margin above the author row — the title is the only large type on a photo page.
- Metadata is quiet: photographer names, fave counts, timestamps stay at 13pt secondary — they support the photo, never compete.
- Dynamic Type first-class: titles, body, metadata scale; EXIF values, tab labels, fave-count overlays stay fixed (layout-sensitive in the justified grid).
Components and layoutRead the full spec
Buttons
Primary Button (Upload / Follow)
- Shape: Rounded rectangle, 6pt corner radius (Follow chip is pill 500pt)
- Background:
#FF0084(Flickr Pink) - Text:
#FFFFFF, Inter 15pt weight 700 - Padding: 13pt vertical, 26pt horizontal
- Pressed: background
#D60070+ scale 0.98 - Disabled:
#FF0084at 40% opacity
Secondary Button (Add to Album / Share to)
- Background:
#0063DC(Flickr Blue) - Text:
#FFFFFF, Inter 15pt weight 700 - Padding: 13pt vertical, 26pt horizontal
- Corner radius: 6pt
- Pressed: background
#0052B8
Outline Button (Edit / Cancel)
- Background: transparent
- Text: Text Primary (
#FFFFFFdark /#1C1F23light) - Border: 1pt Text Secondary
- Corner radius: 6pt
- Padding: 11pt vertical, 20pt horizontal
- Font: Inter 14pt weight 600
Follow Pill
- Background:
#FF0084, fully rounded (500pt) - Text:
#FFFFFF, Inter 13pt weight 700 - Padding: 8pt vertical, 18pt horizontal
- Following state: outline style — transparent bg, 1pt
#B0B3B8border, text#B0B3B8
Text Link Button
- Font: Inter 14pt weight 600
- Color:
#0063DC(Flickr Blue) - No underline; pressed: 70% opacity
Core Atoms
Favorite Star (the like primitive)
- A five-point star, NOT a heart
- Inactive: outline only,
#FFFFFF1.8pt stroke at 90% (on photo) /#B0B3B8(on light surfaces) - Active: filled
#FF0084(Flickr Pink), no stroke - Tap animation: scale 1.0 → 1.25 → 1.0 over 280ms spring + soft haptic; brief Flickr Pink particle burst
- Adjacent fave count: Inter 11pt w600
Grid Tile (justified mosaic cell)
- No corner radius (full-bleed), no border, no shadow
- Photo fills cell; 3pt gutter between cells and rows
- Bottom scrim:
linear-gradient(transparent, rgba(0,0,0,0.45))lower 40% — only present if fave count shown - Fave count overlay: bottom-left, white star + count, 11pt w600, text-shadow
0 1px 3px rgba(0,0,0,0.7) - Long-press: lifts a quick-action peek (Fave / Add to album / Share)
Avatar
- Circle, 30pt on photo detail (24pt in comments, 40pt on profile)
- Pro accounts: 2pt
#FFB200ring - Fallback: linear-gradient(135deg,
#FF0084,#0063DC) with initials
EXIF Row
- Full-width key-value row, 0.5pt
#2A2C30bottom divider - Key: Inter 12pt w400
#B0B3B8, left-aligned - Value: IBM Plex Mono 11pt w600
#FFFFFF, right-aligned - Row height: ~32pt (7pt vertical padding)
- Container: Surface 1, 12pt radius, 16pt inset
Camera / Lens / Tag Chip
- Background: Surface 2 (
#232427), 1pt#2A2C30border - Pill shape (500pt radius)
- Text: Inter 12pt w600
#FFFFFF; EXIF-value chips use IBM Plex Mono 11pt - Padding: 7pt vertical, 14pt horizontal
- Tappable -> opens "more shot with this camera/lens" search
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
rgba(12,13,14,0.94)withsaturate(180%) blur(20px)backdrop, 0.5pt top border#2A2C30 - Tabs (5): Feed, Search, Camera (center, emphasized), Notify, You
- Icon size: 23pt (Camera 27pt, drawn in
#FF0084outline as a quasi-FAB) - Active: icon fills
#FFFFFF(Camera always pink); Inactive:#6E7176 - Labels: Inter 10pt w500, shown always (Camera has no label)
Top Nav (Photostream / Detail)
- Height: 44pt + safe area
- Leading: large title that collapses to 22pt Proza Libre nav title on scroll
- Trailing: search glyph + camera glyph (21pt,
#FFFFFFstroke) - Photo detail: leading back chevron, trailing ... overflow (Report, Download, Copy link)
Input Fields
Search Bar
- Height: 40pt
- Background: Surface 2 (
#232427) /#EAECEFlight - Corner radius: 10pt
- Leading icon: magnifyingglass 16pt
#6E7176 - Placeholder: "Search photos, people, groups" Inter 14pt
#6E7176 - Focus: 1pt
#0063DCborder (Flickr Blue)
Comment Composer
- Height: 44pt min, grows to 5 lines
- Background: Surface 1, 22pt radius (capsule when single line)
- Trailing "Post" text button in
#0063DC(disabled#6E7176when empty)
Distinctive Components
Justified Photo Mosaic
- The signature layout. Row-packing: given a target row height (~110-130pt on phone) and screen width, scale each photo by its aspect ratio so the row exactly fills width; clamp final row.
- Gutter: 3pt between tiles and between rows
- No cropping — native aspect ratios preserved
- Infinite scroll; new rows packed as you scroll
Photo Detail Page
- Full-width image (native aspect, max 70% viewport height before scroll)
- Below: Proza Libre 18pt title -> author row (avatar + name + Follow pill) -> action bar (Fave / Comment / Share / Add) -> description body -> EXIF table -> tags chip-row -> comments
- Action bar icons: 18pt, label below, Fave active =
#FF0084filled
EXIF / Camera Detail Table
- Card (Surface 1, 12pt radius) titled "CAMERA DETAILS" (10pt w700 tracked
#6E7176) - Rows: Camera, Lens, Exposure, Aperture, Focal length, ISO, Flash, Date taken
- Key Inter 12pt w400
#B0B3B8<-> Value IBM Plex Mono 11pt w600#FFFFFF - Tapping Camera/Lens rows -> search "shot with this gear"
Album / Gallery Card
- Cover photo (4:3) with no radius, then title (Inter 15pt w600) + "248 photos" count (13pt secondary)
- Galleries (curated collections) get a small
#0063DCcurator byline
Pro Badge
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Justified grid target row ~105pt; EXIF table single column |
| iPhone 13/14/15 | 390pt | Standard layout, target row ~115pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in translucent top nav |
| iPhone 15/16 Pro Max | 430pt | Target row ~130pt; larger photo titles |
| iPad (portrait) | 768pt | Target row ~170pt; photo detail in centered 760pt column |
| iPad (landscape) | 1024pt+ | Target row ~200pt; 2-pane (grid + detail) split view |
Dynamic Type
- Photo titles, body, comments, metadata: full scale
- EXIF values, fave-count overlays, tab labels: FIXED (layout-sensitive in the justified grid and on photo scrims)
- Camera/lens chips: scale to L then truncate
Orientation
- Photostream re-packs the justified grid on rotation (recomputes row heights for new width)
- Photo detail rotates; landscape uses full-screen lightbox by default
- iPad landscape: persistent two-pane (mosaic left, detail right)
Touch Targets
- Grid tile: full tile tappable (min effective 44pt via row height)
- Fave star: 24pt glyph, 44pt hit area
- Tab bar icons: 23pt glyph (Camera 27pt), 48pt hit
- EXIF row: full-row tappable for Camera/Lens rows, 44pt min
- Buttons: 44pt tall minimum
Safe Area Handling
- Top: translucent nav respects safe area + Dynamic Island
- Bottom: translucent tab bar respects home indicator; lightbox extends edge-to-edge under safe areas
- Sides: photo grid is full-bleed (ignores side insets); text content keeps 16pt insets
- Keyboard: comment composer docks above keyboard; photo detail scrolls clear
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-flickr {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0c0d0e;
--heading-color: #0c0d0e;
--link-color: #d7006e;
--link-hover-color: #a40054;
--border-color: #d3d3d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(12,13,14,0.06);
--card-hover-shadow: 0 6px 18px rgba(12,13,14,0.12);
--header-bg: #0c0d0e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #616262;
--button-bg: #ff0084;
--button-text-color: #000000;
--button-hover-bg: #cc006a;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f0f0f1;
--button-secondary-text-color: #0c0d0e;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d3d3d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0c0d0e;
--base-font: var(--font-serif);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 81.6%
- grammarly 81.0%
- happn 80.6%
- lemon8 79.3%
- miro 78.3%
Where this came from
- Source document
ios/design-md/social/flickr/DESIGN.md· 25.2 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.