23 · Spectral Gradient
A complete Spectral Gradient brand kit, composed by Brandwright for the fictional brand Cadence — every asset below comes from one brief. Read-only; start your own to refine any part.
brand kit · essential set
Cadence /
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
Cadence is payments infrastructure that gets out of a developer's way — fast, exact APIs for moving money.
- Industry
- payments infrastructure
Art direction
type-only · wordmark-only mark · cool/vivid/light
Imagery & illustration: type-only 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
3/3 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
3 marks · SVG master + PNG rasterLogo family
bg
mark
◧
every size a browser or OS asks for — and what each is forFavicons & app icons
Browser tab
A purpose-built mark distilled from your logo marks to stay clear in a tiny browser tab.
Cadence×1024²
.png
versions
favicons/faviconApp & 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
cadence.com
CadenceProductPricingGet started
Welcome to Cadence
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.03
5 rolesColor palette
#4933F1Cadence Blue
#733DF0Violet
#F0F2FASoft White
#111827Deep Navy
#D544C7Magenta
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.87:1
- black on primaryalternate3.03:1
- white on primary✓ use this6.94:1
| Pairing | Ratio | Result | Suggested fix |
|---|---|---|---|
| text on surface | 15.87:1 | AAA | — |
| black on primary | 3.03:1 | alternate | — |
| white on primary | 6.94: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.
conic-gradient(from 90deg at 50% 50%, #4933F1 0%, #D544C7 30%, #FF6270 55%, #FF7B45 78%, #4933F1 100%)04
heading + bodyTypography
heading
Manrope
Google Fonts
body
Inter
Google Fonts
pairing in use
Cadence — 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
Money movement requires trust, clarity, and operational seriousness; humor would reduce confidence in critical flows.
Formal
Casual
Cadence should feel modern and developer-friendly, but not chatty or loose when handling payments infrastructure.
Respectful
Irreverent
Developers and operators need direct respect for their time, systems, and risk—not attitude or cleverness.
Enthusiastic
Matter-of-fact
The brand should convey momentum, but the safest posture is precise, calm, and grounded in what the APIs actually do.
Exact
Use precise language, concrete nouns, and specific outcomes. Say what happens, when, and why. Avoid vague claims or inflated promises.
“Create a transfer with one request. Cadence validates the destination, submits the payment, and returns a traceable status.”
Low-friction
Sound streamlined and useful. Remove verbal clutter the same way the product removes integration clutter.
“Send funds in minutes, not sprints.”
Developer-native
Speak to technical builders with respect. Use API-first language, clear implementation detail, and no hand-holding where none is needed.
“Use idempotency keys to retry safely without creating duplicate transfers.”
Calm under load
Stay composed, especially around errors, risk, money movement, and incidents. Be direct, accountable, and never dramatic.
“Transfer pending. The receiving bank has not confirmed settlement yet. We’ll update the status automatically.”
Momentum-focused
Emphasize forward motion: build, launch, move, settle, reconcile. Keep the pace brisk without sounding rushed.
“Keep money moving while your team keeps shipping.”
Messaging
- Audience
- Developers, product teams, platform engineers, fintech operators, and technical founders building products that need to move, track, and reconcile money.
- Value
- Cadence gives developers fast, exact APIs for moving money without dragging payments complexity into the product roadmap.
Pillars
Fast to integrate
Clear APIs, predictable responses, and practical docs help teams go from first request to production payment quickly.
Exact by design
Cadence makes payment states, validation, retries, and reconciliation explicit so teams can build with confidence.
Built for developers
The product speaks the language of modern engineering teams: endpoints, webhooks, idempotency, test environments, and operational visibility.
Quietly reliable
Cadence handles the heavy operational work behind money movement while staying out of the interface, workflow, and user experience.
Words we use
APIendpointrequestresponsetransferpayoutpaymentmoney movementsettlementreconciliationledgerstatuswebhookidempotencytraceableexactfastreliableshipbuildlaunchmove moneyproduction-readydeveloper-firstlow-lift integrationclear payment statesretry safelyoperational visibility
Words we avoid
seamlessfrictionlessrevolutionarydisruptivemagicaleffortlessbest-in-classnext-genworld-classunlock financial freedomsuperchargegame-changingdelightful paymentsdemocratize moneysimple as pieoopsuh-ohno worriesjustobviouslyeasy buttonbank-grade without explanationinstant when settlement is not guaranteed
Voice in action
- hero-headlineWe say: Move money with APIs that stay out of your way.We don’t say: A seamless payments platform for the next generation of digital businesses.
- hero-headlineWe say: Cadence gives developers fast, exact endpoints for transfers, payouts, statuses, and reconciliation.We don’t say: Our robust solution empowers companies to manage payment workflows at scale.
- not-foundWe say: Create a transfer by sending the amount, currency, source, and destination. Cadence returns the transfer status in the response and sends updates by webhook.We don’t say: This guide will walk you through how to leverage our transfer functionality to initiate a payment transaction.
- errorWe say: Transfer not created. The destination account is missing a routing number. Add `routing_number` and retry the request.We don’t say: We were unable to process your transfer request due to invalid account information.
- empty-stateWe say: No transfers yet. Create one with the API or use test mode to send your first request.We don’t say: You don’t have any activity here yet. Once you start using Cadence, your transactions will appear in this area.
- onboarding-welcomeWe say: Connect your account, create an API key, and send a test transfer. Most teams finish setup in under 30 minutes.We don’t say: Let’s get your workspace configured so you can begin taking advantage of everything Cadence has to offer.
- successWe say: Test transfer created. Status: pending.We don’t say: Success! Your transaction has been submitted successfully.
- successWe say: Webhook saved. Cadence will send transfer status updates to this endpoint.We don’t say: Your webhook configuration has been updated and will now receive notifications.
- errorWe say: Verification required before live transfers. Submit business details to finish account review.We don’t say: Your account is currently restricted. Please complete all required compliance steps to proceed.
- errorWe say: Some ACH transfers are delayed. Card payouts and API authentication are unaffected. We’re working with our banking partner and will post the next update by 14:30 UTC.We don’t say: We are currently experiencing degraded performance with certain payment services and are investigating the issue.
- hero-headlineWe say: Talk to an engineer about your payment flow.We don’t say: Contact sales to unlock custom enterprise pricing.
| Surface | ✓ We say | ✕ We don’t |
|---|---|---|
| hero-headline | Move money with APIs that stay out of your way. | A seamless payments platform for the next generation of digital businesses. |
| hero-headline | Cadence gives developers fast, exact endpoints for transfers, payouts, statuses, and reconciliation. | Our robust solution empowers companies to manage payment workflows at scale. |
| not-found | Create a transfer by sending the amount, currency, source, and destination. Cadence returns the transfer status in the response and sends updates by webhook. | This guide will walk you through how to leverage our transfer functionality to initiate a payment transaction. |
| error | Transfer not created. The destination account is missing a routing number. Add `routing_number` and retry the request. | We were unable to process your transfer request due to invalid account information. |
| empty-state | No transfers yet. Create one with the API or use test mode to send your first request. | You don’t have any activity here yet. Once you start using Cadence, your transactions will appear in this area. |
| onboarding-welcome | Connect your account, create an API key, and send a test transfer. Most teams finish setup in under 30 minutes. | Let’s get your workspace configured so you can begin taking advantage of everything Cadence has to offer. |
| success | Test transfer created. Status: pending. | Success! Your transaction has been submitted successfully. |
| success | Webhook saved. Cadence will send transfer status updates to this endpoint. | Your webhook configuration has been updated and will now receive notifications. |
| error | Verification required before live transfers. Submit business details to finish account review. | Your account is currently restricted. Please complete all required compliance steps to proceed. |
| error | Some ACH transfers are delayed. Card payouts and API authentication are unaffected. We’re working with our banking partner and will post the next update by 14:30 UTC. | We are currently experiencing degraded performance with certain payment services and are investigating the issue. |
| hero-headline | Talk to an engineer about your payment flow. | Contact sales to unlock custom enterprise pricing. |
Start from this direction.
A precise geometric wordmark lifted by an iridescent violet-to-coral gradient over generous white space. Calm, exact, and premium — the modern fintech and developer-tools look. Example: Cadence, a payments platform. Start here and refine the full system around your brief.