29 · Combination / Lockup
A complete Combination / Lockup brand kit, composed by Brandwright for the fictional brand Northbeam — every asset below comes from one brief. Read-only; start your own to refine any part.
brand kit · essential set
Northbeam /
The generative core: brief, logo family, palette, typography. Click any filled asset to see all versions.
⚠️ AI-generated — review and refine before shipping. The marks are extracted to SVG/PNG by an AI pipeline, so small imperfections (a stray tone, a slightly-off path, an occasional mis-cropped detail) are possible. Anything off is editable, or just ask the agent to re-generate it.
Strategy
A product-analytics platform for growth teams — a crisp geometric symbol + wordmark that splits into an app icon.
- Industry
- a product-analytics platform
Art direction
flat vector · combination mark · cool/vivid/light
Imagery & illustration: flat vector style.
Ask Brandwright to set an audience and a mission to round out the strategy.
Cohesion4/4
Does the identity read as one system? A structural check across voice, art direction, and the mark set.
- met:
Unified personality
one personality drives both voice and visuals
- met:
Art direction set
medium + mark type fixed for the whole brand
- met:
Complete mark system
5/5 logo marks extracted from one brief
- met:
Type pairing set
heading + body chosen as a pair
00
the locked source every asset comes fromLocked brief
The single 16:9 composed source image. Every logo, color, and typeface below is extracted from it — change the brief and the whole kit follows.
1536×1024
.png
versions
brief.png01
5 marks · SVG master + PNG rasterLogo family
bg
mark
1024²
.svg + .png
versions
logos/primary
1024²
.svg + .png
versions
logos/secondary
1024²
.svg + .png
versions
logos/letter-mark
1024²
composed.png
options
logos/app-icon
2048×512
.svg
versions
logos/wordmark◧
every size a browser or OS asks for — and what each is forFavicons & app icons
Browser tab
A simplified mark that stays clear in a tiny browser tab. Ask Brandwright to extract the favicon for a purpose-built one.
Northbeam×App & home screencomposed
The app-icon tile, sized for iOS, Android & PWA installs.
the maskable icon keeps a safe zone, so any mask (circle/squircle) can’t clip the mark
★
the identity applied — product UI + social cardBrand in use
theme
northbeam.com
NorthbeamProductPricingGet started
Welcome to Northbeam
The identity applied to a product surface — mark, type, and palette working as one system.
Primary actionSecondary
1200 × 630
social/og-image.pngsocial/ as the brand lockup on the surface color.02
one signature graphic · desktop 16:9 + mobile 4:5Key visual
03
6 rolesColor palette
#2F55F4Brand Blue
#47CDC5Aqua Teal
#FFFFFFWhite
#F5F7FBSoft White
#061A42Deep Navy
#7FA0FFPeriwinkle
These colors are easy to read.
“Contrast” is how clearly text stands out from the color behind it. When it’s too low, text gets hard to read — especially for people with weaker eyesight or on a bright screen. Every text-and-background combination here has plenty of it.
Contrast auditall pass WCAG 2.1 AA
- text on surfaceAAA15.86:1
- text on neutralAAA17.02:1
- black on primaryalternate3.73:1
- white on primary✓ use this5.64:1
| Pairing | Ratio | Result | Suggested fix |
|---|---|---|---|
| text on surface | 15.86:1 | AAA | — |
| text on neutral | 17.02:1 | AAA | — |
| black on primary | 3.73:1 | alternate | — |
| white on primary | 5.64:1 | ✓ use this | — |
This kit targets WCAG 2.1 AA: every key text/background pairing above is validated and any failure is flagged with a suggested fix. Floor 4.5:1 normal text, 3:1 large. Color is never the only signal.
04
heading + bodyTypography
heading
Satoshi
custom / self-hosted
body
Inter
Google Fonts
pairing in use
Northbeam — a headline in the brand face
Body copy set in Inter. Tuned for legibility at length — the quick brown fox jumps over the lazy dog. 0123456789.
Heading carries the brand’s personality; body is chosen for legibility at small sizes and long form.
05
your palette applied — light & darkTheme
your palette as a light & dark UI theme
Aa — headline
Body copy on the light surface. Muted secondary text.
PrimaryAccentNeutral
Aa — headline
Body copy on the dark surface. Muted secondary text.
PrimaryAccentNeutral
The dark set is derived from your palette and ships ready to use in the kit. For developers: color.dark.* in tokens.json, and @media (prefers-color-scheme: dark) in globals.css.
07
Voice Guide · bundled into the kit zipVoice
Personality
Funny
Serious
Northbeam handles business-critical product decisions, so the voice should be serious and focused, with little room for jokes.
Formal
Casual
The brand should sound professional and precise, but still plainspoken enough for fast-moving growth teams.
Respectful
Irreverent
Analytics copy must respect the user’s data, time, and decision pressure; irreverence would weaken trust.
Enthusiastic
Matter-of-fact
Northbeam should feel confident and momentum-building, but its credibility comes from measured, evidence-based language.
Clear like a beam
Use precise, plain language that points teams to the next insight or action. No haze, no filler, no over-explaining.
“See where activation drops, what changed, and which segment to inspect next.”
Analytical, not academic
Sound data-literate and rigorous without drifting into jargon, theory, or dashboard-speak.
“Revenue is up 12%, but repeat usage is flat. Start with returning users in your highest-spend cohort.”
Calmly decisive
Lead with confident recommendations and clear hierarchy. Avoid hype, hedging, or alarmist language.
“This change is statistically meaningful. Promote the variant to 100% when you’re ready.”
Built for momentum
Keep copy concise, action-oriented, and oriented around progress: finding, comparing, testing, learning, and shipping.
“Find the drop-off. Compare the cohorts. Ship the next test.”
Human in the details
Acknowledge the user’s task and context without becoming chatty. Be helpful, never cute.
“No matching events yet. Check the event name, date range, or applied filters.”
Messaging
- Audience
- Growth, product, analytics, and lifecycle teams at digital products who need to understand user behavior, identify conversion and retention opportunities, and make faster product decisions.
- Value
- Northbeam turns product behavior into clear, decision-ready insights so growth teams can find what matters and act faster.
Pillars
Signal over noise
Northbeam helps teams isolate the metrics, segments, and behavior changes that actually matter—without getting lost in dashboards.
Built for growth motion
Funnels, cohorts, experiments, and retention views are designed around the questions growth teams ask every day.
Fast path from question to action
Clear analysis, guided comparisons, and focused recommendations reduce the time between spotting an issue and shipping the next move.
Confidence teams can share
Northbeam gives product, growth, and analytics teams a common view of what changed, why it matters, and where to focus next.
Words we use
signalclaritygrowth teamsproduct analyticsactivationretentionconversioncohortsfunnelssegmentsexperimentsinsightsnext movedrop-offsource of truthdecision-readymeasure what mattersfrom question to actionfind the patterncompare performanceship with confidence
Words we avoid
synergyleverage best-in-class solutionsunlock your full potentialgame-changingrevolutionaryinsane growthcrush your metricsmagiceffortless insightsdata-driven culture transformationone weird trickjustobviouslyoopsieuh-ohblast offsupercharge everythingdisruptsingle pane of glass
Voice in action
- hero-headlineWe say: Product analytics for growth teams that need a clearer signal.We don’t say: Unlock powerful product analytics to supercharge your growth strategy.
- hero-headlineWe say: See Northbeam in actionWe don’t say: Get started today
- empty-stateWe say: No product events yet. Connect a source or send your first event to start mapping user behavior.We don’t say: There’s nothing here yet. Add data to get started.
- notificationWe say: Activation dropped 8% this week, driven mostly by new users on mobile.We don’t say: Your activation funnel has changed since the last reporting period.
- onboarding-welcomeWe say: Compare cohorts to see how behavior changes by signup date, plan, channel, or experiment group.We don’t say: Cohort analysis helps you evaluate different groups of users over time.
- successWe say: Segment is connected. Northbeam will start processing new events now.We don’t say: Success! Your integration has been successfully completed.
- errorWe say: We couldn’t sync the last 2 hours of events from Stripe. Your existing data is safe. Retry the sync or check the connection.We don’t say: Something went wrong while syncing your data. Please try again later.
- notificationWe say: Variant B increased trial starts by 14%. The result is significant at 95% confidence.We don’t say: Variant B is performing better and may be a good option to roll out.
- hero-headlineWe say: Plans that scale with your data volume, team size, and growth motion.We don’t say: Flexible pricing for teams of all shapes and sizes.
- onboarding-welcomeWe say: Use this guide to send clean events into Northbeam and keep your analysis trustworthy from day one.We don’t say: This article will walk you through the process of setting up event tracking in our platform.
| Surface | ✓ We say | ✕ We don’t |
|---|---|---|
| hero-headline | Product analytics for growth teams that need a clearer signal. | Unlock powerful product analytics to supercharge your growth strategy. |
| hero-headline | See Northbeam in action | Get started today |
| empty-state | No product events yet. Connect a source or send your first event to start mapping user behavior. | There’s nothing here yet. Add data to get started. |
| notification | Activation dropped 8% this week, driven mostly by new users on mobile. | Your activation funnel has changed since the last reporting period. |
| onboarding-welcome | Compare cohorts to see how behavior changes by signup date, plan, channel, or experiment group. | Cohort analysis helps you evaluate different groups of users over time. |
| success | Segment is connected. Northbeam will start processing new events now. | Success! Your integration has been successfully completed. |
| error | We couldn’t sync the last 2 hours of events from Stripe. Your existing data is safe. Retry the sync or check the connection. | Something went wrong while syncing your data. Please try again later. |
| notification | Variant B increased trial starts by 14%. The result is significant at 95% confidence. | Variant B is performing better and may be a good option to roll out. |
| hero-headline | Plans that scale with your data volume, team size, and growth motion. | Flexible pricing for teams of all shapes and sizes. |
| onboarding-welcome | Use this guide to send clean events into Northbeam and keep your analysis trustworthy from day one. | This article will walk you through the process of setting up event tracking in our platform. |
Start from this direction.
A distinctive symbol locked with a clean wordmark, designed so the icon detaches for favicons and app icons while the wordmark stands alone — the flexible digital-first default for product brands. Start here and refine the full system around your brief.