Brand Guidelines

Brand overview

Async Solution is a software company. The name and mark point at a specific idea: things don't have to happen in a straight line to get where they need to go. Work branches, runs in parallel, and reconnects — that's the "async" in the name, and it's the visual logic of the icon mark.

Brand pillars

• Efficient — no wasted motion, in the product or in the writing about it.
• Connected — systems, teams, and products that talk to each other cleanly.
• Unshowy confidence — the brand doesn't need to shout; the two-tone green and clean geometric mark do the work.

Logo guidelines

Five official lockups. Always use the source files — never redraw, retype, or screenshot the logo.

Full color — vertical .svg

Full color — horizontal .svg

Monochrome black .svg

Reversed (white) .svg

Powered-by lockup .svg

Icon mark — standalone .svg

Clear space

Keep clear space equal to the height of the icon mark (X) on every side of the logo. Nothing else enters this zone.

X X

Minimum size

Color system

Dev-ready tokens live in assets/color/tokens.css, tokens.scss, and tokens.json — pull from those in code rather than retyping hex values. Click any swatch below to copy its hex value.

Primary palette

Usage ratio

Green is an accent, not a wallpaper. Large flat fields of green should be rare and intentional.

Accessibility — contrast reference

Bright Green fails AA for normal text on white (needs 4.5:1). Use it for icons, large headlines, or backgrounds with white text on top — never for body copy or links. Use Deep Green for any text or link use instead.

Extended palette v1.1

The core palette covers brand expression but not a full product UI. Two additions:

Neutral gray scale — interpolated toward Ink, so gray-700 and gray-900 exactly match Charcoal and Ink.

Status colors — functional UI states only, not brand colors. All verified ≥4.5:1 on white.

Dark mode

Typography

Space Grotesk is the Async Solution typeface — in the logo wordmark and everywhere else: product UI, marketing, decks, and documentation headers.

Weight scale

Type scale

In documentation

Space Grotesk is a display/UI face, not built for dense long-form reading or code:

• Use it for titles and headings only in written docs.
• Set body paragraphs in your platform's default reading font, or Space Grotesk Regular at 16px+ with 1.5–1.6 line-height.
• Set code and commands in a monospace font — never Space Grotesk.

Iconography & imagery

The icon mark is a rounded-square glyph containing a branching node structure — a trunk splitting into nodes and reconnecting. Read literally it's a tree/circuit hybrid; conceptually it carries the "async" idea: work splits into independent branches, runs in parallel, and comes back together.

Color .svg

Black .svg

White (on dark) .svg

This is the only approved brand symbol — don't introduce a second unrelated icon as a "sub-logo." Products extend this same mark; see the product suite system below.

Product suite guidelines

Async Solution is the parent brand. Products live underneath it and inherit its color system and typography. Async Flow is the first live product built on this system — the rules below were corrected against it (see the note below the example).

Async Flow — live example

flow.asyncsandbox.com

Full color — horizontal .svg

Full color — vertical .svg

Monochrome black .svg

Reversed (white) .svg

Icon mark .svg

Async Orbit — second product

Async Orbit manages employees, documents, and company records for SMEs. Its icon carries the concept directly: an orbit ring circling a central hub, with a satellite point on the ring — the hub is the company, the ring is everything orbiting it.

Full color — horizontal .svg

Full color — vertical .svg

Monochrome black .svg

Reversed (white) .svg

Icon mark .svg

Naming pattern

Construction rules

1. Icon mark — a new symbol representing the product's concept, built in the two brand greens, inside the same rounded-square proportions as the parent icon. Not the parent's node/branch icon — that stays reserved for Async Solution itself.
2. Wordmark — "async" + product name, concatenated, lowercase, single color (Ink on light, white on dark), Space Grotesk Bold.
3. Lockups — produce full-color, monochrome black, and reversed white-on-dark for both horizontal and vertical, matching the parent's variant set.

Domains

Async Flow lives at a subdomain of a separate asyncsandbox.com domain, not the main asyncsolution.com. Treating this as the working pattern until stated otherwise:

Product accent colors

Applications

Quick reference for common situations. Full templates are in the downloadable package.

Favicon markup

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png">

Voice & tone

Three voice principles, constant everywhere: direct (say the thing in the first sentence), precise (specific over vague), calm confidence (no hype needed).

Documentation, in practice

• Second person ("you"), active voice, present tense.
• Inline code for anything the reader types or sees literally in a file/UI.
• Avoid: "simply," "just," "easy," "seamless," "revolutionary," "game-changing."

Assets & licensing

By category

Font license

Space Grotesk is licensed under the SIL Open Font License 1.1 — free for commercial use, embedding, and redistribution bundled with a product. Full text in assets/fonts/SpaceGrotesk-OFL-LICENSE.txt. No action needed for normal use.

File naming convention

async-[asset-type]-[variant]-[modifier].[ext]

async-logo-full-color-vertical.svg
async-icon-mark-color-512x512.png

Product assets:
assets/products/[product-slug]/svg/async-[product-slug]-logo-full-color-horizontal.svg
assets/products/async-flow/svg/async-flow-icon-mark-color.svg
assets/products/async-orbit/svg/async-orbit-icon-mark-color.svg

Version history