2026-06 · Designer & Developer
Proposal Deck Theme (Slidev)
A shared Slidev theme for proposals and company decks. The cover layers a cream background, the wordmark, and a CSS aurora; section slides are full-bleed orange with flame and grain baked in — so every proposal walks in already wearing the brand.
Why Slidev
Flarely produces a lot of decks. Estimates for outsourced work, B2B training proposals, internal explainers — building every one in PowerPoint would eat through the calendar.
More importantly, the moment a proposal deviates from the brand world, the impression the site worked so hard to build dilutes. We didn’t want the site and the decks to live in separate aesthetic universes, so we built a shared theme on Slidev (Markdown-based slides).
- Initial version in
repos/slidev-theme-flarely/ - Four layouts:
cover.vue/section.vue/default.vue/end.vue - An
example.mdwith seven demo slides for instant visual review
Cover layout
The reference was the IXYAS company-deck cover. Cream #F7F4EE background + wordmark + title as the spine, a “Last Modified” stamp at the bottom-left, and a CSS radial-gradient aurora blob of warm orange at the bottom-right.
A WebGL-driven version was prototyped, but PDF export reproducibility wasn’t great, so the final cover collapses to CSS radial-gradient + a single image. @paper-design/shaders (PolyForm Shield, commercial-OK) was tested as well — the decision tree was WebGL grain-gradient → CSS → SVG feTurbulence → image. components/GrainGradient.vue stays in the repo as future-reuse stock.
Section layout
Chapter dividers became a single full-bleed orange image (1920×1080 / 3.9MB).
- A flame texture plus grain baked into the image
- White title + a small label (
Why/What/How— the chapter meta) - Type set in Futura Bold with generous whitespace
Baking it into an image — rather than reproducing it in CSS — gives the divider the weight a chapter break should carry. Telling a reader “the chapter just turned” is mostly a function of visual force.
A staircase of attempts
What we tried along the way:
@paper-design/shadersfor a WebGL grain-gradient — beautiful motion, broke in PDF export- CSS radial-gradient — the right weight for Cover
- SVG feTurbulence noise — not enough density for Section grain
- A single baked image — final answer for Section, 100% reproducible
The takeaway: the choice is between “move the viewer” and “stamp the viewer.” Cover wants motion (CSS). Section wants imprint (image).
Bound to the site
The Slidev theme runs on Futura + Noto Sans JP, with graphite + warm orange + cream — identical tokens to the site. Open a deck and it reads as “this is Flarely” within a second.
As a side effect, Flamey can be dropped straight into chapter openers and body slides, so visual elements move between Slidev → site → business cards without re-authoring. Investing in a brand system once makes every downstream artifact faster — that thread runs through every part of this project, and shows up clearly here too.