Builders Deck Style

monday Builders Deck Style

Visual language for any Builders-branded deck or PDF deliverable. Brand-only — no narrative, no data sources, no specific deck structure.

Color palette

:root {
 --bg: #000000;
 --bg-light: #FFFFFF;
 --card: #1A1A1A;
 --card-light: #FFFFFF;
 --text: #FFFFFF;
 --text-muted: rgba(255,255,255,0.65);

 --y: #FBC926;   /* yellow — primary brand accent */
 --g: #59E36C;   /* green — acceleration / "we are it" */
 --c: #4DDDD5;   /* cyan */
 --b: #5C5CE0;   /* indigo — filled key boxes */
 --p: #9B7BFC;   /* purple */
 --pink: #FF158A; /* hot pink */
 --red: #DF2F4A;  /* incidents / critical */
}

Signature gradient (ribbons, card outlines, page numbers, dividers):

background: linear-gradient(180deg, #FBC926 0%, #59E36C 33%, #4DDDD5 66%, #9B7BFC 100%);

For SVG strokes, use <linearGradient>. Always vertical (180deg) unless following a curved path.

Typography

Family stack: 'Figtree', 'Inter', system-ui, sans-serif.

Headlines lean left. Use generous negative space rather than centering everything.

Page formats

Default to dark theme. Light theme is the exception (shareholder distribution).

Signature decorations

Cover ribbons (only on cover)

• Right-edge SVG, 4 stacked cloud/pill outlines
• Each ribbon ~25-30% slide height; together they fill ~80% vertically
• Anchored to right edge, can extend slightly off-canvas
• 2-3px stroke using the signature gradient (no fill, transparent interiors)
• Cover only — never on interior pages

Page numbers

• White digit inside a small gradient-stroke circle (yellow→green)
• Bottom-right corner, ~28-32px diameter

Logo lockup

• Top-left corner, generous margin (40-60px)
• Use on cover and section dividers only
• Don't repeat on every interior page

Layout primitives

.card — base dark card with gradient outline

.card {
 background: var(--card);
 border-radius: 20px;
 padding: 36px;
 border: 1px solid transparent;
 background-image:
   linear-gradient(var(--card), var(--card)),
   linear-gradient(180deg, #FBC926, #59E36C, #4DDDD5, #9B7BFC);
 background-origin: border-box;
 background-clip: padding-box, border-box;
}

Pattern variants

• Stat card — big accent-colored numeral + label + blurb. Solid colored left border (4-6px) instead of gradient when in dense grids.
• Quote card — gradient outline, italic body text, oversized " mark in accent color.
• Key box — solid --b (indigo) fill, yellow eyebrow, large white headline. High-emphasis proof points.
• Trend card — split layout (left: label+stat+body; right: SVG chart). Locked white background regardless of theme.
• Comparison pair — two side-by-side cards contrasting two columns (Developer/Agent, Today/Tomorrow, Before/After).
• Category row — 4-5 horizontal cards with bold heading + 1-line desc. Taxonomies and frameworks.
• Code snippet card — dark fill, monospace, syntax-highlighted (teal keywords, yellow strings).
• Section divider — plain dark bg, very large left-aligned headline (weight 200, 80-100pt). Optional eyebrow. No ribbons, no decorations — typography breathing in negative space.

Full CSS reference

Read references/base.css for the complete implemented stylesheet with all components.

Ribbon SVG asset

The cover ribbon SVG is at assets/ribbon.svg.

Publishing

Save HTML to content/slides/<slug>.html before publishing.

When asked to share or publish, use meethtml.com:

curl -s -X POST https://api.meethtml.com/api/v1/publish \
  -H "Content-Type: application/json" \
  -d '{"html":"<FULL_HTML>","title":"<TITLE>"}'

Compositional rules

• Lean left — headlines anchor left, leaving right ~30-40% as breathing space (or ribbons on covers)
• Negative space over density — Builders decks are confident, not crowded. Drop content rather than shrink it.
• One color story per slide — pick ONE accent per slide and use consistently (left borders, eyebrows, em spans). Don't rainbow.
• Gradient is the brand — reserve the full 4-stop gradient for hero/structural moments. Don't apply to body copy or many small elements.
• Match complexity to message — hero slides earn elaborate decorations; data slides should be restrained.

Anti-patterns (don't do these)

• Centered headlines on every slide (breaks lean-left rhythm)
• Gradient on body text or many small UI elements
• Cover ribbons on interior pages
• Mixing accent colors within a single card
• Generic fonts (Arial, Roboto) — Figtree/Inter only
• Light theme on internal decks (default is dark)
• Logo on every page