Sage
#71cc98Green action color for filled buttons, selected navigation states, and focused conversion moments
Art In DUMBO
artindumbo.comWebsite preview
The design language
Art In DUMBO reads like a broadside poster pinned to a white-cube gallery wall: one weight of Helvetica at every size, black ink on raw paper, and a single sage-green accent that punctuates action and status like a curator's sticker. The system is unapologetically editorial — full-bleed documentary photography carries the atmosphere while the type system stays calm, dense, and confident at every breakpoint. Surfaces are almost entirely white or warm off-white; structure comes from hairline black rules, never from shadows or colored panels. Components are few and stocky: pill buttons with 50px radii sit next to sharp 2px-radius inputs, creating deliberate radius contrast. Color is rationed — sage green for the only real CTA, warm orange for urgency tags, and otherwise a pure black-to-warm-gray ramp.
Color palette
brand
accent
Ember
#ff7f41Orange outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
neutral
Carbon
#000000Primary text, logo cells, hairline dividers between list rows, icon strokes — the only ink in the system
Paper
#ffffffPage canvas, card surfaces, pill-button fills, inverse text on dark cells
Plaster
#f1f2f2Input fields, secondary surfaces, subtle button hovers
Linen
#e5e3dfWarm off-white section backgrounds, large quiet surfaces that break the white without going gray
Ash
#bdbdbdMedium-contrast borders, control outlines, and structural separators
Graphite
#828282Button borders and label text for secondary controls
Smoke
#b3b3b3Shadow base tone for the single ambient drop-shadow pattern
Typography
Type scale
Minor Third (1.2) · 14px basetext-68
68px · 500 · 1The quick brown fox jumps
display
63px · 500 · 1.05The quick brown fox jumps
heading-lg
44px · 500 · 1.1The quick brown fox jumps
text-37
37px · 500 · 1.09The quick brown fox jumps
heading
34px · 500 · 1.15The quick brown fox jumps
text-30
30px · 500 · 1.1The quick brown fox jumps
text-28
28px · 500 · 1.2The quick brown fox jumps
heading-sm
27px · 500 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Helvetica Neue
- Weights
- 500
- Sizes
- 10px, 11px, 16px, 19px, 22px, 27px, 28px, 30px, 34px, 37px, 44px, 63px, 68px
- Line height
- 1.00–1.80
- Fallback
- Inter, Neue Haas Grotesk, Helvetica, Arial
Sole typeface across the entire system — display, body, nav, labels. Weight 500 is the only weight used; this medium-only commitment is the signature: not bold, not regular, never thin. Sizes run from 10px captions to 68px display with tight 1.05–1.15 line-heights at the top of the scale and 1.40–1.80 at body sizes.
Additional typeface
Roboto
- Weights
- 400, 500
- Sizes
- 10px, 11px
- Line height
- 1.20–1.40
- Fallback
- Roboto, system-ui
Secondary system fallback for micro-labels and small UI chrome where a different metric helps
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 16-24px
- Element gap
- 12-20px
Border radius
cards
0-4pxinputs
2pxlogo-cells
0pxbuttons-pill
50pxbuttons-secondary
2pxSpacing scale
1px2px5px6px7px9px10px12px13px14px16px17px19px20px22px24px26px27px29px30px44px46px47px49px122px144pxGuidelines
Do
- Use #000000 for all structural lines, icons, and primary text — it is the only ink the system has
- Reserve #71cc98 Sage exclusively for the Map & Directory pill, heading underline marks, and accent dots
- Set border-radius to 50px on pill buttons and 2px on inputs — never blur the two
- Set type to Helvetica Neue 500 at the scale sizes; do not introduce additional weights
- Separate exhibition list rows with 1px solid #000000 hairlines, never with card backgrounds or zebra striping
- Let hero photography run full-bleed with no overlay text other than the wordmark
- Use #ff7f41 Ember only for urgency status text such as 'Closing Soon' — never as a fill
Don’t
- Do not add colored panels, gradient fills, or decorative cards behind text
- Do not introduce new typefaces or weight values beyond Helvetica 500 and the Roboto micro-label fallback
- Do not use shadows to separate sections — use 1px black hairlines or a shift to #e5e3df Linen
- Do not round the hero photograph or exhibition thumbnails beyond 4px
- Do not stack more than two type sizes in a single row of the exhibitions list
- Do not place sage green text on the sage pill background — it must remain #000000
- Do not center body paragraphs or exhibition row content; left-align everything
Components
Logo Wordmark Block
Brand mark in the top-left of every screenStacked three-cell grid: 'ART', 'IN', 'DUMBO' on three lines. Each letter sits in its own black-bordered cell on a white ground. Borders are 1px black, no fill, no radius. Cells are flush — no gap between them — so the mark reads as a single printed stamp.
Sticky Header Bar
Persistent navigation across all pagesWhite background, no border. Left: logo wordmark. Right: three text links (Events, Exhibitions, First Thursdays) in 16–19px Helvetica 500, #000000, flush right. No icons, no background pills — nav is just type.
Full-Bleed Hero Photograph
Above-the-fold visual anchor on the landing pageDocumentary-style photograph of artists at work, edge-to-edge with no container or radius. The logo overlays top-left in a solid white-backed block. No text overlay other than the wordmark.
Display Heading
Section openers and welcome statements63–68px Helvetica 500, #000000, line-height ~1.05, tracking normal. Sentence case, no max-width clamp — runs nearly full bleed for editorial weight. Sage-green horizontal rule (3–4px) sometimes underlines the heading or its first word.
Body Paragraph
Welcome copy, event descriptions, editorial text22–27px Helvetica 500, #000000, line-height 1.20–1.27, no max-width cap. Generous, readable, never condensed.
Email Input Field
Newsletter capture on the welcome block2px border-radius, #f1f2f2 fill, no visible border. Placeholder text in 16px Helvetica 500, #000000 at ~40% opacity. Inline adjacent to a ghost Subscribe button.
Ghost Text Button (Subscribe)
Secondary action paired with form fieldsNo background, no border, no radius. Label in 16px Helvetica 500, #000000, followed by a small right-pointing arrow glyph. Sits flush right of its input.
Sage Pill Button (Map & Directory)
Primary floating CTA, sticky bottom-right50px border-radius (full pill), #71cc98 fill, #000000 text, 16–19px Helvetica 500, horizontal padding ~20px. A small filled sage dot (8px) sits inside the left padding as a status indicator. Subtle shadow: rgba(0,0,0,0.25) 0 0 10px. This is the only chromatic fill button in the system.
Exhibition List Row
Primary content unit on the Exhibitions pageHorizontal row: square thumbnail (~80px, 4px radius), then a four-column meta block (Date range / Title / Gallery name / Open hours). Rows separated by 1px solid #000000 hairlines — no zebra striping, no card backgrounds. Meta text in 16–22px Helvetica 500; gallery hours in #bdbdbd.
Urgency Tag (Closing Soon)
Status indicator for time-sensitive itemsInline text label, no background, no border. 16px Helvetica 500 in #ff7f41. Sits directly under the date range in an exhibition row.
Status Meta (Open hours)
Secondary metadata in list rows16–19px Helvetica 500, #bdbdbd. Always one line, never wrapped. Communicates operational state without competing with primary text.
Sticky Floating Action
Persistent wayfinding CTASame component language as the Sage Pill Button, but position:fixed bottom-right. Reappears on scroll with the same shadow and radius. Functions as a quiet, always-on directory shortcut.
Surfaces & elevation
Level 0
Paper
#ffffffDefault page canvas, card surfaces, header background
Level 1
Linen
#e5e3dfWarm off-white section bands that break white without going gray
Level 2
Plaster
#f1f2f2Input wells and hover surfaces for interactive elements
Elevation is rationed. The system is fundamentally flat — rows and sections separate themselves with 1px black hairlines, not shadows. Shadows appear only on interactive surfaces (buttons, floating CTAs) and are kept soft and short. The sage pill uses a wider ambient shadow to lift it from the page; everything else stays flush.
Sage Pill Button
rgba(0, 0, 0, 0.25) 0px 0px 10px 0px
Secondary buttons & small chrome
rgba(0, 0, 0, 0.3) 0px 1px 4px -1px
Layout & imagery
Layout
Editorial broadsheet rhythm. Landing page opens with a full-bleed hero photograph, then a tight vertical stack of display heading → body paragraph → email capture, all left-aligned and nearly full-width. The Exhibitions page swaps photography for a text-and-thumbnail table: each row is a four-column horizontal band separated by 1px black hairlines, reading like a printed program. No card grids, no asymmetric compositions, no overlap. Navigation is a single sticky text-only bar. The sage Map & Directory pill is the only fixed-position element, anchored bottom-right.
Imagery
Full-bleed documentary photography is the primary visual content: candid shots of artists in their studios, natural light, no lifestyle staging, no color treatment. Images run edge-to-edge with no rounded corners and no overlay text. Thumbnail crops in the exhibitions list are square, tight, and unadorned. There are no illustrations, no icons beyond a small status dot, and no 3D or abstract graphics — the photography carries all atmosphere.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background: #ffffff - surface-warm: #e5e3df - surface-input: #f1f2f2 - border: #000000 - accent: #71cc98 (Sage) - primary action: #71cc98 (filled action) 3 Example Component Prompts: 1. Sage Pill Button: 50px border-radius, #71cc98 fill, 19px Helvetica 500 #000000 label, 20px horizontal padding, 10px vertical padding, a 8px filled sage dot inside the left padding, shadow rgba(0,0,0,0.25) 0 0 10px. 2. Exhibition List Row: four columns — 80px square thumbnail (4px radius), date range in 16px Helvetica 500 #000000, title in 22px Helvetica 500 #000000, gallery name in 19px Helvetica 500 #000000 with 'Open: HH:MM–HH:MM' in 16px #bdbdbd below. Rows separated by 1px solid #000000 hairline, no row background. 3. Display Heading Block: 63px Helvetica 500 #000000, line-height 1.05, with a 3px #71cc98 horizontal rule directly under the heading spanning the full text width. Followed by a 22px Helvetica 500 #000000 body paragraph at line-height 1.27, no max-width clamp.
Radius Philosophy
The system uses only two radii and the contrast between them is intentional: 2px for inputs and inline controls (sharp, utilitarian, almost machine-stamped) and 50px for the only interactive pills (soft, inviting, thumb-shaped). Cards and list rows use 0–4px — they read as printed paper, not interface. Never blend the two radii on the same component.
Type Discipline
Weight 500 across all sizes is a brand rule, not a default. Do not introduce 400 or 700 weights — the medium-only commitment is what makes the type feel like a single tool used at different pressures. The same Helvetica 500 at 10px in a status tag and at 63px in a display heading should feel like the same voice speaking at different volumes.
Similar brands
Printed Matter
Same broadside-poster rhythm: one weight of sans-serif, full-bleed art photography, black hairline rules, and a single accent color rationed across the page
Pioneer Works
Same editorial-verticality and near-flat surface treatment, with documentary photography carrying atmosphere instead of decorative UI
Swiss Institute
Same Helvetica-medium-only type discipline, white-canvas gallery feel, and pill-shaped CTAs
White Columns
Same nearly all-achromatic palette, text-as-architecture layout, and program-list table format for exhibitions
Are.na
Same utilitarian restraint, hairline-separated content rows, and refusal to use color decoratively
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
