24 · Stark Monochrome
A complete Stark Monochrome brand kit, composed by Brandwright for the fictional brand Apex — every asset below comes from one brief. Read-only; start your own to refine any part.
brand kit · essential set
Apex /
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
Apex is edge compute that ships apps to the network's edge instantly — stark, fast, and built for engineers.
- Industry
- developer infrastructure
Art direction
geometric · abstract mark · neutral/mono/light
Imagery & illustration: geometric 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 purpose-built mark distilled from your logo marks to stay clear in a tiny browser tab.
Apex×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
apex.com
ApexProductPricingGet started
Welcome to Apex
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
6 rolesColor palette
#050609Apex Black
#E2E2E1Light Gray
#5A5B5CCharcoal Gray
#F7F7F6Soft White
#111214Near Black
#A8A9AAMid Gray
These colors are mostly easy to read — 1 to adjust.
“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. Here’s what to tweak:
- Text on neutralis a little hard to read.Try this shade instead:
#e7e7e7
Contrast audit1 text below WCAG 2.1 AA
- text on surfaceAAA17.48:1
- text on neutralfails AA2.75:1suggested fix
#e7e7e7(5.50:1) - black on primaryalternate1.04:1
- white on primary✓ use this20.26:1
| Pairing | Ratio | Result | Suggested fix |
|---|---|---|---|
| text on surface | 17.48:1 | AAA | — |
| text on neutral | 2.75:1 | fails AA | #e7e7e7(5.50:1) |
| black on primary | 1.04:1 | alternate | — |
| white on primary | 20.26: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
Apex — 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
Apex handles production infrastructure; the voice should be focused, technical, and low-noise.
Formal
Casual
It speaks like an engineer in a terminal: direct and plain, not corporate or ceremonial.
Respectful
Irreverent
Apex respects the complexity of shipping production systems and avoids snark or swagger.
Enthusiastic
Matter-of-fact
The product’s speed is strongest when stated as fact, not amplified with hype.
Stark precision
Use short, exact lines. Lead with the action, the system behavior, or the measurable outcome. Cut filler.
“Deploy once. Apex propagates your app to the edge.”
Fast without hype
Make speed feel operational, not promotional. Prefer concrete verbs like deploy, route, start, cache, propagate, and roll back.
“Push code. Apex moves it to the network edge in seconds.”
Engineer-native
Speak to builders as peers. Use accurate infrastructure terms, but avoid explaining basics unless the context is onboarding or docs.
“Bind a route, choose a runtime, ship.”
Controlled confidence
Sound certain, calm, and technical. Avoid chest-thumping, buzzwords, and overpromising.
“Your rollback is live. Traffic is back on the previous version.”
Minimal but not cold
Keep language stripped down, but never cryptic. Prioritize clarity over cleverness.
“No edge regions selected. Choose at least one region to deploy.”
Messaging
- Audience
- Backend, platform, full-stack, and infrastructure engineers who need to deploy low-latency apps close to users without managing edge complexity.
- Value
- Apex ships apps to the network edge instantly, so engineers can deploy faster and serve users with lower latency.
Pillars
Instant edge deploys
Push code once and propagate it across edge regions without custom release machinery.
Built for engineering workflows
Apex fits into CLI, API, Git, logs, config, preview, and rollback flows developers already use.
Low latency by default
Run application logic closer to users instead of routing every request back to a distant central region.
Operational control
Give teams clear deploy state, routing, versioning, observability, and rollback paths for production edge apps.
Words we use
shipdeploypushpropagateroute trafficnetwork edgeedge regionsruntimebuildrollbacklogslatencycold startconfigone commandlocal to usersproductionfast pathversionreleaseinstant deploysbuilt for engineers
Words we avoid
magicalseamlessrevolutionarygame-changingsuperchargeempowerunlock your potentialdigital transformationcloud journeydelightfuleasy-peasyblazingly fastworld-classnext-generationrobust and scalablesynergyfrictionlessfuture-proofmission-critical solution
Voice in action
- successWe say: Ship apps to the edge instantly.We don’t say: Deploy scalable applications with a modern edge computing platform.
- successWe say: Push code once. Apex propagates it across edge regions and routes traffic close to users.We don’t say: Apex helps teams build high-performance applications by leveraging distributed infrastructure around the world.
- successWe say: Deploy to the edgeWe don’t say: Get started today
- successWe say: Deployed v42 to 18 edge regions. Traffic is live.We don’t say: Success! Your deployment has been completed successfully.
- successWe say: Propagating v42 to edge regions…We don’t say: Please wait while we process your deployment request…
- errorWe say: Missing apex.json. Add a config file or run `apex init`.We don’t say: We couldn’t complete your request because some required information is missing.
- errorWe say: Route already in use: /api. Remove the existing binding or choose a new path.We don’t say: This route is unavailable. Please try again with a different configuration.
- successWe say: Use routes to send requests to an edge app by path, host, or header.We don’t say: Routing is a powerful feature that gives you flexible ways to customize how traffic flows through your applications.
- successWe say: Run `apex deploy` from the project root.We don’t say: To begin the deployment process, you’ll want to execute the deploy command from within your project directory.
- successWe say: No apps yet. Deploy your first edge app from the CLI.We don’t say: It looks like you don’t have any applications here yet. Let’s create something amazing!
- successWe say: Roll back to v41? Traffic will move off v42.We don’t say: Are you sure you want to roll back this deployment? This action may affect your users.
- errorWe say: Edge deploys in iad and fra are delayed. Running apps are serving traffic. Next update in 15 minutes.We don’t say: We are currently experiencing some issues that may impact parts of the platform. Our team is investigating.
- successWe say: Pay for edge compute you run. No platform tax on dormant apps.We don’t say: Flexible pricing designed to grow with your business.
| Surface | ✓ We say | ✕ We don’t |
|---|---|---|
| success | Ship apps to the edge instantly. | Deploy scalable applications with a modern edge computing platform. |
| success | Push code once. Apex propagates it across edge regions and routes traffic close to users. | Apex helps teams build high-performance applications by leveraging distributed infrastructure around the world. |
| success | Deploy to the edge | Get started today |
| success | Deployed v42 to 18 edge regions. Traffic is live. | Success! Your deployment has been completed successfully. |
| success | Propagating v42 to edge regions… | Please wait while we process your deployment request… |
| error | Missing apex.json. Add a config file or run `apex init`. | We couldn’t complete your request because some required information is missing. |
| error | Route already in use: /api. Remove the existing binding or choose a new path. | This route is unavailable. Please try again with a different configuration. |
| success | Use routes to send requests to an edge app by path, host, or header. | Routing is a powerful feature that gives you flexible ways to customize how traffic flows through your applications. |
| success | Run `apex deploy` from the project root. | To begin the deployment process, you’ll want to execute the deploy command from within your project directory. |
| success | No apps yet. Deploy your first edge app from the CLI. | It looks like you don’t have any applications here yet. Let’s create something amazing! |
| success | Roll back to v41? Traffic will move off v42. | Are you sure you want to roll back this deployment? This action may affect your users. |
| error | Edge deploys in iad and fra are delayed. Running apps are serving traffic. Next update in 15 minutes. | We are currently experiencing some issues that may impact parts of the platform. Our team is investigating. |
| success | Pay for edge compute you run. No platform tax on dormant apps. | Flexible pricing designed to grow with your business. |
Start from this direction.
A single pure-black abstract geometric mark on white, angular and confident, with a clean grotesque and extreme negative space. Maximum restraint for developer infrastructure and modern B2B. Example: Apex, an edge-compute platform. Start here and refine the full system around your brief.