Magenta Bloom
#8a0467Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Creative Giants
creativegiants.artWebsite preview
The design language
Creative Giants reads like an oversized art-book spread rendered in code: a warm off-white canvas, hairline margins, and display type so large it functions as a poster rather than a heading. The whole system runs on negative space and one weight of light (300) — headlines whisper at 64–84px instead of bolding into shouting, and letter-spacing tightens aggressively (-0.04em) as type grows so the words feel chiseled, not spaced. Chromatic color is rationed into small, saturated hits: vivid magenta, deep teal, powder blue, hot pink, mint, and navy appear as card surfaces or accents, never as background floods. Interactive elements are black-on-cream pills with fully rounded (1440px) radii, and the chrome is almost invisible — a single circular logo mark and a 'Menu' button floating in white space. The visual identity is a production studio's contact sheet: one enormous headline, one full-bleed photograph, one quiet line of meta text. Every other page should follow the same economy.
Color palette
brand
Forest Teal
#03624cSaturated brand accent for card frames and decorative strokes; pairs with Magenta Bloom for duotone treatments
accent
Powder Blue
#a5c8ebSoft chromatic accent — card backgrounds, wash backgrounds, muted illustration fill; cools the warm canvas without competing
Candy Pink
#ffaceaPastel card surface — high-key, used as one-of-many tints in news/article cards; a softer sibling of Magenta Bloom
Mint Wash
#a5ebd6Pastel card surface — replaces the structural canvas on selected cards; reads as calm, cool, breathable
Navy Ink
#101731Deep accent card surface and inverted text ground; the only dark field the system uses, applied sparingly as a featured block
Signal Yellow
#ffd001Sporadic high-chroma highlight (badges, tag pills, hover state on cards) — used in trace amounts, never as a primary fill
neutral
Bone White
#fffef7Page canvas, card surfaces, text on dark accents — a warm off-white that replaces pure #ffffff and gives the whole system a paper-like, printed feel
Ink Black
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Graphite
#666666Secondary body text, captions, metadata, helper copy — recedes so display type can dominate
Ash
#aaaaaaInput borders, inactive link color, tertiary dividers — soft structural gray that disappears when not needed
Charcoal Scale
#4d4c4aMid-neutral for list borders, subtle elevation on the dark gradient track — warm gray, not blue-gray
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
84px · 300 · 1 · -0.04px trackingThe quick brown fox jumps
text-64
64px · 300 · 1The quick brown fox jumps
heading
54px · 300 · 1 · -0.023px trackingThe quick brown fox jumps
heading-sm
34px · 300 · 1.25 · -0.02px trackingThe quick brown fox jumps
subheading
20px · 300 · 1.4 · -0.018px trackingThe quick brown fox jumps
text-18
18px · 300 · 1.4The quick brown fox jumps
body
16px · 300 · 1.4 · -0.018px trackingThe quick brown fox jumps
body-sm
14px · 300 · 1.43 · -0.018px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Switzer
- Weights
- 300, 400
- Sizes
- 12, 14, 16, 18, 20, 34, 54, 64, 84
- Line height
- 1.00–1.43
- Letter spacing
- -0.04em at 84px, -0.027em at 64px, -0.023em at 54px, -0.02em at 34px, -0.018em at 20px and below
- Fallback
- Inter (300, 400), Söhne (300, 400), or any geometric humanist sans with a true 300 weight
Single-family system: weight 300 for all display and headline work (12–84px), weight 400 for body, metadata, and UI controls. The signature choice is using weight 300 at 64–84px — most systems would bold to 700–800 here; Switzer at light preserves the hairline strokes, making the type feel airbrushed onto the cream canvas. Tighter letter-spacing as size grows (-0.04em at 84px, -0.018em at 14px) keeps the counters open without looking spaced-out.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 8px
Border radius
tags
1440pxcards
0pxpills
1440pximages
0pxbuttons
1440pxSpacing scale
1px2px6px8px10px12px14px16px20px24px32px48px64px80px112px133px215pxGuidelines
Do
- Set headlines at weight 300 — never bold a Switzer heading, no matter the size.
- Use Bone White (#fffef7) as the only page background. Pure #ffffff breaks the warm paper language.
- Apply the 1440px pill radius to every button, tag, and Menu element — sharp corners are reserved for cards and images only.
- Push display headlines to 64–84px with -0.04em letter-spacing; the negative tracking is what makes the type feel carved, not printed.
- Let full-bleed photographs carry the visual weight. UI chrome should recede — the Menu button and logo are the only non-image elements above the fold.
- Use chromatic accents (#8a0467, #03624c, #a5c8eb) as borders, small fills, and single-card highlights — never flood a section with color.
- Keep section gaps at 48–64px. The cream canvas is the layout's primary structural tool; rules and dividers are secondary.
Don’t
- Don't bold headlines. The 300 weight is the brand — weight 500+ destroys the airbrushed feel.
- Don't use pure #ffffff anywhere. The warm off-white is a signature, not a fallback.
- Don't add shadows. The system's 0px box-shadow signature means elevation comes from color and scale, not depth.
- Don't round card or image corners. 1440px belongs only to interactive elements; editorial surfaces stay sharp.
- Don't fill a CTA with a chromatic color. No action background evidence supports a colored button — all interactive surfaces are black or transparent.
- Don't exceed two lines on a display headline. The 84px treatment is for poster statements, not paragraphs.
- Don't use #0000ee or default link blue. Inherit Ink Black for all text links; never let browser defaults leak in.
Components
Pill Menu Button
Primary navigation trigger in the headerBlack (#000000) fill, Bone White (#fffef7) text at 16px weight 400, fully rounded at 1440px radius, padding 12px 24px, no border. Sits in the top-right corner with generous whitespace around it — its darkness is the only heavy element on the cream canvas.
Header Lockup
Persistent top chromeTwo-line eyebrow text (12px, weight 400, all caps, Ink Black) reading 'UNIQUE PUBLIC INTERVENTIONS // IMMERSIVE ACTIVATIONS' to the left of a 32px circular logo mark, Menu button floated right. Zero background — the cream page is the header background. ~16px vertical padding, full-bleed.
Display Poster Headline
Hero / section title84px Switzer weight 300, letter-spacing -0.04em, line-height 1.0, color Ink Black. Occupies the full viewport width minus the page margin. Optionally rendered with a vertical Charcoal-to-Black gradient on warm-cream lettering for a sculptural poster effect. Never wraps above 2 lines.
Hero Image Band
Full-bleed editorial photographyFull-viewport-width image, no border-radius, no shadow. Meta text (location: 12px all-caps) and headline (34px weight 300) sit bottom-left with 32px left padding. Imagery is the hero; UI chrome yields entirely to the photograph.
Section Title Block
In-page section openersAll-caps eyebrow label (12px, weight 400, Graphite) on a single line, followed by a 34–54px weight 300 statement headline. No background, no rules, no decorations — separation is by whitespace alone (48–64px below the eyebrow, 32px below the headline).
Project / News Card
Card grid items for articles and case studies3-column grid, no card border, no shadow, no radius. Image sits top of card (square or 4:3, sharp corners). Title 18–20px weight 300 in Ink Black sits 16px below the image. Body copy 14px weight 400 in Graphite, 3-line clamp. Optional 1px chromatic accent border (#8a0467 or #03624c) on the image edge for editorial tagging.
Chromatic Accent Card
Variant card surface using the brand accent paletteUses one of the pastel or saturated tints (#ffacea, #a5ebd6, #a5c8eb, or #101731) as the card surface. Text inverts: Bone White on Navy Ink, Ink Black on pastels. 0px radius, 24–32px padding. Used as the occasional pop in a card grid; never more than one in a row.
Carousel Arrow Control
Next/prev navigation for card carousels32px circular outline button, 1px Ash (#aaaaaa) border, transparent fill, 16px Ink Black chevron icon centered. No background change on hover — only the border darkens to Ink Black. Floats above the card row at the right edge of the section title.
Meta Eyebrow
Context labels above headlines12px Switzer weight 400, all caps, letter-spacing 0 (default), color Graphite (#666666). Single line. Used for location, section names, project categories.
Full-Bleed Footer
Page footerNo background fill — same Bone White canvas. Top edge defined by a 1px hairline divider. Multi-column link lists with 14px weight 400 Ink Black text, 8px row-gap. The extreme Charcoal-to-Black linear gradient (rgb(77,76,74) → rgb(0,0,0)) is reserved for any dark footer band variant; never used elsewhere.
Tag / Category Pill
Small editorial labels and filters8px vertical, 12px horizontal padding, 1440px radius, 12px weight 400 all-caps. Default: Ink Black text, transparent fill, 1px Ash border. Accent variant: Signal Yellow (#ffd001) fill, Ink Black text, no border.
Surfaces & elevation
Level 0
Canvas
#fffef7Page background — warm off-white paper tone
Level 1
Card Tint
#a5ebd6Pastel card variant — replaces canvas on accent cards
Level 1
Card Tint Pink
#ffaceaPastel card variant — high-key highlight
Level 1
Card Tint Blue
#a5c8ebPastel card variant — cool wash
Level 2
Signal Pop
#ffd001Sporadic yellow accent — badges, hover, single-card highlight
Level 3
Inverted Field
#101731Dark accent surface for featured blocks; text inverts to Bone White
The system has no meaningful elevation. The single detected shadow (rgba(255,255,255,0.2) 0px 0px 0px 1px) is a white 1px inner ring, not a drop shadow — it functions as a hairline highlight on dark elements, not as depth. Separation is built entirely from the warm canvas, whitespace, and the rare dark inverted field. Do not add box-shadows to cards, buttons, or modals.
Layout & imagery
Layout
Full-bleed page model: no max-width container, content runs edge-to-edge with consistent left/right padding (16–32px on mobile, 32px+ on desktop). The hero is a single oversized display headline ('CREATIVE GIANTS' at 84px) taking roughly 40% of the viewport, immediately followed by a full-bleed photograph with bottom-left meta + headline overlay. Section rhythm is monolithic: each new section is introduced by a small all-caps eyebrow + 34–54px weight 300 statement, separated by 48–64px of negative space — no alternating dark/light bands except the single inverted Navy Ink accent card. Content is consistently left-aligned; no centered stacks except the hero display headline. The news/case-study area uses a 3-column card grid with a right-floated arrow control cluster. Navigation is a single top header — no sidebar, no sticky elements beyond the header itself. Overall density is spacious and editorial: every section breathes, and whitespace is the primary structural tool.
Imagery
Editorial photography dominates: full-bleed, sharp-cornered, no overlays or rounded masks. Treatment leans toward documentary and atmospheric — wrinkled hands, public installations, candid human subjects — never staged product shots. Imagery is always presented at large scale (full viewport width or card-filling) so the photograph, not the UI, is the design unit. No illustration, no 3D, no product mockups. Iconography is minimal: a single small circular logo mark, outline-only chevrons on carousel controls, and featherweight 1px-stroke UI icons. Density is image-led, with text serving as a quiet annotation layer below or over the photograph.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #fffef7 - border / divider: #aaaaaa - secondary text: #666666 - accent: #8a0467 (magenta) and #03624c (teal) — borders and small hits only - pastel card surface: #a5ebd6, #ffacea, or #a5c8eb - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. *Hero display headline*: Full-bleed cream (#fffef7) canvas. 'CREATIVE GIANTS' at 84px Switzer weight 300, color #000000, letter-spacing -0.04em, line-height 1.0, left-aligned with 32px left padding. No background, no border. The headline should occupy ~40% of the viewport height. 2. *Pill Menu button*: 16px Switzer weight 400, color #fffef7 on #000000 fill, 1440px border-radius, padding 12px 24px, no border. Float top-right with 32px margin from edges. Sits alone in the header — no other UI chrome competes. 3. *Full-bleed image band with overlay*: Edge-to-edge photograph (no border-radius). Bottom-left overlay: 12px Switzer weight 400 all-caps meta in #fffef7 ('BRIGHTON, UNITED KINGDOM'), 32px below it a 34px weight 300 statement headline in #fffef7. 32px padding from the left and bottom edges. 4. *News / project card*: 3-column grid, no card border, 0px radius. Square image (no radius) sits at top. 16px below: 20px Switzer weight 300 title in #000000. 8px below: 14px weight 400 description in #666666, 3-line clamp. 48px column gap, no row gap (single row). 5. *Pastel accent card*: One card in the grid swaps to surface #a5ebd6 with 24px padding around its content, text in #000000 at 20px weight 300. The remaining two cards stay on the cream canvas. This is the system's only color-rupture moment.
Similar brands
Pentagram
Same oversized editorial display headlines, weight-light typography, full-bleed project photography, and minimal navigation chrome on a neutral canvas.
Locomotive (locomotive.ca)
Same 'studio portfolio as art book' treatment — cream canvas, large weight-300 sans-serif statements, sharp-cornered full-bleed imagery, and pill-shaped controls.
Resn
Same full-bleed experimental photography and whisper-weight display type; both agencies treat the homepage as a single oversized canvas rather than a dashboard.
B-Reel
Same single-line display headline, edge-to-edge video/photo hero, and a cream/near-white canvas with rationed chromatic accents.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
