/social-media-app-researcher

Brand & Marketing Kit Framework

The other three reference files answer "what does this app do and why does the interaction design work." This one answers a different set of questions a marketer, brand strategist, or UI/UX designer building their own product actually asks when they look at a platform: what's the visual identity system I could extract into tokens, what's the brand's voice, and what growth mechanics is this product actually running — not just what button does what.

Produce brand-marketing-kit.md alongside the other three files when the user's request has any marketing/branding/design-system angle to it (explicitly, or implicitly — "what does their brand system look like," "how do they grow their user base," "give me their color palette," "what's their tone of voice" all trigger this file even if the user never says "brand").

1. Brand Identity

• Wordmark/logotype — typeface characteristics (geometric vs humanist, weight, custom vs a known typeface), casing convention (all-lowercase, title case, all-caps), and whether the logotype appears standalone or always paired with a glyph/icon mark.
• Primary brand color(s) — not just "the accent color used on buttons" but the color the brand is recognized by (X's blue, Reddit's orange-red) — distinguish this from incidental UI accent colors when they differ, and note it explicitly when a platform has no strong single brand color (e.g. an app that's gone almost entirely grayscale/monochrome for its UI even though its logo is colorful — that gap between "logo color" and "product color" is itself a brand-strategy data point worth flagging).
• Icon style — stroke width, corner treatment (sharp vs rounded terminals), filled vs outline convention for active/inactive states, and whether icons are custom-drawn or drawn from a known open icon set (worth checking — some platforms visibly reuse a system icon library).
• Brand personality / tone — 3-5 adjectives inferable from actual observed copy (button labels, empty-state text, onboarding language, error messages) rather than guessed from the logo alone. Back each adjective with a concrete quoted example of copy that demonstrates it.
• Tagline / positioning statement — the platform's own stated one-liner for what it is and who it's for, if one is findable (app-store description, homepage headline, About page, official blog/newsroom framing). Quote it, cite it, and note if none could be found rather than inventing one.

2. Design Tokens Reference

This is the section that turns the scattered getComputedStyle() findings elsewhere in the research into something a designer can actually lift and reuse. Present it as clean tables, not prose — the whole point is that someone should be able to paste these values into a design tool or a CSS variables file without re-reading paragraphs to find them.

### Colors
| Token | Value | Role |
|---|---|---|
| bg/primary | #... | page background |
| text/primary | #... | body text |
| text/secondary | #... | muted/timestamp text |
| accent/brand | #... | primary CTA, links |
| ... | | |

### Typography
| Role | Font family | Weight | Size | Line height |
|---|---|---|---|---|
| Body | ... | ... | ...px | ...px |
| ... | | | | |

### Spacing & Shape
| Token | Value | Used on |
|---|---|---|
| radius/pill | ...px | primary buttons |
| radius/card | ...px | ... |
| ... | | |

### Motion
| Interaction | Duration | Easing | Notes |
|---|---|---|---|
| ... | ...ms | cubic-bezier(...) | |

Pull every value from the corresponding ux-ui-catalog.md research already done for this platform (or gather it fresh via the same getComputedStyle() technique from research-playbook.md if this file is being produced standalone) — never invent a token value. Where a value wasn't extractable live, mark the row "not independently verified" rather than guessing a plausible-looking number.

Machine-readable export — don't stop at the markdown table

A table a human reads is only half the job. Whenever design tokens are gathered, also emit them as real files a builder can drop straight into a project, in the platform's own subfolder:

• design-tokens.json — the canonical source, one flat object per category (color, typography, spacing, motion), each token as { "value": ..., "role"/"notes": ... }. Follow the shape of the W3C Design Tokens spec loosely (a $value key per token) so it's compatible with tools like Style Dictionary if someone wants to pipe it further — but don't over-engineer this; a clean, consistent flat JSON file matters more than strict spec compliance.
• design-tokens.css — the same tokens as CSS custom properties (:root { --color-accent-brand: #...; }), ready to @import directly.
• tailwind.tokens.js — the same tokens shaped as a Tailwind theme.extend object (colors, fontFamily, borderRadius, spacing, transitionDuration/transitionTimingFunction), ready to spread into a tailwind.config.js.

Only include a token in these exports if it has a real, sourced value — skip (don't stub with a placeholder) anything marked "not independently verified" in the markdown table, so the exported files never silently ship an invented value as if it were real.

3. Growth & Lifecycle Marketing

The mechanics a growth marketer would actually study:

• Acquisition funnel — the exact signup step sequence, what's required vs. skippable, and where friction was deliberately added or removed (e.g. a platform that front-loads interest picking vs. one that gets you into the product in two taps).
• Activation / "aha moment" — what specific action or state the product seems designed to get a new user to reach fastest (a populated feed, a first follow, a first completed profile section) — infer this from what onboarding visibly optimizes for, and say so if it's inference rather than a stated fact.
• Retention loops — which notification categories exist specifically to pull a user back in (vs. purely informational ones), and any observed re-engagement patterns ("X people posted while you were away" style digests, streak mechanics, algorithmic performance alerts).
• Referral / virality mechanics — graph-import at signup, invite flows, share-to-external incentives, anything that turns one user's presence into another user's acquisition.
• Community & content marketing posture — creator/partner programs, UGC amplification, official brand presence patterns (does the platform's own account behave like a normal user or a media brand), and any public numbers the platform has shared about its own growth (cite them).

4. Messaging & Copywriting Patterns

Short, concrete, example-backed — quote real strings observed in the product rather than paraphrasing:

• CTA button copy conventions (verb choice, length, first-person vs imperative)
• Empty-state copy style
• Gating/paywall copy (how the product asks you to sign up or upgrade)
• Error and warning copy tone
• Notification copy patterns (how grouped/algorithmic notifications are phrased)

Why this file exists separately from the others

ux-ui-catalog.md explains why a design choice works psychologically. This file exists to answer a narrower, more immediately actionable question: if I were building or rebranding a product tomorrow, what could I lift directly from this platform's system, and what marketing mechanics should I study or avoid? Keep it practical and reference-shaped, not narrative.