--- version: alpha name: Huddle description: Editorial dark-canvas minimalism for a startup-building community — near-black #232323 ground, warm cream ink, a curated set of soft pastel accents (gold, dark purple, pink, salmon, sky blue) used as status/category signals, Basis sans headings paired with the Nng grotesk for UI, and fully-rounded 100px pill buttons. colors: # Canvas + ink background: "#232323" surface: "#2c2c2c" surface-cream: "#e5e6e1" ink: "#f2f0ec" ink-secondary: "#bbb2ce" ink-on-cream: "#3d3838" # Brand accents (used as category / status signals) primary: "#e4b976" # Huddle gold gold-deep: "#65451d" purple: "#453b60" # dark purple purple-light: "#bbb2ce" pink: "#f8c7e2" pink-deep: "#5c2529" salmon: "#f9aa91" sky: "#90bfeb" slate-blue: "#1a4c7a" green: "#9ccd65" # Neutral scale black: "#000000" white: "#ffffff" ink-pure: "#101010" gray-900: "#232323" gray-700: "#3d3838" gray-500: "#838383" gray-400: "#9b9b9b" gray-200: "#c8c8c8" gray-100: "#e5e6e1" cream-soft: "#f9f9f9" # On-color on-primary: "#232323" on-purple: "#bbb2ce" on-ink: "#232323" # Borders + hairlines border-hairline: "#3d3838" border-cream: "#c8c8c8" typography: hero-heading: fontFamily: "Basis, Helvetica Neue, Arial, sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.05 letterSpacing: -1.2px section-heading: fontFamily: "Basis, Helvetica Neue, Arial, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.2px h2: fontFamily: "Basis, Helvetica Neue, Arial, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.13 letterSpacing: -0.2px h3: fontFamily: "Basis, Helvetica Neue, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.2px body-large: fontFamily: "Nng, Helvetica Neue, Arial, sans-serif" fontSize: 20px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Nng, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "Nng, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.2px button-large: fontFamily: "Nng, Helvetica Neue, Arial, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.33 letterSpacing: 0.2px nav-label: fontFamily: "Nng, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px caption: fontFamily: "Nng, Helvetica Neue, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px badge: fontFamily: "Nng, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.5px mono-label: fontFamily: "DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 28px 2xl: 40px 3xl: 60px 4xl: 100px rounded: none: 0px xs: 4px sm: 6px md: 8px lg: 16px xl: 24px 2xl: 40px pill: 100px full: 9999px components: # Primary CTA — black pill, the site's default action button-primary: backgroundColor: "{colors.black}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.full}" padding: 12px 16px button-primary-large: backgroundColor: "{colors.black}" textColor: "{colors.ink}" typography: "{typography.button-large}" rounded: "{rounded.pill}" padding: 20px 28px # Gold accent CTA — Huddle gold pill with dark ink button-accent: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.full}" padding: 12px 16px # Secondary / ghost on dark canvas button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.full}" padding: 12px 16px borderColor: "{colors.border-hairline}" # Status badge — ACTIVE / SHIPPED / TEAM FORMING badge-active: backgroundColor: "{colors.green}" textColor: "{colors.on-ink}" typography: "{typography.badge}" rounded: "{rounded.full}" padding: 4px 10px badge-shipped: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.badge}" rounded: "{rounded.full}" padding: 4px 10px badge-forming: backgroundColor: "{colors.purple}" textColor: "{colors.on-purple}" typography: "{typography.badge}" rounded: "{rounded.full}" padding: 4px 10px # Project card on dark canvas card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px borderColor: "{colors.border-hairline}" # Light editorial card — cream surface, dark ink card-cream: backgroundColor: "{colors.surface-cream}" textColor: "{colors.ink-on-cream}" rounded: "{rounded.xl}" padding: 24px borderColor: "{colors.border-cream}" # Quote / testimonial card — purple wash card-quote: backgroundColor: "{colors.purple}" textColor: "{colors.purple-light}" typography: "{typography.body-large}" rounded: "{rounded.xl}" padding: 28px # Input input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px borderColor: "{colors.border-hairline}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.primary}" # Top nav / hero header bar nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-label}" padding: 16px 60px borderColor: "{colors.black}" --- # Huddle Design System ## Overview Huddle is a community for people building startups together, and its site reads like an editorial poster pinned to a dark wall. The canvas is a near-black `{colors.background}` (`#232323`) — not pure black, a warm charcoal that keeps the page from feeling like a terminal. Against it, warm off-white ink (`{colors.ink}`) carries the reading copy, and a small, deliberate palette of soft pastel accents does the signaling: Huddle gold (`{colors.primary}`), dark purple (`{colors.purple}`), pink (`{colors.pink}`), salmon (`{colors.salmon}`), and sky blue (`{colors.sky}`). Color here is functional — it labels project status (ACTIVE, SHIPPED, TEAM FORMING) and category, rather than decorating chrome. Typography is a two-family system. Headings are set in **Basis**, a humanist grotesk used at a single regular weight (400) with tight negative tracking — the hero compresses to roughly -1.2px, section headings sit near -0.2px. The grotesk **Nng** carries every piece of UI: buttons, navigation, body copy, captions. Body weights run light-to-regular (300–400), which keeps the dark page feeling airy rather than heavy. There is no bold display weight; emphasis comes from size, color, and whitespace, not weight. The signature shape move is the fully-rounded pill. Primary actions are black pills with 100px+ (`{rounded.pill}` / `{rounded.full}`) radii and generous padding (up to `20px 28px`), giving every CTA a soft, tactile, button-badge feel. Cards and surfaces use a gentler 24px (`{rounded.xl}`) corner. The page alternates the dark ground with cream editorial panels (`{colors.surface-cream}`) and purple quote washes (`{colors.card-quote}`), creating rhythm through surface swaps rather than borders — hairlines, where present, are quiet `{colors.border-hairline}` lines. **Key Characteristics:** - Warm near-black canvas (`{colors.background}` `#232323`) with off-white ink — charcoal, not pure black - Basis grotesk headings at a single 400 weight with tight negative tracking - Nng grotesk for all UI and body, run light (300–400) for an airy feel on dark - Fully-rounded pill buttons (100px / 1000px radius) as the core shape signature - A curated pastel accent set (gold, purple, pink, salmon, sky) used as status/category signals, not chrome decoration - Surface alternation — dark ground, cream editorial panels, purple quote washes - Quiet hairline borders; separation comes from surface color and whitespace ## Colors ### Canvas & Ink - **Charcoal** (`{colors.background}`): The page ground — warm near-black, never pure `#000`. - **Surface** (`{colors.surface}`): Slightly lifted dark surface for cards and inputs. - **Cream** (`{colors.surface-cream}`): Editorial light panels that break up the dark page. - **Ink** (`{colors.ink}`): Primary off-white reading text on dark. - **Ink Secondary** (`{colors.ink-secondary}`): Muted lavender-tinted secondary text. - **Ink on Cream** (`{colors.ink-on-cream}`): Dark text used on cream panels. ### Brand Accents - **Huddle Gold** (`{colors.primary}`): The lead accent — gold pills, SHIPPED status, highlights. - **Dark Purple** (`{colors.purple}`): Quote washes, TEAM FORMING status, secondary surfaces. - **Purple Light** (`{colors.purple-light}`): Text on purple surfaces. - **Pink** (`{colors.pink}`): Soft category signal. - **Salmon** (`{colors.salmon}`): Warm category signal. - **Sky Blue** (`{colors.sky}`): Cool category signal. - **Green** (`{colors.green}`): ACTIVE status. ### Neutral Scale - **Gray 700** (`{colors.gray-700}`): Cream-panel heading text, dark labels. - **Gray 500** (`{colors.gray-500}`): Muted captions. - **Gray 400** (`{colors.gray-400}`): Disabled / placeholder. - **Gray 200** (`{colors.gray-200}`): Cream borders. - **Gray 100** (`{colors.gray-100}`): Light hairlines on cream. ### Borders - **Hairline** (`{colors.border-hairline}`): Quiet dividers on the dark canvas. - **Cream Border** (`{colors.border-cream}`): Dividers on light panels. ## Typography ### Font Family - **Headings**: `Basis`, with fallbacks `Helvetica Neue, Arial, sans-serif` - **UI / Body**: `Nng`, with fallbacks `Helvetica Neue, Arial, sans-serif` - **Mono**: `DM Mono` for occasional technical labels ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.hero-heading}`, `{typography.body}`, etc.). | Token | Use | |---|---| | `hero-heading` | Big poster hero — Basis 400, tight tracking | | `section-heading` | Feature/section titles | | `h2` | Major sub-sections | | `h3` | Card headings | | `body-large` | Intros, quotes, feature descriptions | | `body` | Standard reading text | | `button-ui` | Standard buttons, links | | `button-large` | Large pill CTAs (Nng 300) | | `nav-label` | Navigation, menu items | | `caption` | Metadata, small print | | `badge` | Status pills (ACTIVE / SHIPPED) | | `mono-label` | Occasional technical labels | ### Principles - **Two grotesks, strict roles**: Basis announces (headings), Nng operates (everything UI/body). - **One heading weight**: Basis runs at 400 only — hierarchy comes from size and tracking, not weight. - **Light UI on dark**: Nng body weights run 300–400 to keep the dark page airy. - **Negative tracking on display**: Hero compresses to ~-1.2px; it relaxes toward 0 at body sizes. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Notable jumps: `{spacing.lg}` (16px) → `{spacing.xl}` (28px) → `{spacing.2xl}` (40px) → `{spacing.3xl}` (60px), with section padding reaching `{spacing.4xl}` (100px). ### Grid & Container - Hero header bar capped near 963px max-width, with a bottom hairline of `1px solid {colors.black}` - Generous horizontal padding (up to 60px desktop, ~8vw on hero) - Project listings in responsive card grids (3 → 2 → 1 columns) ### Whitespace Philosophy - **Editorial breathing room**: Large vertical rhythm between sections (`{spacing.3xl}`–`{spacing.4xl}`). - **Surface rhythm**: Separation comes from swapping dark ground ↔ cream panels ↔ purple washes, not heavy borders. - **Quiet hairlines**: Where dividers appear, they are thin `{colors.border-hairline}` lines. ## Shapes | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved | | `xs` | 4px | Small inline chips | | `sm` | 6px | Small functional elements | | `md` | 8px | Inputs, small controls | | `lg` | 16px | List items, media | | `xl` | 24px | Cards, panels | | `2xl` | 40px | Large containers | | `pill` | 100px | Pill buttons | | `full` | 9999px | Status badges, fully-round CTAs | ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`). ### Buttons - **`button-primary`** — Black pill, off-white text, fully rounded. The site default. - **`button-primary-large`** — Bigger black pill (Nng 300, `20px 28px` padding) for hero CTAs. - **`button-accent`** — Huddle gold pill with dark ink for emphasis actions. - **`button-secondary`** — Lifted dark surface with a hairline border. ### Badges - **`badge-active`** — Green pill (ACTIVE). - **`badge-shipped`** — Gold pill (SHIPPED 🚀). - **`badge-forming`** — Purple pill (TEAM FORMING). ### Cards - **`card`** — Dark lifted surface, off-white text, 24px radius, quiet hairline. - **`card-cream`** — Cream editorial panel with dark ink — the light counterpoint. - **`card-quote`** — Purple wash for testimonials, lavender text, body-large type. ### Inputs - **`input`** — Dark surface, off-white text, hairline border; focus shifts the border to Huddle gold. ### Navigation - **`nav-bar`** — Dark header on charcoal, Nng 15px labels, bottom hairline of `1px solid {colors.black}`. ## Do's and Don'ts ### Do - Use the warm charcoal `{colors.background}` (`#232323`) as the canvas — never pure black for large areas - Set headings in Basis at a single 400 weight; let size and tracking build hierarchy - Keep Nng body weights light (300–400) for airiness on the dark ground - Use fully-rounded pills for buttons and status badges - Treat the pastel accents as functional signals (status/category), not decoration - Alternate dark ground with cream panels and purple quote washes for rhythm ### Don't - Don't add a bold heading weight — Basis stays at 400 - Don't use heavy or saturated borders — hairlines only - Don't scatter accent colors as chrome decoration; reserve them for signals - Don't put off-white ink on the cream panels — switch to `{colors.ink-on-cream}` - Don't square off the buttons — the pill is the signature - Don't crowd sections; the editorial whitespace is load-bearing --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Single column, reduced hero size, ~24px padding | | Tablet | 600–991px | 2-column card grids, mid padding | | Desktop | 992–1280px | Full layout, 60px horizontal padding | | Large | >1280px | Centered, capped content width, generous margins | ### Collapsing Strategy - Hero heading scales down but keeps proportional negative tracking - Project cards: 3-column → 2-column → single column - Navigation collapses to a menu toggle on mobile - Section padding eases from `{spacing.4xl}` toward `{spacing.2xl}` on small screens --- ## Agent Prompt Guide ### Quick Color Reference - Canvas: Charcoal `{colors.background}` (`#232323`) - Body text: Off-white `{colors.ink}` - Primary CTA: Black pill `{colors.black}`, off-white text, `{rounded.full}` - Accent CTA: Huddle gold `{colors.primary}`, dark ink `{colors.on-primary}` - Status: ACTIVE green `{colors.green}`, SHIPPED gold `{colors.primary}`, FORMING purple `{colors.purple}` - Heading font: Basis 400; UI/body font: Nng 300–400 ### Example Component Prompts - "Hero on charcoal `{colors.background}`. Heading in Basis 64px weight 400, line-height 1.05, letter-spacing -1.2px, color `{colors.ink}`. Subhead in Nng 20px weight 300, `{colors.ink-secondary}`. Black pill CTA (`{colors.black}`, `{rounded.pill}`, 20px 28px padding) plus a gold pill (`{colors.primary}`, dark ink)." - "Project card: dark surface `{colors.surface}`, 24px radius, hairline `{colors.border-hairline}`. Title Basis 24px 400 `{colors.ink}`, body Nng 16px 400. Status pill top-right: gold `{colors.primary}` 'SHIPPED', fully rounded, 12px Nng." - "Testimonial: purple wash `{colors.purple}`, lavender text `{colors.purple-light}`, body-large Nng 20px weight 300, 24px radius." - "Cream editorial panel `{colors.surface-cream}` with dark ink `{colors.ink-on-cream}`, 24px radius, used to break the dark page." ### Iteration Guide 1. Always start from the warm charcoal canvas — `#232323`, not black 2. Headings = Basis 400 with negative tracking; UI/body = Nng 300–400 3. Buttons and status badges are fully-rounded pills (`{rounded.pill}` / `{rounded.full}`) 4. Accent colors are signals (status/category), never chrome decoration 5. Build rhythm by swapping surfaces (dark ↔ cream ↔ purple), not by adding borders 6. On cream panels, switch ink to `{colors.ink-on-cream}` for contrast --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Huddle. Brand names and trademarks belong to their respective owners.