Alternate Futures Brand Guide

The visual identity system for the decentralized cloud

This is the visual identity reference for all Alternate Futures properties. Every public-facing design, from documentation and marketing to social media, pitch materials, and product UI, follows these specifications.

Color Palette

The AF palette is a carefully calibrated system of 7 colors. Brand Blue is the dominant identity color and should appear on every composition. The remaining colors serve specific functional and emotional roles.

Primary Colors

Brand Blue

#000AFF

RGB: 0, 10, 255

HSL: 238, 100%, 50%

Primary identity color. Buttons, links, CTAs, hero backgrounds, accents. Must appear on every composition.

Dark Blue

#0000AF

RGB: 0, 0, 175

HSL: 240, 100%, 34%

Dark mode backgrounds, footer, emphasis blocks, immersive sections. Never use for body text.

Terracotta

#BE4200

RGB: 190, 66, 0

HSL: 21, 100%, 37%

Warnings, urgency, cost emphasis, competitor comparisons. The "attention" color.

Secondary Colors

Cream / Off-White

#F9F5EE

RGB: 249, 245, 238

HSL: 38, 48%, 95%

Light mode page backgrounds. The warm foundation of the brand. Never use pure white #FFF.

Medium Blue

#A5B2FF

RGB: 165, 178, 255

HSL: 231, 100%, 82%

Dark mode primary interactive color. Secondary hover states. Lighter blue accents.

Apricot

#FFC7AA

RGB: 255, 199, 170

HSL: 20, 100%, 83%

Warm accents, code language tags, badges, dark mode accent color. Welcoming and approachable.

Sky

#C8E0E4

RGB: 200, 224, 228

HSL: 189, 34%, 84%

Tips, info callouts, feature card backgrounds, data visualization, charts.

Color Combinations

These are the approved color pairings. Every design should use one of these combinations as its foundation.

Brand Blue + WhiteHero, CTA

Cream + Dark BlueDefault pages

Dark Blue + Medium BlueDark mode

Dark Blue + ApricotDark accent

Cream + TerracottaWarnings

Brand Blue + ApricotWarm hero

CSS Variables Reference

Use these variables in all web properties:

:root {
  /* Primary */
  --af-brand-blue: #000AFF;
  --af-dark-blue: #0000AF;
  --af-terracotta: #BE4200;

  /* Secondary */
  --af-cream: #F9F5EE;
  --af-medium-blue: #A5B2FF;
  --af-apricot: #FFC7AA;
  --af-sky: #C8E0E4;

  /* Hover states */
  --af-brand-blue-hover: #0008CC;
  --af-brand-blue-pressed: #0006A6;

  /* HSL equivalents */
  --af-brand-blue-hsl: 240, 100%, 50%;
  --af-dark-blue-hsl: 240, 100%, 34%;
  --af-medium-blue-hsl: 231, 100%, 82%;
  --af-terracotta-hsl: 21, 100%, 37%;
}

IMPORTANT: The correct Brand Blue is #000AFF

Do NOT use #0026FF (hue 232). The correct hue is 240 (pure blue), not 232 (blue-violet). The 8-degree shift is visible and off-brand. Always verify the hex value when implementing.

Typography

The AF type system uses three typefaces, each with a distinct role. Consistency in font usage is critical to brand recognition.

Instrument Sans -- Primary

The workhorse typeface. Used for all body text, headings, navigation, buttons, and UI elements.

Instrument Sans -- Regular 400 / Medium 500 / SemiBold 600 / Bold 700

Deploy to the decentralized cloud

Alternate Futures provides IPFS, Filecoin, and Arweave hosting with serverless functions and AI agent deployment. Build the future with infrastructure that belongs to no one and everyone.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Usage: All headings (h1-h6), body paragraphs, navigation items, button labels, form fields, table text, sidebar content, breadcrumbs.

Import: Already loaded via Adobe Typekit (use.typekit.net/qqp2xqh.css)

Instrument Serif -- Accent

The elegant contrast. Used sparingly for taglines, pull quotes, and italic emphasis to add sophistication.

Instrument Serif -- Regular 400 / Italic 400i

Infrastructure that flows, not locks

"We picked up where the Web3 hosting pioneers left off. True decentralization means your data is never held hostage by a single provider."

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Usage: Hero taglines, blockquotes, pull quotes, sidebar section titles, testimonial attribution. Never use for body text or UI elements.

Import: Google Fonts (family=Instrument+Serif:ital@0;1)

JetBrains Mono -- Code

The developer typeface. Every code block, inline code reference, terminal output, and technical specification uses JetBrains Mono.

JetBrains Mono -- Regular 400 / Medium 500 / SemiBold 600 / Bold 700

af deploy --network ipfs

const af = new AlternateFuturesSdk({
  accessTokenService: new PersonalAccessTokenService({
    personalAccessToken: process.env.AF_TOKEN,
  }),
});

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 => !== {} [] () // /* */

Usage: Code blocks, inline code, terminal commands, API references, file paths, hex values, technical labels.

Import: Google Fonts (family=JetBrains+Mono:wght@400;500;600;700)

Type Scale

The size scale used across all AF properties. Sizes shown in rem relative to a 16px base.

6rem / 96pxDisplay

3rem / 48pxPage Title (H1)

2rem / 32pxSection Heading (H2)

1.5rem / 24pxSubsection (H3)

1.125remDetail Heading (H4)

1rem / 16pxBody text at the standard reading size

0.875remCode blocks and technical content

0.75remCaptions, labels, metadata

Geometric Elements

The AF geometric system is the visual language that makes our brand unmistakable. Stars, circles, rings, and waves are used as decorative elements across all materials. The full SVG library contains 129 assets in 7 brand colors at 4 sizes.

Stars

Four-pointed stars represent discovery, achievement, and the expansive nature of decentralized infrastructure. Scatter 3-5 stars per composition at mixed sizes. Never center them symmetrically.

star-small
brand-blue

star-small
terracotta

star-small
apricot

star-small
off-white

star-small
medium-blue

star-small
sky

star-small
dark-blue

star-medium
brand-blue

star-medium
terracotta

star-medium
apricot

star-large
brand-blue

star-xl
brand-blue

Circles

Solid filled circles represent completeness, ROI, and unity. Use for bullet markers, data points, and small decorative fills.

circle-small
brand-blue

circle-small
sky

circle-small
apricot

circle-medium
brand-blue

circle-medium
sky

circle-large
brand-blue

circle-xl
brand-blue

Rings

Open rings (stroke-only circles) represent networks, connections, and decentralized infrastructure. Use for corner decorations and network visualizations.

ring-small
brand-blue

ring-small
apricot

ring-medium
brand-blue

ring-medium
medium-blue

ring-large
brand-blue

ring-large
terracotta

ring-xl
brand-blue

Waves

Full-width wave shapes serve as section dividers, footer decorations, and background textures. Available at solid, 10%, 20%, and 30% opacity in all 7 brand colors.

wave-brand-blue.svg (solid) -- footer backgrounds, hero transitions

wave-brand-blue-10.svg (10% opacity) -- subtle section dividers

wave-brand-blue-20.svg (20% opacity) -- medium emphasis dividers

wave-off-white-10.svg (10% opacity on Dark Blue) -- dark mode dividers

wave-off-white.svg (solid on Dark Blue) -- dark mode section transitions

Decorative Compositions

Pre-composed groups of stars, circles, and rings for use as hero decorations and section accents. Three color temperature variants: brand (blue-dominant), cool (blue + sky), and warm (terracotta + apricot).

decorative-medium-brand

decorative-medium-cool

decorative-medium-warm

decorative-large-brand

Element Usage Rules

Rule	Description
Max 2 element types	Never use more than 2 geometric types (e.g., stars + rings) in a single composition
Asymmetric placement	Stars must be scattered asymmetrically. Never center or arrange them in a grid
3-5 stars per composition	Mix sizes (S + M, or S + L). Never use all the same size
Rings in corners	Rings work best as corner decorations, partially cropped by the frame
Waves as dividers	Waves always span the full width. Use 10% opacity for subtle, solid for strong
Circles as accents	Small circles for bullet points and data markers. Never as primary decoration
Opacity range	Decorative elements at 6-30% opacity on light backgrounds. 8-20% on dark backgrounds

Logo Usage

The AF logo exists in two forms: the logomark ("AF" monogram) and the wordmark (full "AlternateFutures" text). Both use var(--fill-0, #000AFF) for theme-aware rendering.

Logo Variants

Logomark on Cream

Logomark on Brand Blue

Logomark on Dark Blue

Full Wordmark on Cream

Full Wordmark on Brand Blue

Full Wordmark on Dark

Clear Space

The minimum clear space around the logo is equal to the height of the "F" in the logomark. No text, images, or other design elements should intrude into this space.

1x height of "F"1x1x1x

Minimum Size

Logomark: Minimum 24px wide (digital), 10mm (print)
Wordmark: Minimum 120px wide (digital), 40mm (print)
Below these sizes, the letterforms become illegible

Approved Backgrounds

The logo may be placed on:

Background	Logo Color	Notes
Cream `#F9F5EE`	Brand Blue `#000AFF`	Default / primary usage
White `#FFFFFF`	Brand Blue `#000AFF`	Acceptable for partner co-branding
Brand Blue `#000AFF`	White `#FFFFFF`	Hero sections, branded materials
Dark Blue `#0000AF`	White `#FFFFFF`	Dark mode, footer
Black `#0A0A0A`	White `#FFFFFF`	Dark mode only

Logo Prohibitions

Never apply drop shadows, glows, outlines, or bevels to the logo
Never rotate, skew, stretch, or compress the logo
Never place the logo on busy photographic backgrounds
Never change the logo colors to non-brand colors
Never rearrange or separate the "A" and "F" letterforms
Never use the old #0026FF color in the logo

Brand Voice & Tone

The AF brand voice is how we sound in every written communication -- docs, blog posts, social media, support conversations, and investor materials. It should feel like a conversation with a technically brilliant friend who respects your time.

Voice Traits

Technical but Accessible

We write for developers but never assume everyone has the same background. Explain concepts when they first appear. Provide runnable examples, not just theory.

Confident, Not Arrogant

We are proud of what we have built but honest about what is still in progress. "We are building the future of cloud" -- not "we are better than everyone."

Honest About Limitations

If a feature is in beta, say so. If there is a known issue, document it. Developers trust transparent platforms. They abandon ones that hide problems.

Developer-to-Developer

Write as one builder to another. Skip the corporate voice. Use "you" and "we." Show the actual terminal output. Include error messages and how to fix them.

Warm, Not Corporate

Our cream backgrounds and apricot accents are not decorative -- they signal that this platform welcomes you. The voice should match: helpful, patient, and human.

Precise and Scannable

Developers scan, then read. Lead with the answer. Use bullet points for lists. Put commands in code blocks. Make every paragraph earn its place.

Tone Spectrum

The same voice can shift tone depending on context:

Context	Tone	Example
Documentation	Instructional, precise, neutral	"Run `af deploy` to push your site to IPFS. The CLI will return a CID and preview URL."
Blog posts	Conversational, informative	"We shipped a big update this week -- here is what changed and why it matters for your workflow."
Error messages	Helpful, never blaming	"Deployment failed: the build command exited with code 1. Check your package.json scripts."
Social media	Energetic, concise	"60% cheaper than Vercel. Same features. Decentralized infrastructure. Your margins intact."
Investor materials	Confident, data-driven	"The Web3 hosting market lost its two largest players in 2025. AF captured the vacuum."
Community/Discord	Casual, supportive	"Good question! That is a known issue in v0.9.2 -- here is the workaround until the fix ships."

Terminology

Always use these standard terms:

Term	Usage	Avoid
Alternate Futures	Full company name (first mention in any document)	"Alt Futures", "AltFut", "A.F."
AF	Acceptable abbreviation after first mention	Any other abbreviation
deploy	Lowercase verb for the deployment action	"push", "ship", "launch" (in technical docs)
site	A static website deployment	"app" (when referring to static hosting)
function	A serverless cloud function	"lambda", "endpoint"
agent	An AI agent deployment	"bot", "model" (when referring to hosted agents)
decentralized	Preferred. Describes the infrastructure model	"distributed" (unless technically accurate)

Do's and Don'ts

Color Usage

Use Brand Blue #000AFF as the primary accent on every page and composition. It is the anchor of the visual system.

DON'T

Use #0026FF, #0000FF, or any other blue as a substitute. The 8-degree hue shift between 232 and 240 is visible and off-brand.

Use Cream #F9F5EE as the light mode background. The warm tone is a core part of the brand identity.

DON'T

Use pure white #FFFFFF as a page background. It looks sterile and clashes with the warm palette. White is only for text on dark surfaces.

Use Terracotta exclusively for warnings and urgency. It signals "pay attention" within the palette hierarchy.

DON'T

Use Terracotta for primary buttons, headers, or decorative elements. It is not an accent color -- it is the alert color.

Typography

Use Instrument Serif only for taglines, blockquotes, and pull quotes. It provides elegant contrast at specific moments.

DON'T

Use Instrument Serif for body text, navigation, buttons, or form fields. The serif font is an accent, not a workhorse.

Use JetBrains Mono for all code. Enable ligatures (font-feature-settings: 'liga' 1, 'calt' 1) for enhanced readability.

DON'T

Fall back to system monospace fonts like Menlo, Monaco, or Courier. JetBrains Mono is part of the brand experience.

Geometric Elements

Scatter stars asymmetrically at mixed sizes (3-5 per composition). The organic randomness creates visual energy.

DON'T

Arrange geometric elements in a grid, line them up symmetrically, or center them. That kills the dynamic, organic quality of the brand.

Use max 2 geometric element types per composition (e.g., stars + rings, or waves + circles). Restraint creates elegance.

DON'T

Mix stars, circles, rings, and waves all at once. More than 2 types creates visual noise, not visual identity.

Use only SVGs from the approved asset library (/brand/ directory). These are precision-crafted to the brand specifications.

DON'T

Create custom geometric elements, use emoji as visual substitutes, or source shapes from icon libraries. The brand shapes are not generic.

Voice and Content

Position Akash, IPFS, Filecoin, Arweave, and ICP as valued infrastructure partners. Their strength is our strength.

DON'T

Criticize, compare negatively, or dismiss any decentralized infrastructure partner. We are building on top of their work.

Acknowledge beta status, known issues, and work-in-progress features explicitly. Developers trust transparency.

DON'T

Overstate capabilities, claim production-readiness before it is true, or use superlatives like "the best" or "the most powerful."

Show real CLI output, actual error messages, and working code examples. Developers verify claims by trying them.

DON'T

Use stock photography, generic illustrations, or AI-generated images that don't match the geometric brand system.

Photography and Imagery

Use abstract geometric shapes from the SVG library as visual elements. The brand is built on shapes, not photos.

DON'T

Use stock photography of any kind. If a human image is absolutely required, apply a Brand Blue duotone at 30% opacity.

Dark Mode

Dark mode is not an inversion -- it is an adaptation. The brand guidelines specify Dark Blue #0000AF as the immersive background color. For extended reading (documentation), we use near-black #0A0A0A for reduced eye strain, reserving Dark Blue for footer, hero, and emphasis sections.

Dark Mode Palette

Role	Light Mode	Dark Mode
Page background	Cream `#F9F5EE`	Near-black `#0A0A0A`
Card/surface background	White `#FFFFFF`	Dark surface `#141414`
Primary interactive	Brand Blue `#000AFF`	Medium Blue `#A5B2FF`
Primary hover	`#0008CC`	`#B8C3FF`
Accent warm	Terracotta `#BE4200`	Apricot `#FFC7AA`
Footer / emphasis bg	Brand Blue `#000AFF`	Dark Blue `#0000AF`
Body text	Dark `#1a1a1a`	Cream `#F9F5EE`
Geometric elements	Brand Blue at 6-30% opacity	Off-White or Medium Blue at 8-20% opacity

Dark Mode Geometric Elements

All geometric brand elements need dark mode variants:

Light Mode Asset	Dark Mode Treatment
`star-*-brand-blue.svg`	Use `star-*-off-white.svg` or `filter: brightness(3)`
`ring-*-brand-blue.svg`	Apply `filter: brightness(3) saturate(0.5)`
`wave-brand-blue-*.svg`	Use `wave-off-white-*.svg`
`decorative-*-brand.svg`	Use `decorative-*-cool.svg` or apply `filter: brightness(2)`

Asset Library

Full SVG Inventory

The complete brand asset library contains 129 SVG elements organized by type:

Category	Count	Sizes	Colors
Stars	28	S (24px), M (48px), L (96px), XL (144px)	7 brand colors
Circles	28	S (24px), M (48px), L (96px), XL (144px)	7 brand colors
Rings	28	S (24px), M (48px), L (96px), XL (144px)	7 brand colors
Waves	28	Full-width (1920px)	7 colors x (solid + 10% + 20% + 30% opacity)
Decorative Groups	12	S, M, L, XL	brand, cool, warm variants
Logos	2	Logomark (35x32), Wordmark (600x139)	Theme-aware `var(--fill-0)`
Total	126 + 2 logos

File Naming Convention

{type}-{size}-{color}.svg

Where:

type: star, circle, ring, wave, decorative
size: small, medium, large, xl
color: brand-blue, dark-blue, medium-blue, terracotta, apricot, sky, off-white
opacity suffix (waves only): -10, -20, -30 (omit for solid)

Examples: star-small-brand-blue.svg, wave-terracotta-20.svg, decorative-large-warm.svg

Source of Truth

Figma file: AF-Branding-2026
SVG source directory: admin/docs/pitch-deck-assets/
Docs public assets: docs/public/brand/

Quick Reference

Brand Compliance Checklist

Use this checklist before publishing any external-facing material:

Color check: Only palette colors used? Brand Blue #000AFF present?
Typography check: Instrument Sans for body/headings? Instrument Serif for accents only? JetBrains Mono for code?
Element check: Geometric elements from approved SVG library only? Max 2 types per composition?
Logo check: Correct clear space? Correct color on correct background? No modifications?
Tone check: Developer-to-developer voice? Technical but accessible? Honest about limitations?
Partner check: Akash, IPFS, Filecoin, Arweave, ICP positioned positively?
Dark mode check: Medium Blue for primary interactive? Off-white geometric elements? Proper contrast ratios?

CSS Import Snippet

For any new web property, include these imports:

<!-- Instrument Sans (Adobe Typekit) -->
<link rel="stylesheet" href="https://use.typekit.net/qqp2xqh.css" />

<!-- Instrument Serif + JetBrains Mono (Google Fonts) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap" />

Contact

Brand questions and compliance reviews go to the Brand Guardian agent or the Creative Director (Pixel / Yusuke). For urgent brand violations, flag in the #brand-review channel.