Bone Canvas
#f4f3f1Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Brisbane Web Developer
carlbeaverson.comWebsite preview
The design language
Carl Beaverson's portfolio operates on radical restraint: a warm off-white canvas, exclusively neutral tones, and a single accent typeface (Suisse Works) reserved for the smallest typographic moments. The entire system is achromatic — no brand color, no chromatic accent, no semantic hues. Hierarchy is built through scale jumps, tracking, and generous negative space rather than color or weight. Components float on warm-tinted brown shadows that subtly warm an otherwise cold minimalist grid. The reading order is content-first: three-up project tiles, tiny attribution text, and large section gutters that let each piece breathe independently.
Color palette
neutral
Ink
#333333Primary headings, button text, input text, high-contrast labels
Graphite
#4d4d4dBody text, paragraph copy, longer-form descriptions
Slate
#666666Muted secondary text, tertiary metadata
Ash
#aaaaaaSubtle borders, dividers, light secondary text, project attribution labels
Mist
#ddddddCard surface lift from canvas, subtle background variation
Typography
Type scale
Minor Second (1.067) · 16px basesubheading
20px · 400 · 1.2The quick brown fox jumps
body
15px · 400 · 1.4The quick brown fox jumps
text-14
14px · 400 · 1.2The quick brown fox jumps
caption
13px · 400 · 1.5 · -0.49px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
system-ui, -apple-system, sans-serif
- Weights
- 400
- Sizes
- 14px, 15px, 20px
- Line height
- 1.2–1.5
- Fallback
- Inter, Helvetica Neue, Arial
Body copy, navigation, buttons, inputs, hero description, project labels — the workhorse face. 14px for inline meta, 15px for inputs/buttons, 20px for hero paragraph and project titles.
Additional typeface
Suisse Works Trial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.5
- Letter spacing
- -0.038em
- Fallback
- GT Sectra, Tiempos Text, Source Serif Pro
Reserved exclusively for the '60 Selected Projects' section label. A serif display face set at 13px with tightened tracking — an anti-type-scale choice that makes a heading read as an editorial caption. This font carries the only typographic personality in the system.
Spacing & shape
Spacing
- Density
- spacious
- Section gap
- 122px
- Card padding
- 0px
- Element gap
- 20px
Border radius
cards
5pxtiles
5pxinputs
5pxbuttons
5pxSpacing scale
10px15px20px30px38px40px55px65px80px98px122px127px136px141px161px163px164px172px190px191pxGuidelines
Do
- Use #f4f3f1 as the only background color for page, cards, and inputs — never introduce a pure white or pure gray
- Use 5px border-radius uniformly for buttons, inputs, cards, and tiles — do not mix in larger radii
- Use the warm brown shadow stack (rgba(90,50,40,0.15) + rgba(80,40,30,0.1)) only beneath artwork and imagery — never on text blocks or nav
- Use 20px for element gaps and 122px for section gaps to maintain the spacious gallery rhythm
- Use Suisse Works (or a serif substitute) at 13px with -0.038em tracking for editorial section labels — never larger than 13px
- Use #aaaaaa for all borders, dividers, and attribution text — let hierarchy come from spacing, not weight
- Keep the palette to the six neutral tokens — no brand color, no semantic hue, no accent
Don’t
- Do not introduce any chromatic color — no blues, greens, reds, or purples anywhere in the system
- Do not use cool gray shadows — the shadow tone must stay warm (brown undertone) or be omitted entirely
- Do not set Suisse Works above 13px — it is a caption face, not a heading face
- Do not use card padding around project artwork — the image must fill the tile to the edges
- Do not use borders to separate cards from the canvas — rely on shadow and the #f4f3f1 surface tone instead
- Do not use bold weights — the system is 400 across the board, hierarchy comes from size and color only
- Do not use uppercase, letter-spacing on body text, or decorative type treatments — restraint is the identity
Components
Project Tile Card
Primary content unit — displays one portfolio projectContainer with no visible border, 5px radius. Background matches canvas. Contains centered project artwork (no padding around image — image fills tile). Warm brown shadow stack below artwork. Project title in 14px system sans, #333333, left-aligned below tile. 'Design by [studio]' in 14px system sans, #aaaaaa, right-aligned on same line.
Project Grid
Three-column responsive grid of project tiles3 columns, 20px row gap, ~65px column gap. Tiles are roughly equal width. Grid breathes with 122px top margin from the section header.
Section Header Label
Editorial section marker13px Suisse Works Trial, #aaaaaa, letter-spacing -0.038em. Left-aligned. Acts as a typographic signature moment — the only place the serif face appears.
Hero Description Block
Centered introductory paragraph at top of page20px system sans, #4d4d4d, centered, max-width constrained to roughly 600px. Line-height 1.2. No eyebrow, no headline — the paragraph is the hero.
Minimal Top Navigation
Persistent headerLogo (circular 'C' monogram) left, nav links right. No background fill — sits directly on canvas. Links in 14px system sans, #aaaaaa, normal tracking.
Nav Link
Text-only navigation item14px system sans, #aaaaaa. No underline, no hover background. No visible active state — presence is implied by position.
Ghost Button
Inline action trigger (implied by button color evidence)5px radius, #f4f3f1 background or transparent, 1px border in #333333 or #4d4d4d. 14–15px system sans text in #333333. No fill, no shadow — pure outline.
Image Container
Artwork presentation within a project tileNo padding, image fills the tile edge-to-edge. The warm brown shadow lifts it off the canvas. 5px radius corners on the tile and on the image.
Surfaces & elevation
Level 0
Canvas
#f4f3f1Base page background — warm bone-white
Level 1
Card Surface
#ddddddSlightly lifted surface for project tile containers
Level 2
Elevated Tile
#f4f3f1Project artwork sits on canvas-tinted surface, separated by warm brown shadow
Shadows are warm — built from brown (rgba 90,50,40) rather than cool gray. This is the one place the design system allows color to creep in: a subtle amber undertone that makes the off-white canvas feel lived-in rather than clinical. Elevation is used sparingly and only beneath artwork tiles; the rest of the interface stays flat and borderless.
Project tile artwork
0 5px 15px rgba(90, 50, 40, 0.15), 0 4px 8px rgba(80, 40, 30, 0.1)
Layout & imagery
Layout
Full-bleed layout with no max-width container — content stretches to viewport edges. Top bar is minimal: circular monogram left, two text links right. Hero is a centered single-paragraph block, vertically positioned in the upper third. Below the hero is a large section gap (122px), then a tiny section label left-aligned, followed by a 3-column project grid with 20px row gap and ~65px column gap. Project tiles are roughly 33% viewport width each, with artwork filling the tile and metadata in a single line below (title left, designer credit right). The grid is the dominant page pattern — repetitive, rhythmic, gallery-like. Navigation does not persist as a heavy bar; it sits featherlight at the top with no background fill.
Imagery
Photography and product screenshots are the visual content. Project tiles display high-quality web/photography artwork (sunsets, editorial portraits, aerial drone shots, brand identity spreads) presented as flat rectangular images with 5px corners. No illustrations, no abstract graphics, no icons in the UI. The logo monogram is the only graphic mark. Artwork is presented as-is — no duotones, no overlays, no color grading treatment. Images occupy roughly 40% of total visual space, balanced by generous negative space and large gutters.
Design notes
Agent Guide
QUICK COLOR REFERENCE - text: #333333 (primary), #4d4d4d (body), #aaaaaa (muted/borders) - background: #f4f3f1 (canvas), #dddddd (card lift) - border: #aaaaaa - shadow: rgba(90, 50, 40, 0.15) + rgba(80, 40, 30, 0.1) — warm brown only - primary action: no distinct CTA color EXAMPLE COMPONENT PROMPTS 1. Project Tile: full-bleed image, 5px radius corners, warm brown shadow stack (0 5px 15px rgba(90,50,40,0.15), 0 4px 8px rgba(80,40,30,0.1)). Below image: 14px system sans, project title left in #333333, 'Design by [name]' right in #aaaaaa, on one line. 20px gap to next row. 2. Section Header: 13px Suisse Works Trial (or Source Serif Pro substitute), #aaaaaa, letter-spacing -0.038em, left-aligned. Sits 122px above its content block. 3. Hero Description: 20px system sans, #4d4d4d, centered, line-height 1.2, max-width ~600px. No headline above, no button below — just the paragraph. 4. Ghost Button: 5px radius, 1px border #333333, transparent fill, 14px system sans text #333333, 10px vertical / 15px horizontal padding. No shadow, no fill state. 5. Minimal Nav Bar: logo monogram (16px circle outline) left, two 14px system sans text links right in #aaaaaa. No background, no border, no shadow. Sits on #f4f3f1 canvas.
Achromatic Discipline
This system deliberately excludes all chromatic color. The 0% colorfulness is not a limitation — it is the identity. Every interface decision is resolved through neutrals, spacing, and one serif accent. Any addition of brand color, accent hue, or semantic color (green for success, red for error) would break the system's coherence. The warm brown shadow is the only place the palette permits chromatic warmth, and even that is sub-15% opacity, readable as warmth rather than color.
Similar brands
Studio Snny
Same achromatic-only portfolio approach with large white space, tiny gray labels, and project grid as the primary layout
Rauno Freiberg
Extreme minimal monochrome portfolio on warm off-white canvas with hairline navigation and generous gutters
Tobias van Schneider
Austere light-mode personal site with bone-white background, no brand color, and grid-based project presentation
Manual Studio
Editorial agency portfolio using generous spacing, tiny serif labels, and project tiles with subtle warm shadows
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
