<!-- Generated by ExtractVibe — https://extractvibe.com/brand/b3os.org -->
<!-- Extracted: 2026-04-26T12:17:44.518Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "B3OS — Workflow Automation for Blockchain Operations | B3OS"
description: "B3OS projects a vibe of sophisticated, high-performance utility, blending a serious, technical approach with an enthusiastic and forward-thinking outlook. It's designed for professionals who demand reliability and cutting-edge solutions in the complex blockchain space."
colors:
  primary: "#0c11ff"
  secondary: "#f4f4f5"
  tertiary: "#2f43ff"
  neutral: "#fafafa"
  surface: "#ffffff"
  on-surface: "#ffffff"
  on-surface-secondary: "#52525b"
  border: "#991b1b"
  link: "#1a1d1f"
  error: "#fef3f2"
  warning: "#fff7ed"
  success: "#f0fdf4"
  info: "#eef0ff"
  surface-dark: "#1a1d1f"
typography:
  display-lg:
    fontFamily: "Geist"
    fontSize: "72px"
    fontWeight: "500"
    lineHeight: "72px"
    letterSpacing: "-1.44px"
  headline-lg:
    fontFamily: "Geist"
    fontSize: "48px"
    fontWeight: "500"
    lineHeight: "48px"
    letterSpacing: "-0.96px"
  headline-md:
    fontFamily: "Geist"
    fontSize: "24px"
    fontWeight: "500"
    lineHeight: "28.8px"
  body-md:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "4px"
  md: "8px"
  lg: "22px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#3f3f46"
    rounded: "8px"
    padding: "6px 12px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#e4e4e7"
    borderWidth: "1px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(23, 22, 25, 0.05) 0px 1px 2px 0px"
  button-outline:
    textColor: "#3f3f46"
    rounded: "8px"
    padding: "6px 6px 6px 12px"
    fontSize: "16px"
    fontWeight: "500"
    borderWidth: "1px"
---

# B3OS — Workflow Automation for Blockchain Operations | B3OS — Design System

## Overview

B3OS design embodies a sophisticated, high-performance utility, aligning with the archetypes of The Magician and The Sage. Our aesthetic is technical, efficient, and innovative, mirroring the precision and forward-thinking approach of brands like Vercel, Supabase, Stripe, and Linear. We prioritize clarity, reliability, and a streamlined user experience, ensuring that every interaction reflects the serious and professional nature of blockchain operations. The design system is engineered to support complex workflows with intuitive interfaces, providing a seamless and powerful environment for our users.

This design is not playful, decorative, or overly ornate. It avoids gradients, skeuomorphism, or any elements that might detract from its core purpose of functional excellence. We do not incorporate whimsical illustrations, bright, distracting color palettes, or informal typography. Instead, B3OS design is characterized by its sharp lines, purposeful spacing, and a minimalist approach that emphasizes content and functionality. The goal is to project an image of unwavering competence and cutting-edge capability, delivering a user experience that is as robust and reliable as the blockchain technology it manages.

**Key characteristics:**

- Vibe — technical, efficient, reliable, innovative, professional, streamlined
- Archetypes — The Magician, The Sage
- Comparable to — Vercel, Supabase, Stripe, Linear
- Design era — contemporary-functional
- Emotional tone — confident-authoritative
- Target audience — Blockchain developers, businesses leveraging blockchain, and advanced traders seeking robust, automated workflow solutions.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The B3OS color palette is intentionally minimalist, centered around a powerful primary blue (#0c11ff) and a clean surface white (#fafafa). This high-contrast pairing immediately signals professionalism, precision, and digital sophistication. The vibrant blue represents innovation and the dynamic nature of blockchain, while the pristine white ensures readability and a sense of clarity. This limited palette reinforces the brand's commitment to efficiency and focus, avoiding visual clutter to emphasize core functionality.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0c11ff` | Blue |
| secondary | `#f4f4f5` | White Smoke |
| accent / tertiary | `#2f43ff` | Royal Blue |
| surface | `#ffffff` | White |
| background | `#fafafa` | Off-White |
| text | `#ffffff` | White |
| secondary text | `#52525b` | Dark Gray |
| border | `#991b1b` | Firebrick |
| link | `#1a1d1f` | Near-Black |
| muted | `#fafafa` | Off-White |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#1a1d1f` | Near-Black |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#f0fdf4` | Confirmations, positive states |
| warning | `#fff7ed` | Caution, intermediate states |
| error | `#fef3f2` | Failures, destructive actions |
| info | `#eef0ff` | Neutral information, tips |

## Typography

B3OS exclusively utilizes Geist for all typographic elements. This choice reflects our commitment to modern technical aesthetics and optimal legibility across all digital interfaces. Geist's clean lines and robust character set ensure that complex information is presented clearly and efficiently. Typography hierarchy is established through precise variations in weight and size, maintaining a consistent visual rhythm that guides the user without distraction. This system reinforces the brand's reliable and streamlined nature, prioritizing function and clarity above all else.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Geist | body | self-hosted | 400, 500, 600 |
| Geist | heading | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Geist | 72px | 500 | 72px | -1.44px |
| Heading 2 | Geist | 48px | 500 | 48px | -0.96px |
| Heading 3 | Geist | 24px | 500 | 28.8px | — |
| Body | Geist | 16px | 400 | 24px | — |

### Conventions

- Heading case — title-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 1px 0px` |
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 23, 46, 0.05) 1px 8px 5px 0px, rgba(17, 23, 46, 0.1) 0px 3px 3px 0px, rgba(17, 23, 46, 0.1) 0px 1px 2px 0px` |
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(39, 44, 48, 0.04) 0px 29px 33px 0px` |
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 23, 46, 0.02) 1px 8px 5px 0px, rgba(17, 23, 46, 0.02) 0px 3px 4px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(23, 22, 25, 0.05) 0px 1px 2px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(23, 22, 25, 0.15) 0px 3px 4px -1px, rgba(23, 22, 25, 0.1) 0px 0px 0px 1px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.35) 0px 1px 0px 0px inset` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(23, 22, 25, 0.05) 0px 1px 2px 0px, rgba(23, 22, 25, 0.05) 0px -2px 0px 0px inset, rgb(212, 212, 216) 0px 0px 0px 1px inset` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) -5px -5px 10px 0px, rgba(23, 22, 25, 0.2) 5px 5px 20px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 4px 4px -1px inset` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 10px 21px 0px, rgba(0, 0, 0, 0.06) 0px 38px 38px 0px, rgba(0, 0, 0, 0.04) 0px 86px 52px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 23, 46, 0.1) 0px -2px 2px 0px inset` |

### Gradients

- `linear-gradient(rgb(244, 244, 245), rgb(228, 228, 231))`
- `linear-gradient(to top, rgb(63, 63, 70), rgb(82, 82, 82))`
- `linear-gradient(rgb(63, 63, 70), rgb(24, 24, 27))`
- `linear-gradient(to right, rgba(23, 22, 25, 0.1), rgba(0, 0, 0, 0))`
- `linear-gradient(rgb(47, 67, 255), rgb(12, 17, 255))`

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 8px
- `lg` — 22px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#3f3f46`
- Radius — `8px`
- Padding — `6px 12px`
- Font size — `16px`
- Font weight — `500`
- Border — `1px solid #e4e4e7`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(23, 22, 25, 0.05) 0px 1px 2px 0px`
- Sample copy — "Home"

**Outline**

- Text — `#3f3f46`
- Radius — `8px`
- Padding — `6px 6px 6px 12px`
- Font size — `16px`
- Font weight — `500`
- Sample copy — "Product"

## Do's and Don'ts

### Do

- Utilize Geist font family for all text, with Geist 500 for headings (in title-case) and Geist 400 or 500 for body text, ensuring a body line-height of 24px.
- Employ a primary color palette featuring #0c11ff (Primary), #2f43ff (Accent), and #fafafa (Background) for light mode, with #f4f4f5 as a secondary background/support color.
- Design secondary buttons with a #ffffff background, #3f3f46 text, 8px border-radius, #e4e4e7 border, and 6px 12px padding, ensuring no shadow.
- Implement outline buttons with #3f3f46 text, 8px border-radius, and 6px 6px 6px 12px padding, without a background fill.
- Apply subtle, multi-layered shadows to cards, specifically using rgba(255, 25, 25, 0.1) or similar light, diffused effects, avoiding harsh or single-layer shadows.
- Incorporate gradients sparingly for depth and texture, such as linear-gradient(rgb(244, 244, 245), rgb(228, 228, 231)) for subtle background variations.
- Maintain consistent spacing based on a 2px base unit, and apply border radii of 4px (small), 8px (medium), and 22px (large) for elements.
- Craft copy using moderate vocabulary and heavy technical jargon, employing action-oriented, benefit-driven CTAs that sometimes suggest AI interaction, and utilize tricolons for impactful statements.

### Don't

- Avoid using emoji in any brand communication or UI elements, as the brand's voice analysis indicates none.
- Refrain from using exclamations frequently; they should be rare to maintain a serious and professional tone.
- Do not use serif fonts; the brand strictly adheres to the sans-serif Geist font family.
- Do not apply shadows to buttons; buttons should remain flat or have a subtle border as per the secondary button style.
- Avoid overly casual or playful language; maintain a serious, enthusiastic, and technical tone in all communications.
- Do not use highly saturated or overly vibrant color combinations beyond the established primary and accent blues; maintain a clean, high-contrast palette.
- Do not deviate from the specified border radii; avoid sharp 0px corners or excessively rounded, pill-shaped elements that are not 22px.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 3/10 | technical |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — action-oriented, benefit-driven, and sometimes includes AI interaction
- Rhetorical devices — tricolon

### Sample copy

> The Onchain Engine for Agentic AI

> Prompt It. Ship It. Trust It.

> Your Flows Reliable, by Design.

> Auto-sweep dust tokens into USDC. Clean treasury, zero effort.

> Build onchain apps and automations that connect wallets, smart contracts, and 2,000+ tools you already use

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | ico | [link](brands/b3os.org/logo-0.ico) | 95% |
| favicon | — | svg | [link](brands/b3os.org/logo-1.svg) | 95% |
| primary | — | svg | [link](brands/b3os.org/logo-2.svg) | 85% |
| primary | — | svg | [link](brands/b3os.org/logo-svg-3.svg) | 90% |
| primary | — | svg | [link](brands/b3os.org/logo-svg-4.svg) | 90% |

## Sources

- Live brand page — https://extractvibe.com/brand/b3os.org
- Raw JSON — https://extractvibe.com/api/brand/b3os.org
- DESIGN.md (this file) — https://extractvibe.com/api/brand/b3os.org/design.md
- Extracted — 2026-04-26T12:17:44.518Z
- Generator — ExtractVibe vv1
- Quality score — 90/100