Ink Green
#306f09Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Mother Design
motherdesign.comWebsite preview
The design language
Mother Design treats the browser as an editorial broadsheet: near-total monochrome, type doing all the expressive work, structure drawn in 1px ink rules rather than shadows or panels. The single chromatic note — a deep forest green at #306f09 — is so restrained it almost disappears, surfacing only as a near-invisible code-level accent. Display sizes push to 226px, making typography the hero of every screen; supporting text is set in a tight, slightly negative-tracked grotesque that reads as confident, not loud. Components are raw: bordered tabs, unframed thumbnails, vertical hairlines dividing the grid. The Times serif appears as a quiet editorial counterpoint, never as decoration. The result feels like a printed manifesto given a fixed URL — grids of ink on warm gray paper, where restraint IS the visual identity.
Color palette
accent
neutral
Newsprint
#f4f4f4Soft section background, alternate surface, and quiet card fill.
Bone White
#ffffffNavigation background, card surfaces, button fills, inverted text — pushes forward off the gray canvas
Press Black
#000000Neutral form states, badge text, and quiet UI feedback where color should stay understated.
Foil Gray
#808080Secondary text, subdued link borders, metadata — sits behind Press Black as quiet annotation
Typography
Type scale
Major Third (1.25) · 15px basedisplay
226px · 600 · 1 · -9.04px trackingThe quick brown fox jumps
heading-lg
110px · 400 · 1 · -4.4px trackingThe quick brown fox jumps
heading
60px · 400 · 1 · -1.2px trackingThe quick brown fox jumps
heading-sm
48px · 400 · 1.1 · -0.96px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
caption
10px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Basis
- Weights
- 400, 600
- Sizes
- 10, 14, 16, 48, 60, 110, 226
- Line height
- 1.00–1.50 (context-dependent: 1.0 for display, 1.5 for body)
- Letter spacing
- -0.04em at 226px, -0.04em at 110px, -0.02em at 60px, -0.02em at 48px, -0.01em at 16px, 0 at 14px and below
- Fallback
- Inter, Suisse Int'l, or Neue Haas Grotesk
Primary typeface across all UI. Weight 400 for body, links, and most running text; weight 600 used sparingly for the small uppercase-ish labels and the navigation tabs. The 226px size at 1.0 line-height is the signature — display type behaves like a poster headline, not a web heading. Negative tracking tightens as size grows: -0.04em at display, -0.02em at mid, -0.01em at body.
Additional typeface
Basis Mono
- Weights
- 400
- Sizes
- 14
- Line height
- 1.20
- Letter spacing
- 0.06em (8.4px at 14px)
- Fallback
- JetBrains Mono, IBM Plex Mono, or Berkeley Mono
Used for technical labels, metadata, timestamps, and small annotations. The +0.06em letter-spacing gives it the feel of a printed caption set in a typewriter face — a deliberate counterpoint to Basis's tight grotesque.
Additional typeface
Times
- Weights
- 400
- Sizes
- 14
- Line height
- 1.20
- Letter spacing
- 0.06em
- Fallback
- Times New Roman, EB Garamond, or Source Serif
System serif used as a rare editorial accent — appears in icon and small body contexts where a note of 'newspaper' or 'footnotes' is wanted. Its presence is felt more than seen; the choice signals print lineage rather than decoration.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Section gap
- 160-200px
- Card padding
- 0px
- Element gap
- 20px
Border radius
tabs
0pxcards
0pxinputs
0pxbuttons
0pxSpacing scale
1px2px3px4px8px10px12px14px16px20px24px60px64px200pxGuidelines
Do
- Set display type at 226px with -0.04em letter-spacing and line-height 1.0 — the extreme scale is the signature, not an exception.
- Use only the five colors: #f4f4f4 canvas, #ffffff surface, #000000 text and rules, #808080 secondary, #306f09 as the only chromatic note.
- Structure all layout with 1px Press Black rules — vertical, horizontal, and as borders on interactive cells. Never use shadows or fills to separate regions.
- Use Basis Mono with +0.06em tracking for metadata, labels, and the news ticker. Reserve Basis for everything else; bring in Times only for the occasional editorial annotation.
- Keep card and thumbnail padding at 0px. Let raw images sit edge-to-edge in their grid cells with no chrome, border, or radius.
- Anchor the nav with a 1px-bordered segmented control: brand mark cell + tab group on the left, theme toggle cluster on the right. Bone White fill, no radius.
- Treat whitespace as a structural element — large vertical gaps (160-200px) between the portfolio grid and the next section are part of the system, not negative space to be filled.
Don’t
- Do not introduce additional colors. Any new hue, even a desaturated one, will dilute the broadsheet identity. The green is a printer's mark, not a palette swatch.
- Do not add box-shadows, blurs, or any form of elevation. The system has no z-axis — depth is typographic.
- Do not round corners. Every border, button, and cell stays at 0px radius. Curvature would betray the printed-page metaphor.
- Do not cap display type at conventional web sizes (48-72px). The 226px / 110px scale is the point — shrinking it to 'feel more modern' removes the signature.
- Do not use weight 700 or 800. Basis 600 is the heaviest weight in the system; 400 does the work at display sizes because the size itself provides weight.
- Do not add icons inside buttons or cards. Icons live only in the theme toggle cluster and the brand mark cell.
- Do not center body copy or set paragraphs to a narrow max-width. The manifesto reads full-bleed; column width is controlled by the grid, not by a content container.
Components
Navigation Tab
Top-level page links (Work, Information, News, Contact)A Basis 14px / weight 600 / -0.01em text label inside a 1px Press Black border, Bone White fill, no radius, 16px horizontal padding, 2px vertical padding. Multiple tabs sit edge-to-edge forming a segmented control. The brand mark (heart icon) sits in its own bordered cell to the left of the tab group. Tabs are rectangular, unornamented — they read as printed tabs on a file folder.
Brand Mark Cell
Logo container at the far left of the nav rowA small square (~32px) Bone White cell with a 1px Press Black border containing a Press Black heart glyph. Mirrors the visual weight of the nav tabs and anchors the brand within the same grid as the navigation.
News Marquee Bar
Headline/news ticker running across the top rightBone White fill, 1px Press Black border, Basis Mono 14px / weight 400 / +0.06em tracking, Press Black text. Headlines sit in a horizontal row separated by thin vertical Press Black rules. Reads as a printed dateline.
Theme Toggle Cluster
Icon-only controls in the top-right cornerFour small square cells (~32px each), 1px Press Black border, Bone White fill, each containing a single Press Black icon stroke (sun, moon, gear, etc.). Tiles sit edge-to-edge with no gap, forming a second segmented control. Icons are 1.5px stroke, geometric, no fill.
Portfolio Thumbnail
Project preview tiles in the work gridRaw image tiles with zero border, zero radius, zero shadow, zero caption treatment above or below. Each tile fills its grid cell exactly; the image IS the card. Project titles and credits appear outside the grid in a small caption role. The lack of chrome lets the work — not the UI — carry attention.
Project Caption Block
Title + role text below the work gridLeft-aligned, no border. Project name in Basis 14px / weight 600, role/category text in Basis 14px / weight 400, both Press Black, line-height 1.2. Sits far below the grid with generous whitespace — the relationship is a footnote, not a label.
Manifesto Block
Large editorial paragraph introducing the studio's voiceBasis at display sizes (60–110px) / weight 400 / line-height 1.0 / letter-spacing -0.02em to -0.04em, Press Black. Flows full-width with no max-width constraint — the line length is controlled by the column count, not by a container. Inline links underlined in 1px Press Black. This is the closest the site comes to a 'hero' and it is pure type.
Section Display Header
Monumental section titles (Rigor, Rebellion, Depth, Care)Basis 226px / weight 400 / line-height 1.0 / letter-spacing -0.04em, Press Black. Center-aligned within its grid cell. The cell is defined by 1px Press Black horizontal and vertical rules that frame the entire section like a table. The text floats inside the cell with ~120px of padding on all sides — the type breathes in negative space.
Grid Section Frame
Container for 2-up section displays and contentFull-bleed, no padding, no background, no radius. Divided by a single 1px Press Black vertical rule at the column midpoint. The vertical line is the only structural element — no cards, no fills, no spacing tricks. Top and bottom 1px Press Black horizontal rules bracket the section.
Service List Item
Vertical list of capabilities (Brand Strategy, Naming, etc.)Basis 60px / weight 400 / line-height 1.0 / letter-spacing -0.02em, Press Black. Left-aligned, stacked vertically with ~8px row gap. No bullets, no borders between items — the type rhythm itself creates separation. Sits in the right column of a 2-column grid; left column contains the section display header and descriptive body copy in a small mono label role.
Inline Link
Hyperlinks within manifesto and body copyPress Black text with a 1px Press Black underline. No hover color change, no background, no arrow icon. Underline thickness matches the system's hairline border — links read as underlined copy in a print layout, not as interactive web affordances.
Section Label
Small all-caps-style label above content blocks (e.g. 'How we do it', 'What we do')Basis Mono 14px / weight 400 / +0.06em tracking, Press Black. Sits at the top-left of a content area, establishing the section's category before the display type takes over.
Surfaces & elevation
Level 0
Newsprint
#f4f4f4Page canvas — the warm gray 'paper' everything sits on
Level 1
Bone White
#ffffffNavigation bar, button surfaces, and the few elevated card containers that need to step forward from the canvas
The system rejects elevation entirely. There are no drop shadows, no surface lifts, no depth illusions. Structure is communicated through 1px Press Black rules that slice the layout into a grid, and through the tonal step from Newsprint (#f4f4f4) to Bone White (#ffffff) for the navigation bar. Depth is typographic, not architectural — the 226px display type carries the weight that shadows would in a conventional UI.
Layout & imagery
Layout
Full-bleed edge-to-edge layout with no max-width container. The page is organized as a strict grid divided by 1px Press Black rules. The top row contains the nav (left: brand mark + segmented tabs, right: news marquee + theme toggles) in a fixed-height bar. Below the nav, the work grid is a 5-column row of thumbnail tiles with zero gap between cells — images touch. A large vertical gap (160-200px) separates the grid from the manifesto section, which is a full-width block of display-size running text. The 'How we do it' and 'What we do' sections use a 2-column grid split by a 1px vertical rule at the midpoint; the left column carries a small section label and body copy, the right column carries the monumental display type (Rigor/Rebellion, Depth/Care) or a vertical service list. Each major section is bracketed by 1px horizontal Press Black rules top and bottom. The page reads top-to-bottom as a printed document: header bar, portfolio spread, manifesto column, sectioned grid pages.
Imagery
The work grid is the imagery: diverse, unframed, full-bleed thumbnails spanning product photography (soda can held against a rainbow sky), editorial poster design (Brooklyn Orioles type-heavy poster), brand identity systems (Babies type specimen), and 3D product render (Rolfr camera-can). No consistent photographic treatment — each project's thumbnail arrives raw, at full color, with no overlay, duotone, or filter. The page itself is text-dominant; imagery appears only in the portfolio grid and is treated as evidence of capability rather than atmosphere. Iconography is minimal: 1.5px stroke geometric glyphs confined to the theme toggle cluster and the heart brand mark. The visual language of the site is the visual language of a printed portfolio — let the work speak in full color against the otherwise black-on-gray page.
Design notes
Editorial System
Mother Design's UI borrows its logic from print — specifically from broadsheet newspapers and design annuals. The signature moves: display type at poster scale (226px) with aggressive negative tracking, 1px ink rules instead of cards or shadows, a single warm-gray 'newsprint' canvas, and a Times serif used as quiet editorial counterpoint to the Basis grotesque. The only color in the system is Press Black; everything else is paper. An AI building a new page should treat the layout as a typeset page, not a web app: no max-width container, no centered body text, no rounded corners, no elevation. The grid is the chrome.
Agent Guide
**Quick Color Reference** - text: #000000 - background: #f4f4f4 - surface: #ffffff - border: #000000 (1px) - secondary text: #808080 - accent: #306f09 - primary action: no distinct CTA color **Example Component Prompts** 1. *Section display header*: Render 'Rigor' at 226px Basis weight 400, color #000000, letter-spacing -0.04em, line-height 1.0, centered in a grid cell framed by 1px #000000 rules on all sides with ~120px internal padding. 2. *Navigation tab*: Basis 14px weight 600, text 'Work', color #000000, background #ffffff, 1px #000000 border, 16px horizontal padding, 2px vertical padding, 0px radius. Place in a row of similar tabs edge-to-edge. 3. *Service list item*: Basis 60px weight 400, text 'Brand Strategy', color #000000, letter-spacing -0.02em, line-height 1.0, left-aligned, stacked vertically with 8px row gap, no bullet, no border. 4. *Portfolio thumbnail*: Full-bleed image filling a 5-column grid cell, 0px border, 0px radius, 0px padding, no caption inside the cell. 5. *Section label*: Basis Mono 14px weight 400, text 'What we do', color #000000, letter-spacing 0.06em, line-height 1.2, positioned at the top-left of a content area.
Similar brands
Pentagram
Same editorial agency tradition: 1px rules structuring the page, monochromatic canvas, display type doing the work of decoration, and a portfolio grid that lets the work arrive unframed.
Bureau Borsche
Same broadsheet sensibility — massive type set tight, warm-gray backgrounds, and a refusal to round corners or add elevation. Both treat the browser as a typeset page.
Studio Dumbar
Shared commitment to restrained color (essentially monochrome with one accent), grotesque sans-serif at extreme display sizes, and structural grids drawn in hairline rules rather than built from cards.
Anagrama
Editorial agency sites that use the same playbook: canvas-light layout, oversized display headings with negative tracking, bordered segmented navigation, and a portfolio grid with no thumbnail chrome.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
