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.
| Role | Weight | Size (16:9) | Notes |
|---|
| Marquee headline | 200 | 60-100pt | White, left-aligned, generous tracking |
| Slide title | 300-400 | 36-48pt | White |
| Card heading | 600 | 20-28pt | White |
| Body | 400-500 | 14-18pt | White or muted |
Emphasis (.em) | 700 | inherit | Often colored (yellow/green/cyan) |
| Eyebrow label | 500 uppercase | 12-14pt | Yellow (--y), letter-spaced |
| Numerals (stat hero) | 700 | 80-160pt | White or accent-colored |
Headlines lean left. Use generous negative space rather than centering everything.
Page formats
| Format | Size | Use |
|---|
| 16:9 widescreen | 1920×1080 | Internal presentations, kickoff decks |
| A4 portrait | 210×297mm | Shareholder-style PDFs |
| A4 landscape | 297×210mm | Internal summary PDFs |
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