# Topkey brand guide (for people and agents)

This is the single source of truth for Topkey's brand. If a local skill, old deck or memory disagrees with this file, this file wins.

- Human view: `/` (example slides, video frames and social posts you can present; logo, color and headline checkers)
- Machine-readable tokens: `/brand.json`
- This guide as plain Markdown: `/brand.md`
- Index for agents: `/llms.txt`
- Video frames at exact pixel size: `/frames.html` (see "Video playbook")

It works with any tool: every rule is a plain value (hex, px, seconds, LUFS), every logo comes as SVG and PNG, and every frame can be rendered as an image. All asset paths below are relative to the site root.


## Who Topkey is

Topkey automates banking, reconciliation, payments and owner statements for short-term and vacation rental property managers. Website: https://www.topkey.io. The brand is calm, precise and trustworthy: people trust it with real money.

Write the name **Topkey**: one word, capital T, lowercase k. Never "TopKey", "Top Key" or "TOPKEY" in running text.

## Logos

| File | Use on |
|---|---|
| `/assets/logos/topkey-wordmark-navy.svg` | White, cream, mint, ice or neon backgrounds. The default. |
| `/assets/logos/topkey-wordmark-white.svg` | Navy or dark photo backgrounds. |
| `/assets/logos/topkey-icon-navy.svg` | Square spots: avatars, favicons, slide corners, video bugs. Light backgrounds. |
| `/assets/logos/topkey-icon-white.svg` | Same, on navy or dark backgrounds. |

Every logo also comes as a transparent PNG for tools that don't take SVG (most video editors and generators): `/assets/logos/png/topkey-wordmark-navy.png` (2000×409), `topkey-wordmark-white.png`, `topkey-icon-navy.png` (1024×432), `topkey-icon-white.png`.

Partner and integration logos, for "works with" slides only (`/assets/partners/`): `guesty.svg`, `hostaway.svg`, `track.svg`, `streamline.svg`, `ownerrez.svg`, `hostfully.svg`, `quickbooks.svg`, `xero.svg`, `netsuite.svg`, `sage-intacct.svg`, `breezeway.svg`, `amazon.svg`. Show them at their own colors in equal white tiles, and only for integrations Topkey actually has.

Rules:

- Use the SVG files as they are. Do not redraw the logo, set it in a font, or rebuild it from shapes.
- Do not recolor it beyond navy `#11163D` and white `#FFFFFF`. No gradients, shadows, outlines or neon logos.
- Do not stretch, rotate or crop it. Scale it proportionally.
- Clear space on every side: at least the height of the icon's shapes.
- Minimum size: wordmark 88px wide on screen; icon 24px.
- On a busy photo, put the logo on a solid navy or white area, never straight on the image.

## Colors

These are the colors of the live marketing site (topkey.io).

| Name | Hex | Role |
|---|---|---|
| Navy | `#11163D` | Headlines, logo, dark sections, primary text. The brand color. |
| Body text | `#11163DA3` (navy at 64%) | Paragraph text on light backgrounds. Solid equivalent on white: `#676A83`. |
| Neon | `#E1FB45` | Primary buttons and one highlight per view. An accent, never a large background. |
| Neon hover | `#CCE444` | Hover state of neon buttons. |
| Ice | `#C1EAE7` | Soft accent: cards, tags, illustration fills, chart series. |
| Teal | `#329E96` | Positive numbers, checkmarks, a second chart series. |
| Orange | `#F27D4B` | Rare accent for one callout or chart series. Never for buttons. |
| White | `#FFFFFF` | Default page and slide background. |
| Light background | `#11163D08` (navy at 3%) | Alternate section background. Solid: `#F8F8F9`. |
| Stroke | `#11163D1A` (navy at 10%) | Borders and dividers. Solid: `#E7E8EC`. |
| Mint gradient | `linear-gradient(243deg, #E0F3F3, #F4F8F5)` | Hero and title backgrounds. |

Proportion: mostly white and navy, some ice and mint, a little neon. Neon text on white fails contrast, so never use it that way: put navy text on neon instead.

Contrast pairs that pass: navy on white, navy on neon, navy on ice, white on navy, neon on navy.

### The product UI is different

The Topkey web app uses its own UI palette: navy links and focus rings, near-black primary buttons, mint soft accents and gray surfaces. In demo videos and screenshots, show the product as it really is. Never recolor product screenshots to match the marketing palette.

Older product screenshots, including the current topkey.io link-preview image, show orange charts and links. Orange was retired from the product in September 2026: take fresh screenshots instead of reusing those.

## Typography

| Role | Font | Settings |
|---|---|---|
| Headlines | FoundersGrotesk | Weight 400 (regular, not bold), navy, line-height 1–1.2, slightly tight tracking. |
| Body | FoundersGrotesk | Weight 400; 500 for emphasis. Body text color. |
| Fallback when FoundersGrotesk isn't available (Google Slides, Canva, email) | Figtree (Google Fonts) | Same weights. Headlines 500. |

Web sizes: h1 56px / 3.5rem, h2 48px / 3rem, lead paragraph 18px / 1.125rem, body 16px.

FoundersGrotesk is a licensed font. It is not distributed from this site. Get the files from the design lead, or use Figtree.

Headline style: big, regular weight, navy, sentence case. The look comes from size and whitespace, not boldness.

## Shapes, buttons, layout

- Corner radius: 8px small (tags, inputs), 12px medium (buttons, cards), 20px large (feature panels, images).
- Borders: 1px, stroke color `#11163D1A`. No heavy shadows: at most a soft one for a floating card.
- Primary button: neon background `#E1FB45`, navy text, 12px radius, weight 500. Hover `#CCE444`.
- Secondary button: transparent with a 1px navy border and navy text.
- One primary button per view.
- Layout: generous whitespace, left-aligned text, a clear grid. One idea per section.

## Motion

The same reveals topkey.io uses. Use them for web pages, slide builds (PowerPoint/Keynote "appear" animations) and video titles.

- Reveal up: rise 100px and fade in. Reveal down: drop 100px and fade in. Reveal shrink: settle from 125%. Reveal grow: grow from 75%.
- Reveals run 1000ms with ease-out-quart, `cubic-bezier(.25, 1, .5, 1)`, as each element enters view. Stagger items in a group by 100–150ms.
- Hover and UI feedback: 200–400ms ease-out; cards lift 4–6px.
- Logo rows: a slow continuous marquee, about 40s per loop, paused on hover.
- Nothing bounces, spins, pulses or loops for attention. Respect reduced-motion settings: show everything in place.

## Layouts

Reference layouts, each built and annotated at the site root under "Examples". Ask for one by name ("use the Big stat layout").

| Layout | Format | What it is |
|---|---|---|
| Title | Deck | Mint gradient, navy wordmark top left, small teal kicker, headline, one-line subtitle. |
| Agenda | Deck | White, kicker + "Today", 3–5 numbered rows (teal numbers) with hairline dividers. |
| Section divider | Deck | Navy, short neon bar, "Part 02" kicker in neon, white headline. |
| Big stat | Deck | Headline states the takeaway; one huge number in an ice block; one sentence of context; source line. |
| Before / after | Deck | Two panels: old number struck through on light gray, new number on neon. Source line. |
| Three features | Deck | Kicker, headline, three ice cards: outcome title plus one sentence each. |
| Customer quote | Deck | Mint, teal quote mark, a real testimonial, company name and one line of context. |
| Bar chart | Deck | Horizontal navy bars labeled at the end, no gridlines or legend, source line. |
| Integrations | Deck | Light background, headline, partner logos in equal white tiles. |
| Product screenshot | Deck | Mint, headline and one sentence on the left third, a real screenshot in a 20px-radius frame on the right. |
| Process | Deck | Four steps on a line, ice connector, navy dots, last step in neon as the outcome. |
| Closing | Deck | Navy, white wordmark, headline, one neon "Book a demo" button shape, topkey.io. |
| Video title card | Video | Navy, white wordmark, neon bar, title and "Product demo · 2 min". 2–3s. |
| Lower third | Video | White rounded box with a neon edge, name and role, bottom left in the safe area. 4–5s. |
| Callout on footage | Video | Neon ring around one element plus a short navy label. One at a time. |
| End card | Video | Navy, centered white wordmark, "Book a demo at topkey.io". 3s. |
| Chapter card | Video | Mint, teal step number ("02"), the task as the title, progress bars. 1.5–2s. |
| Caption | Video | White Figtree 500 on navy at 85%, bottom center above the safe margin, two lines at most. |
| Thumbnail | Video | 1280×720, mint or navy, five words at most, wordmark top left, optional real screenshot on the right. |
| Stat post · 1:1 | Social | 1080×1080, mint, wordmark, one huge stat, one-line label, source. |
| Link preview · 1200×630 | Social | Mint, wordmark, headline at regular weight, nothing near the edges. |
| Story · 9:16 | Social | 1080×1920, navy, stat in neon, one-line label, neon button, source at the bottom. |

Example numbers on the site come from published customer stories (Beachside VR, Luxury Properties Jackson Hole, Arrived, Krain, Blue Gems Management, Leisr Stays, Hilton Head Properties, Happy Palm Stays, Host Home). Reuse them only with the same source line.

## Voice and tone

Topkey is **clear, confident, approachable and expert**: like a smart colleague who has run property management finance and makes it simple without talking down.

- Lead with the outcome, not the feature. "Transactions categorize themselves" beats "automated categorization algorithms".
- Be specific. "Cut month-end close from 3 days to 3 hours" beats "save time".
- Name the pain, then solve it.
- Say "you" more than "we".
- Headlines: under 10 words, active voice, sentence case.
- Body: 2–3 sentence paragraphs, about an 8th grade reading level.
- CTAs: specific action verbs. "Book a demo", "See owner statements".

Words to avoid: leverage, solution, seamless, robust, cutting-edge, revolutionary, best-in-class, empower, game-changer, unlock.

The audience is property managers running 20 to 500+ units. They know PMS names (Guesty, OwnerRez, Hostaway, Streamline, Track), owner statements, reconciliation, month-end close, GL codes, trust accounting, corporate cards and bill pay. They are not developers: skip technical implementation details.

Facts: never invent customer names, numbers, savings figures or quotes. Use only figures published on topkey.io (customer stories at https://www.topkey.io/customers), or leave a clearly marked placeholder like `[STAT NEEDED]`.

The voice stays the same everywhere; the tone shifts with the context:

| Context | Tone | Example |
|---|---|---|
| Marketing site | Confident and warm | "Close the month in hours, not days." |
| Product emails | Helpful and direct | "Your October owner statements are ready to review." |
| Error messages | Calm and specific | "We couldn't process this payment. The card ending in 4242 was declined." |
| Help docs | Clear and thorough | "To assign a transaction to a property, open the Property column and pick one." |
| Social | Knowledgeable and conversational | "Reconciliation shouldn't eat a week of every month. It doesn't have to." |
| Sales | Authoritative and empathetic | "You didn't get into property management to do accounting." |

Email subject lines: lead with the outcome ("Your October reconciliation is done"), ask the pain ("Still reconciling transactions by hand?"), use a sourced number, or say it plainly ("New: owner statements in one click"). No ALL CAPS, no "!!!", no clickbait, no emoji.

Formatting: one idea per paragraph; bullets only for lists of three or more; headings in sentence case.

## Recipe: slide decks

For any slide tool or agent: these are plain values, so they work in HTML decks, Google Slides, Keynote, PowerPoint or a generator.

1. 16:9. White background for content slides; mint gradient or navy for the title, section and closing slides.
2. Title slide: navy wordmark top left (white wordmark on navy), headline in navy at weight 400, one line of subtitle in body text color.
3. Content slides: one idea per slide, the headline states the takeaway ("Owner statements now take one click"), at most 3 bullets or one visual.
4. Accents: ice for cards and shapes, teal for positive numbers, neon only to highlight one thing per slide (a key number's background, a CTA).
5. Charts: navy first series, ice second, teal third; no 3D, no gradients, light stroke gridlines.
6. Logo: small navy icon bottom left on content slides, nothing in the other corners.
7. Closing slide: navy background, white wordmark, a neon CTA button shape ("Book a demo"), and topkey.io.
8. Font: FoundersGrotesk if installed, otherwise Figtree. Never mix in a third font.

## Video playbook

For demos, walkthroughs, feature highlights, customer stories and release clips, made with any tool: a screen recorder and editor, an HTML or code-based renderer, or an AI video generator.

### The one hard rule

Product footage is always a real recording of the real product. Never generate, mock up or recolor product UI, and never use an AI-generated screen in place of a recording. Generated or stock visuals are fine for backgrounds, b-roll and illustrations only.

### Pick the type

| Type | Length | Shape | Where it goes |
|---|---|---|---|
| Feature highlight | 15–60s | Hook (the outcome, 0–3s) → show the one flow → linger on the result (3s) → end card | Social, What's New, website |
| Product demo | 1–3 min | Title card → the problem in one sentence → 2–4 chapters, one task each → recap → end card | Sales follow-ups, website, events |
| Walkthrough / how-to | 2–8 min | Title → "what you'll do" → a chapter card per step → the finished state → where to get help | Help center, onboarding, YouTube |
| Customer story | 60–120s | The customer and their quote → the problem → how they use Topkey → the sourced number → end card | Website, social, sales |
| Release clip | 20–45s | "New:" title → before and after → how to find it → end card | What's New, social, email |

One video, one job. If a demo needs more than four chapters, split it into a series.

### Pick the format

| Destination | Size | Captions | Notes |
|---|---|---|---|
| Website, product pages | 1920×1080 (16:9) | Burned in for autoplay loops | Hero loops: muted, 10–30s, no reliance on audio, loop cleanly |
| YouTube, help center | 1920×1080 (16:9) | Upload an `.srt` file | Chapters in the description; thumbnail 1280×720 |
| LinkedIn, X feed | 1080×1080 (1:1) or 1080×1350 (4:5) | Burned in (feeds play muted) | Hook in the first 2 seconds, on screen as text |
| Stories, Reels, Shorts, TikTok | 1080×1920 (9:16) | Burned in | Keep text out of the top 250px and the bottom 400px |
| Sales follow-up (screen recorder) | 1920×1080 | Optional | Face cam, if used, as a small circle bottom right; under 3 min |
| In-app, What's New | 1920×1080 | Burned in | No music, 15–45s, loops cleanly |

Everything: 30fps (match the recording), 96px safe margin on 16:9 (5% on other sizes).

### Script and voiceover

- First sentence says the outcome: "Here's how to pay a vendor and bill the owner in one step."
- Say what's happening as it happens on screen; use the product's exact screen and button names.
- "You" more than "we". Follow the voice rules above; no banned words.
- About 140–160 words per minute. A 60-second video is about 150 words.
- Numbers on screen or in voiceover come from a published customer story, with the source on screen.
- Say the name as "top-key", one word.
- Voice: calm, warm, confident. For synthetic voices, pick a neutral, natural voice with no hype in the delivery.

### Record

- Use a demo or sandbox account only. Never record production customer data: no real customer, owner, guest or vendor names, and no bank or card numbers.
- Light mode, browser window at 1920×1080, 100% zoom. Hide bookmarks, extensions and other tabs (or record a clean browser profile or a scripted browser).
- Turn on Do Not Disturb. Close banners and toasts that aren't part of the story.
- Move the cursor deliberately: straight to the target, no circling. Pause 1–2 seconds on every important state.
- Cut loading spinners and dead time in the edit rather than waiting on camera.
- Engineering's recording tools (in the topkey-core repo): the `feature-demo` skill records short scripted clips of one feature against demo data; `demo-studio` makes narrated side-by-side videos with captions and highlights.

### Edit and finish

- Title card 2–3s, chapter cards 1.5–2s, end card 3s. Build them from the frames below, or match them exactly in your tool.
- Captions on every video: Figtree 500, white on navy at 85% (`#11163DD9`), 12px radius, centered at the bottom above the safe margin, at most 2 lines and about 42 characters per line. At 1080p, 44px text.
- Callouts: a neon `#E1FB45` ring around one element plus a short navy label. One at a time.
- Zoom in on the area that matters at 1.2–1.5×, easing over about 600ms, instead of adding arrows.
- Transitions: straight cuts, or a 300ms crossfade. No wipes, spins or glitch effects. Titles and callouts use the reveals in "Motion".
- Music: optional, calm, instrumental. Keep it 18–20dB under the voice. Mix voice to about −16 LUFS (−14 LUFS for YouTube).
- Export: MP4, H.264, 1080p, AAC audio at 48kHz, plus an `.srt` caption file.
- File name: `topkey-<type>-<topic>-<yyyy-mm-dd>-<ratio>.mp4`, for example `topkey-highlight-bill-pay-2026-10-20-16x9.mp4`.
- Thumbnail: 1280×720, navy or mint, at most 5 words, wordmark top left, an optional product screenshot on the right.

### Frames for any tool

`/frames.html` renders each brand frame at the exact size of the window, from URL parameters. Screenshot it for an editor, record it, or load it in an HTML-based renderer. Overlays have a transparent background.

| Frame | URL | Size |
|---|---|---|
| Title card | `/frames.html?frame=title&title=Paying%20vendors&sub=Product%20demo` (`&bg=mint` for light) | 1920×1080 |
| Chapter card | `/frames.html?frame=chapter&step=2&of=4&title=Match%20the%20receipt` | 1920×1080 |
| Lower third (transparent) | `/frames.html?frame=lower&name=Sam%20Rivera&role=Customer%20Success%2C%20Topkey` | 1920×1080 |
| Caption (transparent) | `/frames.html?frame=caption&text=Every%20receipt%20lands%20on%20the%20right%20owner.` | 1920×1080 |
| End card | `/frames.html?frame=end&cta=Book%20a%20demo%20at%20topkey.io` | 1920×1080 |
| Thumbnail | `/frames.html?frame=thumb&title=Owner%20statements%20in%20one%20click&img=<screenshot URL>` | 1280×720 |

Add `&ratio=9x16` or `&ratio=1x1` to title, chapter, caption and end for vertical or square versions (open them at 1080×1920 or 1080×1080).

A transparent PNG with headless Chrome: `chrome --headless --window-size=1920,1080 --default-background-color=00000000 --screenshot=lower-third.png "<site>/frames.html?frame=lower&name=Sam"`.

### By kind of tool

- **Screen recorder and editor:** import the PNG logos and the frames as images; set brand colors from the hex values; install Figtree; follow "Edit and finish".
- **HTML or code-based renderer:** read `/brand.json` (colors, fonts, motion and video specs) and load `/frames.html` frames as scenes or overlays.
- **AI video generator or avatar tool:** give it the brief below, upload the PNG logos, and edit real product recordings in. Never let it generate product screens.

Brief to paste into any video tool or agent:

> Make this video for Topkey (topkey.io), financial automation for vacation rental property managers. Follow the brand guide at `<site>/brand.md`, section "Video playbook". Navy #11163D, white, ice #C1EAE7 and one neon #E1FB45 accent; font Figtree; headlines at regular weight in sentence case. Calm, confident voice that leads with the outcome. Use the logo files from the guide unchanged. Use only real recordings of the Topkey product, with demo data. Don't invent customer names or numbers. Captions on, 30fps, MP4.

## Recipe: social images and one-pagers

- Social image 1200×630 (link previews) or 1080×1080 (feed). Mint gradient or white background, navy headline at weight 400, navy wordmark in a corner, optionally a product screenshot in a 20px-radius frame with a 1px stroke.
- One-pager: Letter or A4, white, navy headline, 2–3 sections, ice cards, a single neon CTA at the bottom.

## Before you hand anything off

- Logo is an unmodified file from `/assets/logos/`, navy or white, with clear space.
- Only colors from this guide. Neon is used once at most, never as text on white.
- Headlines are regular weight, sentence case, navy.
- Copy follows the voice rules; no banned words; no invented numbers.
- Product footage is the real product, unrecolored, with no real customer data.
- Videos have captions, a title card and an end card, and are exported at the size for their destination.