Paper
#ffffffPage background, card surfaces, image holders — the dominant canvas; everything sits on this
Andrei Rybin
andreirybin.comWebsite preview
The design language
A monochrome atelier notebook: a near-pure black-on-white canvas where the only visual event is typography against a generous grid of project tiles. Every surface is paper-white; every element either ink-black or a single shade of graphite for secondary information — there is no accent color, no gradient, no fill that isn't neutral. Components are stripped to their function: a pill-shaped label names the work, a circular arrow button invites the next view, thin 1px borders quietly separate sections. The product is the showcase, so the system recedes — the phone mockups carry all the visual weight while the framework stays silent.
Color palette
neutral
Ink
#000000Primary text, link text, icon strokes, thin section dividers — the only mark-making color
Graphite
#858585Secondary text, muted metadata, and softer border lines that recede behind primary ink
Stone
#8e8e90Cool-toned border and divider strokes for borders that need a hairline without competing with Ink
Typography
Type scale
subheading
24px · 400 · 1.23 · -0.4px trackingThe quick brown fox jumps
caption
12px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Inter
- Weights
- 400
- Sizes
- 12px, 24px
- Line height
- 1.20, 1.23, 1.30
- Letter spacing
- -0.0170em
- Fallback
- system-ui, -apple-system, 'Segoe UI', sans-serif
Body copy, project captions, and the larger intro paragraphs. Used at a single weight — regularity IS the signature; no bold headlines shout, no light weight whispers.
Additional typeface
system-ui (sans-serif)
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.20
- Letter spacing
- normal
- Fallback
- inherit Inter or use system sans
Small UI labels, tag text, icon-adjacent microcopy. Appears wherever a single token of body-size type recurs — utility, not statement.
Additional typeface
.SFNSText
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
- Letter spacing
- -0.017
.SFNSText — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1440px
- Section gap
- 120px
- Card padding
- 16px
- Element gap
- 10px
Border radius
tags
40pxcards
8pxicons
16pxbuttons
9999pxSpacing scale
2px4px6px8px10px16px28px40px120pxGuidelines
Do
- Keep the entire interface achromatic — Ink on Paper, with Graphite and Stone for soft hierarchy.
- Use 8px radius for project tiles, 16px for icon containers, 40px (or 9999px) for pill labels and circular buttons.
- Set body and caption type at Inter 12px with -0.0170em letter-spacing; reserve 24px Inter for the single intro paragraph.
- Separate header columns with whitespace alone — no vertical rules or dividers between nav items.
- Use 10px element gap inside cards and 120px section gap between page bands.
- Let image weight carry the page; the system should be invisible behind the work.
Don’t
- Do not introduce any chromatic color — no accent, no brand hue, no semantic state color.
- Do not use multiple font weights — Inter 400 is the only voice; no bold, no light, no italic.
- Do not apply shadows, gradients, or fills to tiles or buttons; borders are the only separator.
- Do not center body text — captions and metadata are left- or context-aligned, not centered except where a tile naturally centers its caption beneath.
- Do not use a border radius below 8px on cards or above 16px on icons — the radii carry the system's softness and must stay consistent.
- Do not add navigation patterns (hamburgers, sidebars, mega-menus); the header is a single text strip.
- Do not break the grid with asymmetric or overlapping tile placements — the grid is the page's structural truth.
Components
Project Tile Card
Container for a single showcase image (phone mockup) with label and navigation arrowWhite paper surface, 8px radius, no border, 16px internal padding. A pill label sits top-left at 40px corner radius with 1px Ink border, 10px vertical / 8px horizontal padding, Inter 12px. A 32px circular arrow button with 1px Ink border sits top-right. Caption text (Inter 12px Graphite) sits centered beneath the card with 8px gap.
Pill Label
Project category tag overlaid on each cardFully rounded capsule (40px radius) on white paper. 1px Ink border, 6px padding top/bottom, 8px padding left/right. Text: Inter 12px, color Ink, letter-spacing -0.0170em.
Arrow Navigation Button
Compact circular control to open a project32px circle, white fill, 1px Ink border, centered right-pointing arrow icon at 16px radius geometry. No shadow, no fill state — the border is the only affordance.
Header Bar
Top-of-page identity, nav, and social link stripFull-bleed white band with 16px padding. Four text columns separated by generous white space: name+role (left), showreel link (center-left), social links (center-right), index+about (right). All Inter 12px, Ink, letter-spacing -0.0170em. No dividers between columns — whitespace carries the rhythm.
Intro Block
Two-column intro: contact email on the left, welcome paragraph on the right40px row gap between the email and the welcome copy. Email is Inter 12px Ink; the welcome paragraph is Inter 24px Graphite at line-height 1.23 — this is the largest type in the system, used exactly once.
Project Grid
Responsive grid of project tiles filling the rest of the page5 columns at full width, 16px gutters. Each tile occupies a fixed aspect slot (roughly 3:5 portrait). The grid recedes visually — its job is to hold images, not to assert itself.
Caption Label
One-line description under each tile describing the project typeInter 12px, Graphite (#858585), centered, 8px below the card. Format is 'X → Y' or a short noun phrase.
Surfaces & elevation
Level 1
Paper
#ffffffFull-page canvas and the back of every card and image tile
Level 2
Ink Mask
#000000The near-black surfaces that appear inside phone-screen mockups — not a page surface, but defines the photo-to-canvas contrast
The design uses no shadow, no blur, no z-axis elevation. Depth is implied only by the contrast of Ink on Paper, with 1px borders doing all the work that shadows would do in a richer system. Flatness is the philosophy.
Layout & imagery
Layout
Full-bleed page on a white canvas, max-width ~1440px. Header is a single row of four text blocks separated by whitespace (name, showreel, social, index). Below sits a two-column intro: contact email left, welcome paragraph right, separated by 40px gap and generous horizontal space. The main body is a 5-column responsive grid of project tiles at 16px gutters, each tile containing a pill label, a circular arrow button, an image, and a centered caption beneath. Section gap of 120px separates the intro from the grid; the grid itself flows without internal section breaks.
Imagery
Photography-style product mockups of iPhone screens are the only visual content — tightly cropped, high-contrast, most showing dark UI inside white phone frames. Each card is a portrait-ratio still. No lifestyle photography, no illustrations, no abstract graphics. The phone IS the hero; the system frames it like a contact sheet.
Design notes
Agent Guide
Quick Color Reference - text: #000000 (Ink) - background: #ffffff (Paper) - border: #858585 (Graphite) or #8e8e90 (Stone) for soft rules, #000000 (Ink) for structural borders - muted text: #858585 (Graphite) - primary action: no distinct CTA color Example Component Prompts 1. Header strip: white background, full-bleed within 1440px max-width, 16px padding. Four text items in a single row (left/center-left/center-right/right), all Inter 12px weight 400, color #000000, letter-spacing -0.0170em. No dividers between items — whitespace only. 2. Project tile: white background, 8px border-radius, 16px padding. A pill label at top-left: 40px border-radius, 1px solid #000000 border, 6px padding top/bottom and 8px left/right, text Inter 12px #000000. A 32px circular button at top-right: white fill, 1px solid #000000 border, centered right-arrow icon. 3. Intro block: two columns. Left column: Inter 12px #000000 email link. Right column: Inter 24px #858585, line-height 1.23, letter-spacing -0.4px. 40px row gap between rows. 4. Tile caption: Inter 12px #858585, centered, 8px below the tile card. 5. Project grid: 5 equal columns, 16px column gap, each tile showing an image that fills its slot. No borders, no shadows between tiles.
Similar brands
Cargo Collective portfolios
Same monochrome grid-of-tiles approach with generous whitespace and minimal chrome — content is the design.
Readymag project pages
Editorial-grade minimal layouts where typography does all the work and the system disappears behind showcased work.
Tobias van Schneider portfolio
Single-weight type, achromatic palette, and large project tiles arranged in a quiet grid — restraint as a visual language.
Linear app marketing pages
Crisp type, flat surfaces, no decorative gradients, and a strong reliance on whitespace and thin borders to organize content.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
