Stamp Blue
#0000ffDT logo badge fill and link/nav border — a pure, unmoderated blue that acts as the only brand mark, used sparingly as a square stamp in the header
destroytoday.com
destroytoday.comWebsite preview
The design language
A designer's personal monograph rendered as a quiet, text-first portfolio on white paper. The visual language is almost typographic: a single dark gray on warm white, a tiny blue square logo stamp, underlined links in muted indigo, and paper-warm dividers — like reading someone's printed case studies. Color only enters as illustration accent: a Stripe section with flowing yellow and orange arrows weaving through cobalt gradient blocks, a Casper product photo on bare white, a Dropbox phone mockup with carousel UI. The system deliberately refuses visual noise — no shadows, no gradients on UI, no decorative borders. What breaks the monochrome is meaningful: project imagery and the signature blue stamp that anchors identity.
Color palette
brand
Indigo Link
#555abfUnderlined link text and link borders throughout body copy and project entries — the workhorse interactive color
accent
Navy Deep
#000080Drop shadow tone beneath illustration blocks — the darkest blue in the gradient stack
Cobalt Mid
#276baaMid-tone blue in the Stripe illustration gradient stack
Sky Bright
#2181c2Brighter blue in the Stripe illustration gradient, adjacent to the mid-tone
Amber Flow
#fcd669Yellow stroke for the flowing curved arrows in the Stripe illustration
Tangerine Arc
#f79a59Orange stroke for the secondary flowing arrows in the Stripe illustration
Ember Link
#eb5e28Rare warm-orange link variant for cross-section references
neutral
Ink Black
#222222Primary text, nav text, body copy, image borders, dominant foreground on white canvas
Paper White
#ffffffPage background, image backgrounds, the base surface every section sits on
Stone Border
#d8d4cfWarm hairline dividers, image borders, subtle structural lines — the only neutral that carries a paper-warm tint
Pure Black
#000000Icon fills, absolute contrast moments in illustration shadows
Typography
Type scale
heading-lg
48px · 1.2The quick brown fox jumps
heading
40px · 1.2The quick brown fox jumps
subheading
24px · 400 · 1.4The quick brown fox jumps
body
18px · 1.5The quick brown fox jumps
body-sm
16px · 400 · 1.5The quick brown fox jumps
caption
14px · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
-apple-system
- Weights
- 400, 600, 700
- Sizes
- 14px, 16px, 18px, 24px, 40px, 48px
- Line height
- 1.20, 1.40, 1.50
- Fallback
- system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Entire site — system stack used unapologetically as the brand voice. Body text at 400, section headings at 700 large, inline emphasis at 600. The refusal to load a webfont is the signature: the portfolio reads like a native document, not a designed artifact.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 16px
- Element gap
- 16px
Border radius
logo
0pxcards
0pximages
0pxbuttons
0pxSpacing scale
8px16px32px50px64px135px225px297pxGuidelines
Do
- Use the system font stack (-apple-system, system-ui, etc.) for all text — never load a webfont; the native reading experience is the brand.
- Set backgrounds to #ffffff and body text to #222222 for every content surface.
- Use #0000ff only as a fill for the small square DT logo badge — treat it as a stamp, not a wash.
- Underline all links with #555abf text color; never remove the underline, it signals the document-like reading mode.
- Separate sections with 64–135px vertical padding and let project images break out of the text column to full width.
- Reserve chromatic color (cobalt gradients, amber arcs) exclusively for the Stripe-style illustration moments — never bleed illustration palette into UI controls or text.
- Keep the content column at roughly 480–560px wide for body text; this narrow measure is what makes the portfolio read like a printed page.
Don’t
- Do not apply border-radius to any element — cards, buttons, images, and the logo are all sharp-cornered.
- Do not use box-shadows on UI components; if a layer needs separation, use a 1px #d8d4cf border instead.
- Do not fill buttons or tags with chromatic color — this system has no filled action buttons, only underlined links and the logo stamp.
- Do not add gradients to backgrounds, cards, or text; gradients are reserved for the illustration blocks and never for chrome.
- Do not introduce accent borders, colored dividers, or decorative rules between sections — rely on whitespace alone.
- Do not use vibrant color for hover states on links; stay within the indigo-to-stamp-blue family (#555abf → #0000ff).
- Do not center body paragraphs or section headings — everything reads left-aligned within its column.
Components
DT Stamp Logo
Brand mark in headerSmall square (#0000ff) approximately 32×32px, white 'DT' initials centered inside, no border-radius. Functions as the only brand graphic on the entire site — positioned left of nav links in the header. Pairs with the text nav as a compact identity block.
Header Navigation Bar
Top-level site navigationLogo stamp on the left, horizontal link list (Blog, RSS, LinkedIn, Email) on the right. No background, no border, sits on white. Links use 16px system font at weight 400 in #0000ff with underline. Centered within page max-width with 8px horizontal padding around links.
Body Link (Underlined)
Inline reference within paragraphsText color #555abf, underlined, no background, no border. On hover would shift to #0000ff or brighten. Appears inline within project descriptions and the 'read about' references.
Section Heading
Project or topic title40–48px, weight 700, color #222222, left-aligned within the content column. Examples: 'stripe', 'Casper'. No decorative underline or accent — the size and weight alone carry the hierarchy. Tight line-height (1.2) for visual density.
Body Paragraph
Descriptive prose for project entries18px system font at weight 400, color #222222, line-height 1.5. Constrained to roughly half the page width (reading column). Multiple short paragraphs separated by 16px gaps, not block-level headers between them.
Project Entry Block
Self-contained case study sectionVertical stack: section heading → 1–3 body paragraphs with inline links → optional project image. Sections separated by 64–135px vertical padding. Content left-aligned within a column roughly 480–560px wide. Images break the column width and extend further right or center below the text.
Project Image Container
Visual evidence within a project entryFull-bleed or near-full-bleed images, no border-radius, thin #d8d4cf border (1px) or no border at all. The Casper bedding photo and Dropbox phone mockup both sit on bare white — the product or illustration IS the content, no card chrome frames it.
Stripe Illustration Block
Signature decorative elementAbstract composition of stacked blue gradient rectangles (cobalt-to-navy, using #276baa, #2181c2, #000080) with two flowing curved arrows in #fcd669 and #f79a59. Arrows have visible stroke caps and no fill, tracing diagonal paths through the block stack. Functions as the visual punctuation between text sections — the one moment the system permits color abundance.
Phone Mockup Frame
Product screenshot presentationRealistic iPhone render showing app UI (Dropbox carousel), centered on white. Sits beside or below related text. No decorative frame, no shadow — the device photo's own edge defines the boundary.
Date Stamp
Metadata for writing entries14px, weight 400, color #222222, appears directly below a post title. Format: 'Dec 16th, 2025'. No label prefix, no tag styling — the date reads as plain text.
Intro Paragraph
Opening bio block at top of page18px body text, weight 400, slightly larger or same size as body paragraphs, 2 sentences max. No heading above it — the first text on the page is the bio itself, sitting right of the header alignment zone. Functions as the portfolio's thesis statement.
Surfaces & elevation
Level 0
Paper White
#ffffffPage canvas — the single base surface every section shares
The design deliberately avoids shadows. Layer separation is achieved through whitespace, 1px #d8d4cf hairline borders, and the natural boundary of product imagery — not through elevation. The one shadow present is a #000080 drop shadow inside the Stripe illustration, which is content, not UI chrome.
Layout & imagery
Imagery
Imagery is sparse and project-specific: one product photograph (Casper bedding on white, shot from a slight angle), one realistic device render (iPhone with Dropbox app), and one abstract signature illustration (stacked blue gradient blocks with amber and tangerine curved arrows). All imagery sits on bare white with no frames, masks, or decorative treatment. The visual ratio is overwhelmingly text-to-image — the portfolio is ~85% typography, with images functioning as evidence or punctuation rather than atmosphere. No photography of people, no lifestyle imagery, no icons beyond the system default set.
Design notes
Agent Guide
Quick Color Reference: - background: #ffffff - text: #222222 - border/dividers: #d8d4cf - link: #555abf - logo stamp: #0000ff - primary action: #0000ff (outlined action border) 3-5 Example Component Prompts: 1. Header bar: #ffffff background, no border. Left: 32×32 #0000ff square with white 'DT' text centered inside, 0px radius. Right: horizontal list of nav links (Blog, RSS, LinkedIn, Email) in 16px system font weight 400, #0000ff color, underlined, with 8px horizontal padding between each. 2. Project section heading: 'stripe' rendered at 40px, system font weight 700, #222222, line-height 1.2, left-aligned, no margin-top, 16px margin-bottom before the paragraph. 3. Body paragraph: 18px system font weight 400, #222222, line-height 1.5, constrained to 520px max-width. Inline links switch to #555abf with underline; the underline is always visible, not hover-only. 4. Signature illustration block: stack of four blue gradient rectangles arranged diagonally, using #276baa, #2181c2, #000080 from top to bottom. Two curved arrows in 2px stroke — one in #fcd669, one in #f79a59 — sweep from lower-left to upper-right with arrowhead tips. 0px radius, no shadow on the container itself. 5. Project entry layout: section heading (40px bold #222222) → 2 short paragraphs (18px, 520px column) → product image (Casper-style bedding photo) at full content width, no border, no border-radius, sitting on #ffffff.
Section Rhythm
Sections are separated by generous vertical breathing room (64–135px) rather than dividers. The portfolio reads as a continuous scroll of text interrupted by full-bleed image moments. There are no alternating light/dark bands, no colored section backgrounds, and no visual rules between projects — the document flows like a printed monograph.
Similar brands
Frank Chimero
Same personal-portfolio-as-printed-document aesthetic: narrow text column, system or near-system typeface, generous whitespace, and illustrations that arrive as full-color moments between paragraphs of plain prose.
Robin Rendle
Text-first portfolio on white with a single small color mark for identity, underlined body links in a muted blue/violet, and project entries where the writing carries the page and images serve as evidence.
Tobias van Schneider
Minimal personal site with large bold section headings, left-aligned body text on white, and a tiny logo mark anchoring the header — the same refusal to decorate the chrome.
Marc Hoberman
Quiet designer portfolio with paragraphs of body text, underlined links in a single accent color, and project sections separated by whitespace alone — no cards, no shadows, no borders.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
