Index

Everything filed so far, as a table. Newest first. Hover a row to see the cover.

No.
Chapter
Title
Format
Elements
Use for
Added
sof-0075
No. 0075
CH02
SFS Architecture, the studio name across the footer
Website
Type
Hierarchy
Footer
October 10, 2026
A near-black footer with a short studio description and three small link columns, above the words SFS Architecture set large enough to run across the full width
sof-0074
No. 0074
CH02
SFS Architecture, sectors as a ruled index
Website
Hierarchy
Grid
Navigation
October 10, 2026
On a warm off-white ground, the heading Sectors we design for beside nine numbered ruled rows, from Industrial to Transportation, each with a small project count and an arrow
sof-0073
No. 0073
CH02
SFS Architecture, four disciplines as folding panels
Website
Composition
Interaction
Card
October 10, 2026
Four image panels in a row on a dark ground: Architecture open wide with a house photograph and description, Interior Design, Project Management and Urban Development folded into narrow strips with vertical titles
sof-0072
No. 0072
CH02
SFS Architecture, a sans line that turns serif
Website
Type
Contrast
Hero
October 10, 2026
The SFS Architecture home page: a full-bleed photograph of a white house in a garden, with the headline Improving the living experience of people and places, its last words in italic serif
sof-0071
No. 0071
CH02
Vercel, a headline and a shape
Website
Composition
Type
Contrast
Hero
September 19, 2026
The Vercel home page: a white screen with a left-aligned two-line headline and a single solid black triangle held in the middle of the frame
sof-0070
No. 0070
CH02
Superhuman, the interface around a face
App
Composition
Color
Hierarchy
Card
September 19, 2026
The Superhuman home page: a portrait centred under the line Superpowers, everywhere you work, with interface cards arranged at the left and right edges
sof-0069
No. 0069
CH02
GitHub, four numbers in a row
Website
Contrast
Hierarchy
Grid
Card
September 19, 2026
The GitHub about page: a dark hero above a single row of four very large figures, with a grid of cards beginning below them
sof-0068
No. 0068
CH02
Obsidian, the whole app in one shot
App
Grid
Hierarchy
Interaction
Navigation
September 19, 2026
The Obsidian home page: a dark screen reading Sharpen your thinking above a screenshot showing a file sidebar, an open note and a graph panel side by side
sof-0067
No. 0067
CH02
Pentagram's work index
Website
Grid
Composition
Type
Case study
September 19, 2026
The Pentagram work index: projects at deliberately different sizes across the page, each with the same small caption underneath
sof-0066
No. 0066
CH02
Ghost pricing, one control above four tiers
Website
Grid
Hierarchy
Interaction
Pricing
September 19, 2026
The Ghost pricing page: a single control above four identical tier cards, each showing a price and a list of what is included
sof-0065
No. 0065
CH02
Typeform, one question in the frame
Website
Interaction
Composition
Copy
Form
September 19, 2026
The Typeform home page with a single dark question card floating in front of the hero, showing one question and its answer options
sof-0064
No. 0064
CH02
Things, an icon and one paragraph
App
Composition
Type
Hierarchy
Hero
September 19, 2026
The Things home page: a white screen with the app icon centred above the name, one short paragraph, one link, and a screenshot beginning below
sof-0063
No. 0063
CH02
Are.na, the argument in plain paragraphs
Website
Copy
Type
Grid
Case study
September 19, 2026
The Are.na home page: numbered plain-text paragraphs explaining the product, with a grid of image blocks beginning underneath
sof-0062
No. 0062
CH02
Stripe docs, three panes
Website
Grid
Hierarchy
Interaction
Navigation
September 19, 2026
A Stripe documentation page in three columns: a light navigation sidebar, prose in the centre and a dark code panel pinned on the right
sof-0061
No. 0061
CH02
Raycast, one sentence on black
App
Type
Composition
Contrast
Hero
September 19, 2026
The Raycast home page: a near-black screen with the centred line Your shortcut to everything and a thin nav above it
sof-0060
No. 0060
CH02
Mercury, a photograph behind a bank
Website
Composition
Contrast
Copy
Hero
September 19, 2026
The Mercury home page: a wide landscape photograph behind the line Radically different banking, with a single email field under it
sof-0059
No. 0059
CH02
A tag tied to the bag
Object
Interaction
Copy
Composition
Form
September 19, 2026
A blue tag tied to the handle of a suitcase, carrying its details on the bag itself
sof-0058
No. 0058
CH02
A wooden date stamp
Object
Interaction
Texture
Composition
Form
September 19, 2026
A wooden hand stamp resting on a desk, the kind that takes a deliberate press to leave a mark
sof-0057
No. 0057
CH02
Box office, lit in the dark
Signage
Contrast
Hierarchy
Type
Pricing
September 19, 2026
A box office sign lit up against a dark facade, the only illuminated thing in the frame
sof-0056
No. 0056
CH02
Film unspooled across the floor
Film Still
Motion
Texture
Composition
Transition
September 19, 2026
A length of film tape unspooled across a floor, running as one continuous ribbon
sof-0055
No. 0055
CH02
Six frames in a strip
Film Still
Motion
Grid
Composition
Transition
September 19, 2026
A strip of six film frames laid in a row, each one a small step on from the last
sof-0054
No. 0054
CH02
A figure in front of the posters
Film Poster
Composition
Contrast
Hierarchy
Hero
September 19, 2026
A person standing in front of a wall of film posters, giving the display its height
sof-0053
No. 0053
CH02
A wall of VHS covers
Film Poster
Grid
Color
Composition
Card
September 19, 2026
A wall covered edge to edge with vintage VHS cases, every spine and cover the same size
sof-0052
No. 0052
CH02
Care label inside a shirt
Fashion
Type
Copy
Texture
Footer
September 19, 2026
Close-up of a woven care label sewn inside the collar of a shirt, printed small in plain type
sof-0051
No. 0051
CH02
Mannequins in a row, one dark window
Fashion
Composition
Contrast
Hierarchy
Case study
September 19, 2026
Identical mannequins lined up in a darkened shop window, lit so only the clothes read
sof-0050
No. 0050
CH02
Socks sorted by colour
Fashion
Color
Grid
Hierarchy
Card
September 19, 2026
Stacks of folded socks on wooden store shelves, arranged in blocks by colour with no labels
sof-0049
No. 0049
CH02
Three jars, one variable
Packaging
Grid
Contrast
Hierarchy
Pricing
September 19, 2026
Three identical glass jars side by side on a supermarket shelf, differing only in their contents
sof-0048
No. 0048
CH02
Canned goods, one label, many products
Packaging
Grid
Color
Texture
Card
September 19, 2026
Vintage canned goods on wooden shelves, every tin sharing the same label layout with only the product changing
sof-0047
No. 0047
CH02
Amber bottle, blank label
Packaging
Composition
Texture
Contrast
Hero
September 19, 2026
An amber glass dropper bottle with an almost empty white label, standing on a concrete block in hard light
sof-0046
No. 0046
CH02
A long list broken into named groups
Book
Grid
Hierarchy
Type
Footer
September 19, 2026
A printed alphabetical list divided into named groups, each group set under its own heading
sof-0045
No. 0045
CH02
The index at the back
Book
Type
Grid
Copy
Footer
September 19, 2026
A printed index page, entries alphabetised and set dense in small type with page numbers
sof-0044
No. 0044
CH02
Fanned directory, coloured page edges
Book
Color
Grid
Hierarchy
Navigation
September 19, 2026
A thick directory fanned open, its sections marked by bands of colour printed on the page edges
sof-0043
No. 0043
CH02
Row of old books, spines out
Book
Type
Hierarchy
Texture
Navigation
September 19, 2026
A row of old hardbacks shelved spine outward, each spine carrying its title in stamped lettering
sof-0042
No. 0042
CH02
A magazine read in black and white
Magazine
Texture
Composition
Hierarchy
Case study
September 19, 2026
A person reading an open magazine whose photographs are all black and white
sof-0041
No. 0041
CH02
Magazines overlapped on a shelf
Magazine
Hierarchy
Composition
Type
Navigation
September 19, 2026
Magazines racked on a shelf, each one overlapping the next so only the top strip of each cover shows
sof-0040
No. 0040
CH02
Street newsstand, covers at one size
Magazine
Grid
Composition
Hierarchy
Card
September 19, 2026
A street newsstand packed with magazines and newspapers, every cover held in the same rectangle
sof-0039
No. 0039
CH02
Stripe's footer as a site index
Website
Grid
Hierarchy
Copy
Footer
September 19, 2026
The Stripe footer: four columns of alphabetised product and resource links separated by vertical hairline rules on a near-white ground
sof-0038
No. 0038
CH02
Buttondown, illustration around a question
Website
Composition
Type
Color
Hero
September 19, 2026
Buttondown's home page: a centred headline reading Why is running a newsletter so hard, with flat illustration crowding in from both edges on a near-black ground
sof-0037
No. 0037
CH02
Basecamp pricing, one plan at a time
Website
Interaction
Hierarchy
Copy
Pricing
September 19, 2026
Basecamp's pricing page: a list of five tiers on the left, one selected, with that plan's price and features filling a panel on the right
sof-0036
No. 0036
CH02
Departure board from below
Photograph
Composition
Contrast
Hierarchy
Hero
September 19, 2026
A low-angle view of an airport departure board filling the frame overhead
sof-0035
No. 0035
CH02
Artefacts under directional light
Photograph
Contrast
Composition
Color
Case study
September 17, 2026
A dark museum hall with display cases lit one at a time along both walls
sof-0034
No. 0034
CH02
Labelled specimens under glass
Object
Composition
Hierarchy
Copy
Case study
September 15, 2026
Rock and mineral specimens shelved in a glass cabinet, each with its own small white label
sof-0033
No. 0033
CH02
Card catalogue drawers
Object
Grid
Type
Texture
Card
September 14, 2026
A wall of wooden card catalogue drawers, each with a small metal label holder
sof-0032
No. 0032
CH02
Fan of playing cards
Object
Composition
Grid
Hierarchy
Card
September 11, 2026
A hand holding playing cards fanned out so only the corner indices show
sof-0031
No. 0031
CH02
Library hall sign over the shelves
Signage
Type
Hierarchy
Grid
Navigation
September 10, 2026
A hall sign mounted above wooden library shelving
sof-0030
No. 0030
CH02
Building directory board
Signage
Type
Grid
Hierarchy
Navigation
September 8, 2026
A lobby directory board listing businesses against their floor numbers
sof-0029
No. 0029
CH02
Forest direction signs
Signage
Hierarchy
Composition
Type
Navigation
September 7, 2026
Wooden signs on a post pointing toward several destinations in a forest
sof-0028
No. 0028
CH02
Open door into a dark room
Photograph
Contrast
Composition
Motion
Transition
September 4, 2026
A figure standing in a lit doorway, seen from inside a dark room
sof-0027
No. 0027
CH02
Arch tunnel under running lights
Photograph
Motion
Composition
Color
Transition
September 2, 2026
A road tunnel lit by a repeating run of yellow lights along its arch
sof-0026
No. 0026
CH02
Escalator, seen end to end
Photograph
Composition
Motion
Contrast
Transition
September 1, 2026
An architectural view of an escalator running between two levels of a building
sof-0025
No. 0025
CH02
A page of serif text
Book
Type
Grid
Hierarchy
Footer
August 28, 2026
A close view of a printed book page set in a serif typeface
sof-0024
No. 0024
CH02
Nine mailboxes in a stucco wall
Object
Grid
Type
Composition
Footer
August 26, 2026
Nine metal mailboxes labelled CARTAS set in a grid into a beige stucco wall
sof-0023
No. 0023
CH02
Stone date plaque
Signage
Type
Texture
Hierarchy
Footer
August 24, 2026
A carved stone plaque reading the 1906 set into a red brick wall
sof-0022
No. 0022
CH02
Parking meter
Object
Hierarchy
Interaction
Composition
Form
August 21, 2026
A parking meter standing at the roadside with its display and controls on one face
sof-0021
No. 0021
CH02
Combination padlock
Object
Interaction
Type
Form
August 19, 2026
A silver and black combination padlock with its numbered dials showing
sof-0020
No. 0020
CH02
Vending machine, sold out row
Object
Interaction
Grid
Hierarchy
Form
August 17, 2026
A vending machine with several selections marked sold out in their slots
sof-0019
No. 0019
CH02
Sale tags on a clothing rail
Fashion
Grid
Contrast
Color
Pricing
August 14, 2026
Red sale tags hanging from every garment along a clothing rail
sof-0018
No. 0018
CH02
Fuel price totem at night
Signage
Hierarchy
Contrast
Type
Pricing
August 12, 2026
A glowing red digital fuel price sign standing against a dark night sky
sof-0017
No. 0017
CH02
Chalkboard sandwich menu
Signage
Type
Hierarchy
Texture
Pricing
August 10, 2026
A chalkboard menu listing sandwiches with their prices written by hand
sof-0016
No. 0016
CH02
Capsule tower facade
Photograph
Grid
Composition
Texture
Card
September 18, 2026
Close view of a tower facade built from repeated capsule modules with round windows
sof-0015
No. 0015
CH02
Faune magazine spread
Magazine
Composition
Grid
Case study
September 18, 2026
An open magazine spread with a full-page portrait facing a page of quiet text
sof-0014
No. 0014
CH02
Wood letterpress type
Book
Type
Texture
Hero
September 18, 2026
Close view of antique wooden letterpress blocks laid in tight diagonal rows
sof-0013
No. 0013
CH02
Salt & Stone packaging
Packaging
Type
Composition
Card
September 18, 2026
A pale minimal product box with a small centred wordmark on a white surface
sof-0012
No. 0012
CH02
Airport gate signage
Signage
Type
Grid
Composition
Navigation
September 18, 2026
Airport sign stack listing gates, currency exchange and lounges with directional arrows
sof-0011
No. 0011
CH02
Linear
App
Interaction
Type
Composition
Hero
September 18, 2026
Linear home page: dark interface screenshot under the headline The product development system
sof-0010
No. 0010
CH02
Cosmos
App
Copy
Composition
Hero
September 18, 2026
Cosmos home page: the line Your space for inspiration centred on a warm cream ground
sof-0009
No. 0009
CH02
Readymag
Website
Color
Grid
Composition
Hero
September 18, 2026
Readymag home page: flat orange, black and green panels stacked across the screen
sof-0008
No. 0008
CH02
Interfere
Website
Type
Grid
Copy
Hero
September 15, 2026
Interfere home page: the headline Ship software that never breaks above a product screenshot
sof-0006
No. 0006
CH02
Bécane Paris
Website
Motion
Texture
Transition
September 15, 2026
Becane Paris collection page: a row of figures lined up across a white ground under the word Collection