Deep Violet
#453b60Violet accent for outlined action borders, linked labels, and lightweight interactive emphasis.
Huddle
huddle.worksWebsite preview
The design language
Huddle uses a quiet, editorial curation language: off-white canvas, large confident headlines, and three muted pastel card colors (sage, lavender, dusty rose) that function as category tiles for project listings. The palette is intentionally desaturated — no vivid neons, no high-saturation accents — so the system reads as a considered directory rather than a marketplace. Typography is set in a single custom sans (Nng) that carries the entire information hierarchy, with all-caps micro-labels and dot-prefixed status tags adding a catalog/inventory feel. Components lean pill-shaped (100px radius on links, 1000px on primary buttons) and borders are thin 1px hairlines rather than heavy shadows, keeping the surface flat and poster-like.
Color palette
brand
Burnt Amber
#65451dWarm brown border accent on tags and badges — the signature warm neutral that anchors the cool pastels
accent
Pale Sage
#d3e5e9Hairline borders, dividers, input outlines, and card edges on light surfaces.
Lavender Mist
#bbb2ceLavender card variant — secondary project category, tag fills
Dusty Rose
#cb9da2Red state accent for badges, validation surfaces, and short status labels.
Honey Gold
#e4b976Gold accent for tag text, highlighted labels — the single warm highlight color
Blush Border
#d79caaSoft pink border accent for rose-category cards and tags
neutral
Paper White
#ffffffPage canvas, card base, text on dark cards — the dominant surface
Ink Black
#151515Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Graphite
#23241fSecondary text, subtle borders
Slate Gray
#3a4444Muted text, inactive tags, form labels
Stone Border
#333333Hairline borders, dividers, card outlines
Mist Gray
#808080Tertiary text, disabled states
Bone
#e5e6e1Soft surface tint, secondary card backgrounds
semantic
Burgundy
#5c2529Error/status red — badge backgrounds and warning borders
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
69px · 400 · 1.1 · -1.45px trackingThe quick brown fox jumps
heading-lg
44px · 400 · 1.2 · -0.92px trackingThe quick brown fox jumps
heading
40px · 400 · 1.22 · -0.48px trackingThe quick brown fox jumps
heading-sm
29px · 400 · 1.3 · -0.32px trackingThe quick brown fox jumps
subheading
22px · 400 · 1.32 · -0.22px trackingThe quick brown fox jumps
text-21
21px · 300 · 1.45The quick brown fox jumps
body
18px · 300 · 1.42 · -0.14px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.45 · -0.13px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Nng
- Weights
- 300, 400, 500, 700
- Sizes
- 12px, 13px, 14px, 15px, 16px, 18px, 21px, 22px, 29px, 40px, 44px, 69px
- Line height
- 1.10 – 1.58
- Letter spacing
- -0.021em at 69px, -0.011em at 29–40px, -0.010em at 22px, -0.008em at 16–18px
- Fallback
- Inter, Söhne, or Untitled Sans
- Features
- "ss01" on, "tnum" on
Primary typeface across all contexts: display headlines (44–69px, weight 300–400), headings (22–29px, weight 500), body (14–18px, weight 400), captions and micro-labels (12–13px, weight 500, uppercase). Custom geometric sans with tight tracking on large sizes (-0.021em at 69px) — the slight negative tracking makes the large display headlines feel dense and poster-like rather than airy.
Additional typeface
Roboto
- Weights
- 400
- Sizes
- 14px, 16px
- Line height
- 1.25, 1.43
- Letter spacing
- -0.1030em
- Fallback
- system-ui, -apple-system
Secondary system font used sparingly — likely for rendered user content (descriptions, quotes) where a neutral fallback is needed. Weight 400 only, tight tracking (-0.103em) gives it a condensed feel.
Additional typeface
Apercu pro mono
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.42
- Fallback
- JetBrains Mono, IBM Plex Mono
Monospaced accent — used for code-like or identifier text (project IDs, timestamps). Normal letter-spacing distinguishes it from the proportional Nng.
Additional typeface
Moderat
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.2, 1.5
- Letter spacing
- -0.021
Moderat — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
100pxcards
8pxpills
100pxbadges
4pxbuttons
1000pxlist-items
24pxlarge-cards
40pxSpacing scale
2px4px5px6px8px10px12px14px16px18px20px24px27px29px32px36px40px48px58px60px64px96px115px128px144px192pxGuidelines
Do
- Use the three pastel card colors (sage #d3e5e9, lavender #bbb2ce, dusty rose #cb9da2) as a fixed category system — assign one to each project status and never mix within a single card.
- Set all tag pills and secondary buttons to 100px border-radius; reserve 1000px exclusively for the primary action button to create a clear hierarchy between fully rounded and pill-rounded.
- Use Nng at weight 300–400 for display headlines (44px+); the light weight on large sizes is the signature — bold display text would break the editorial register.
- Prefix all section labels with a bullet or step number in uppercase 12px Nng ('• STEP 1: THE BRIEF'); this micro-label system is the primary wayfinding device.
- Pair burnt amber (#65451d) borders with honey gold (#e4b976) text on tags — this warm-on-warm combination is the only place gold appears, so it reads as a highlight, not decoration.
- Maintain 1px hairline borders in #333333 or #e5e6e1 on all cards; never use box-shadow for elevation — the system is intentionally flat.
- Keep the canvas at #ffffff with generous 64px section gaps; the lightness and breathing room are what make the pastel cards legible.
Don’t
- Do not use box-shadow for card elevation — the system is flat by design, relying on hairline borders and background color contrast for separation.
- Do not introduce vivid or saturated colors (no electric blue, neon green, or pure red); all accent colors are muted and desaturated by design.
- Do not set display headlines in bold (weight 600+); Nng weight 300–400 on large sizes is the editorial signature — bold headlines would look like a different product.
- Do not use the same radius for all elements; the 100px pills vs. 8px cards vs. 1000px primary button create a deliberate visual rhythm of corner treatments.
- Do not place white text on pastel card backgrounds; the card titles should always be #151515 or #453b60 (deep violet for active) for contrast and consistency.
- Do not use more than two font families in a single view; Nng carries 95% of the system, Roboto appears only in rendered user content.
- Do not center-align body text or descriptions; left-align everything below the display headline to maintain the editorial/document feel.
Components
Primary Pill Button
Main call-to-action (e.g., 'Get started')Black fill (#151515), white text, 1000px border-radius (fully rounded), padding 16px 24px, Nng at 16px weight 500. No shadow, no border. The extra-rounded shape against the muted palette gives it weight without aggression.
Ghost Text Link
Secondary action (e.g., 'Apply as a designer')No background, no border. Nng 16px weight 400, color #151515 with underline on hover. Sits beside the primary button at equal visual weight through spacing, not styling.
Outlined Action Button
Tertiary action, less emphasis than primaryTransparent background, 1px border in #151515 or accent color, 100px radius, padding 12px 20px, Nng 14px weight 500. Used for 'Get started' in secondary contexts.
Project Card — Sage Variant
Category tile for 'upcoming' or 'monitoring' projectsBackground #d3e5e9 (pale sage), 1px hairline border #333333, 8px radius, padding 24px. Status label in uppercase Nng 12px weight 500 (e.g., 'COMING MONTHLY') in #3a4444. Project title in Nng 22px weight 500, color #151515. Tag pills inline at the bottom.
Project Card — Lavender Variant
Category tile for secondary projectsBackground #bbb2ce (lavender mist), 1px hairline border #333333, 8px radius, padding 24px. Same structure as sage variant. Title in Nng 22px weight 500.
Project Card — Dusty Rose Variant
Category tile for 'shipped' or 'completed' projectsBackground #cb9da2 (dusty rose), 1px hairline border #333333, 8px radius, padding 24px. Title in Nng 22px weight 500. Slightly warmer feel than the cool sage/lavender.
Active Project Card
Currently-in-progress project, higher emphasisLavender-tinted card with deep violet text (#453b60) instead of black. Signals 'live' status. Nng 22px weight 500, 'ACTIVE' label prefix in uppercase.
Status Tag Pill
Small inline label (e.g., 'Probiotics', 'Brand Designer')100px border-radius, padding 4px 12px, Nng 13–14px weight 500, background #ffffff or light fill, 1px border in #65451d (burnt amber) or accent color. Text color matches border. The burnt-amber border is the signature warm accent that ties the tag system together.
Step Section Header
Section divider labeling process stepsAll-caps Nng 12px weight 500, color #151515, preceded by a small bullet (•) or step number. Examples: 'STEP 1: THE BRIEF', 'STEP 2: THE TEAM'. Left-aligned, tight tracking, 16px+ bottom margin.
Testimonial Card
Social proof, quote from a past clientWhite background, 1px border #e5e6e1, 8px radius, padding 16px. Quote text in Nng 16px weight 400 italic, color #3a4444. Attribution below: avatar (40px circle) + name (Nng 16px weight 500) + role (Nng 14px weight 400, #808080).
Team Forming Tag
Role label inside project cards (e.g., 'Brand Designer')Outlined pill with #453b60 (deep violet) border, 100px radius, padding 6px 12px, Nng 14px weight 500. The violet outline distinguishes 'needed roles' from 'filled roles' (which use a different fill).
Beta Banner
Top-of-page announcement stripCentered text, Nng 13px weight 500, white background, 'Private Beta' in a outlined pill (1px border #151515, 100px radius, padding 2px 8px) followed by descriptive text in #3a4444. Sits flush at the very top of the page.
Avatar Group
Visual representation of the team inline in headlinesThree overlapping circular avatars (40px each, -12px overlap), 1px white border between them. Placed inline within display text as a visual device — the faces ARE the headline punctuation.
Surfaces & elevation
Level 1
Paper White
#ffffffBase page canvas and most card surfaces
Level 2
Bone
#e5e6e1Secondary card surface, subtle background tint
Level 3
Lavender Mist
#bbb2ceLavender category card fill
Level 4
Pale Sage
#d3e5e9Sage category card fill
Level 5
Dusty Rose
#cb9da2Rose category card fill
The design system intentionally avoids box-shadows. All elevation is achieved through background color contrast and 1px hairline borders (#333333, #e5e6e1). Cards on the white canvas rely on the pastel background fill (sage, lavender, rose) to create visual separation. This flat treatment reinforces the editorial/poster aesthetic and prevents the interface from feeling like a generic SaaS dashboard.
Layout & imagery
Layout
Single-column page model with a centered max-width ~1200px container. The hero is a two-column split: left side holds the large display headline with inline avatar group and primary CTA, right side stacks 3–4 pastel project cards vertically as a live feed. Below the hero, the page flows as numbered process steps (STEP 1, STEP 2, …) in a two-column pattern: left column is instructional text with optional testimonial, right column is a feature card. Section rhythm is generous (64px gaps) with no alternating dark/light bands — everything stays on white. Navigation is a single wordmark logo (HUDDLE, all-caps, tight tracking) in the top-left, no nav links visible. The right-edge project feed persists in view as a sidebar-like element.
Imagery
Imagery is minimal and functional: circular avatar photos (40–56px, 1px white border) used inline within text and in testimonial cards. No hero photography, no product screenshots, no decorative illustration. The visual weight comes from the pastel card system itself — the cards act as the imagery, each one a colored tile showcasing a real project. Icons are absent or extremely minimal (small bullet/dot glyphs only).
Design notes
Agent Guide
Quick Color Reference: - text primary: #151515 - background: #ffffff - border: #333333 - accent (card sage): #d3e5e9 - accent (card lavender): #bbb2ce - accent (card rose): #cb9da2 - brand (active violet): #453b60 - tag border: #65451d - primary action: #65451d (filled action) 3-5 Example Component Prompts: 1. Create a Primary Action Button: #65451d background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Create a project card grid: three cards stacked vertically, each 8px radius, 24px padding, 1px border #333333. Card 1: background #d3e5e9 (sage), uppercase 12px Nng 'COMING MONTHLY' label, title 'OneMedical for psychedelic and naturopathic therapists' in Nng 22px weight 500 #151515, three tag pills at bottom (100px radius, 1px border #65451d, text #e4b976). Card 2: background #bbb2ce (lavender), same structure. Card 3: background #cb9da2 (rose), same structure with 'SHIPPED' label. 4. Create a testimonial card: white background, 1px border #e5e6e1, 8px radius, 16px padding. Quote in Nng 16px weight 400 italic #3a4444. Attribution row: 40px circular avatar + 'Krystin Hargrove' in Nng 16px weight 500 + 'Founder at CoTripper' in Nng 14px weight 400 #808080. 5. Create a tag pill: 100px border-radius, 1px solid border #65451d, padding 4px 12px, text in Nng 13px weight 500, text color #65451d (or #e4b976 for highlighted tags). No background fill.
Color Card Category System
The three pastel card colors are not arbitrary decoration — they form a fixed status taxonomy: - Sage (#d3e5e9 background): 'COMING MONTHLY' — projects being monitored or upcoming - Lavender (#bbb2ce background): 'BUILDING' or general/secondary — projects in formation - Dusty Rose (#cb9da2 background): 'SHIPPED' — completed projects - Deep Violet (#453b60 text on lavender): 'ACTIVE' — the currently live project, elevated within the lavender category by text color alone This color-to-status mapping should be preserved across all project listings. Swapping card colors breaks the system's categorical meaning.
Border Radius Vocabulary
The design uses a deliberate vocabulary of border radii, each with semantic meaning: - 4px: small badges, inline labels, micro-elements - 8px: standard cards, testimonial blocks, content containers - 24px: list items, expanded cards with more visual weight - 40px: hero/feature cards (e.g., the right-column 'CREATING HUDDLE' card) - 100px: tag pills, secondary buttons, inline role labels - 1000px: primary action button only — the fully rounded 'Get started' pill Never use 0px (sharp corners) — even the smallest badges get 4px. The progression from 4px → 1000px is a hierarchy of prominence.
Similar brands
Read.cv
Same flat editorial layout with a single custom sans typeface, left-aligned text, and minimal use of color — both treat the page like a document rather than a product page.
Are.na
Similar muted/desaturated palette with pastel-tinted cards, generous whitespace, and a curatorial/archival sensibility over aggressive product marketing.
Craigslist redesigns (e.g., Minimal Craigslist)
Same category-card aesthetic where each listing is a colored tile with a status indicator and tag pills — the design language of a structured directory.
Linear
Both use a single custom sans, tight letter-spacing on large display sizes, pill-shaped buttons at 100px radius, and a restrained dark-on-light color palette with one or two accent colors.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
