Slides, video frames and social posts
Every layout an agent might need, built from the rules below. Click one to present it full screen, then use the arrow keys. Each has a note on why it works. Every number is from a published Topkey customer story.
hours, not days
- 01Where month-end time goes
- 02How Topkey reconciles automatically
- 03Owner statements in one click
- 04Next steps
runs itself
6x faster every month
own numbers
from Topkey
management accounting
Pick a background, get the right logo
Navy on light backgrounds, white on navy and dark photos. Use the files as they are: no recoloring, stretching, outlines or redrawing.
Background
Show
- Wordmark, navy SVG · default
- Wordmark, white SVG · dark backgrounds
- Icon, navy SVG · square spots
- Icon, white SVG · video bugs
- PNG for video and slide tools: navy wordmark · white wordmark · navy icon · white icon
- Clear space: at least the icon's height on every side.
- Smallest: wordmark 88px wide, icon 24px.
Mostly navy and white, a little neon
The bar shows the rough proportions on a page or slide. Click a swatch to copy its hex.
Contrast check
Big, regular weight, sentence case
FoundersGrotesk at weight 400 on topkey.io. It's licensed, so ask design for the files. Where it isn't installed (Google Slides, Canva, email), use Figtree at 500 for headlines. This page is set in Figtree.
Headline check
Type a headline. It renders on a Topkey slide and gets checked against the voice rules.
Calm, quick, then still
These are the reveals topkey.io uses, and this page uses them too. Use them for web pages, slide builds and video titles. Nothing bounces, spins or loops for attention.
Reveal up
Rises 100px, fades in
Reveal down
Drops 100px, fades in
Reveal shrink
Settles from 125%
Reveal grow
Grows from 75%
- Page and slide reveals
- 1000ms, ease-out-quart
cubic-bezier(.25, 1, .5, 1), triggered as each element enters view - Stagger
- 100–150ms between items in a group
- Hover and UI feedback
- 200–400ms ease-out; cards lift 4–6px
- Logo rows
- A slow continuous marquee (about 40s per loop) that pauses on hover
- Reduced motion
- When the viewer asks for reduced motion, everything appears in place with no movement
Videos that look like one team made them
Demos, walkthroughs, feature highlights and customer stories, in whatever tool you like. One hard rule: product footage is always a real recording of the real product, never generated or mocked up.
Formats
Before you hit record
Before you export
Frames for any tool
Each opens at full size from URL parameters. Screenshot it for an editor, record it, or load it in an HTML-based renderer. Overlays are transparent.
Brief for any video tool
For editors, generators and avatar tools. Upload the PNG logos alongside it and edit real product recordings in.
Recording tools in topkey-core: the feature-demo skill records short scripted clips of one feature against demo data, and demo-studio makes narrated side-by-side videos with captions and highlights.
Clear, confident, approachable, expert
A smart colleague who has run property management finance. Click a card to see the rewrite.
Point your agent here
Paste this into any agent or tool before it makes something. It reads the full guide: logo rules, the layouts above by name, and the deck, video and social recipes.