Redesign presentations to match 2026 Figma brand#1
Open
lottiecoxon wants to merge 7 commits into
Open
Conversation
Apply the refreshed presentation look from the Figma "WIP PH BRAND" presentations page to the shared CSS, the Altinity deck, and the landing page. - Add css/tokens.css: single shared source of truth for design tokens, imported by css/landing.css and each deck's posthog-theme.css. - New brand: accent #ff5c1c (orange) / #f3c049 (yellow, dark slides); white + soft multi-radial bloom background (was flat cream→cool linear); warm #1e1f23 dark slides; soft blurred elevation (retires the hard 0 3px 0 shadow for UI); mono UPPERCASE eyebrows/labels. - Self-host fonts in fonts/ (Open Runde a.k.a. RoundHog, + Source Code Pro as the free stand-in for Berkeley Mono) so decks render fully offline — drops the Google Fonts @import. - Deck chrome restyled to mirror the Figma slides: eyebrow, footer brand line, orange page-number pill, speaker pill, soft-shadow cards; footer flips light on dark slides via :has(); dark slides pick up yellow accent via reveal's .has-dark-background. - Landing: blue "Talks" headline accent, bordered soft-shadow cards. - Document the redesign + flag the brand deltas in PRESENTATION_GUIDELINES.md; system.md (the app design system) left unchanged by design. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3
- Background was washing out to white: the central green radial faded to transparent instead of holding a ~0.45 all-over wash like the Figma. Port the exact Figma radial recipe (centres, radii, alphas) for both light and dark; the slide now carries the full green wash + gold/pink/beige blooms. - Swap the Open Runde stand-in for the real RoundHog (SIL OFL 1.1, so free to ship in this public repo): self-host woff2 weights 400/500/600/700, upright + italic, in fonts/, and point the font stack at RoundHog. Include the OFL README. Mono stays Source Code Pro (Berkeley Mono is commercial / not redistributable in a public repo). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3
reveal's built-in .controls arrow cluster rendered as ugly gray strokes overlapping the page-number pill. Disable it (controls: false) and add a tidy bottom-right "→" box next to the orange page-number pill, matching the Figma page-number + arrow pair. Works on light and dark slides; advances via Reveal.next(). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3
reveal wraps the slide number in <a> tags, so the global .reveal a border-bottom rule drew an orange underline under '12 / 34'. Clear it on .slide-number (and its links) — matches the Figma, which has no underline. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3
reveal injects an inline display:block on its .slide-number, which defeated the flex centering (number sat high in the pill). Disable reveal's built-in slideNumber + controls and render a custom nav instead: [n / total] pill + prev/next arrow boxes, vertically centred, fixed-width pill (no jump between 1- and 2-digit slides). Prev disables on slide 1, next on the last slide. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3
Match the Figma bottom bar — a single fixed flex toolbar with the PostHog logomark + meetup name (left), a pill progress bar with orange fill (middle), and framed [<] [n / total] [>] nav (right). reveal's built-in progress is disabled; the fill width tracks current/total. Footer text + progress track lighten on dark slides. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3
Replace the placeholder hogs with official art-library illustrations (imagedelivery.net /public full-res), picked to fit each slide: - title: coach-sports-basketball-clipboard-mustache (matches the Figma) - 'pipeline that stopped scaling': detective-hog - 'how it works': builder-hog-waving - 'in production': muscle-hog - 'what we learned': graduate Bundled locally so the deck stays offline; drop the old unused PNGs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Applies the refreshed presentation look from the Figma "WIP PH BRAND — Lotties workspace" →
presentationspage to the shared CSS, the Altinity deck, and the landing page. This is a shared token change, not a one-deck tweak — new decks inherit it automatically.What changed
css/tokens.css(new) — single shared source of truth for design tokens. Imported bycss/landing.cssand each deck'scss/posthog-theme.css.#ff5c1c(orange) on light,#f3c049(yellow) on dark slides; page-number pill stays orange.#FFF1D5 → #DAE0EBlinear gradient); dark slides warm#1e1f23(was#151515).0 3px 0shadow for UI surfaces (illustration hard-shadow style is unchanged).fonts/— Open Runde (shipped as RoundHog) + Source Code Pro (free stand-in for the brand's commercial Berkeley Mono). Drops the Google Fonts@import, so decks now render fully offline.:has(); dark slides pick up the yellow accent through reveal's.has-dark-background.PRESENTATION_GUIDELINES.mdgains a "2026 redesign" section documenting the new tokens and flagging the three brand deltas (accent colour, background, UI shadow).system.md(the app design system) is intentionally left unchanged.Notes / flags
@font-faceblock intokens.cssif licensed files are added.Verification
Rendered the landing page and deck (title, content, dark divider slides) in headless Chrome at 1280×720 — all match the Figma frames; fonts confirmed loading from
fonts/(offline).🤖 Generated with Claude Code
https://claude.ai/code/session_01YGFEyqKiY7QfNMVJdyRvJ3