# Alphablock Design System

> High-contrast algorithmic dark mode anchored by mint-green primary actions and geometric sans-serif typography.

**Source:** https://alphablock.org | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Alphablock utilizes a "monochrome-plus-one" strategy, where a deep near-black canvas `#151515` (rendered as `#242626` in some surfaces) provides a high-contrast foundation for white text and mint-green `#6ae1ac` interactive elements. The system relies heavily on sharp `0px` corners for layout containers, contrasted by soft `3996px` pill geometry for secondary cards and specific buttons. Typography is dominated by **Montserrat** for structural headings and **Source Sans Pro** for high-legibility body content, often utilizing generous letter-spacing (up to `7.2px`) for a technical, spaced-out aesthetic. Primary CTAs are solid mint blocks, while secondary actions use thin 1px or 2px borders.

## Signature DNA
1. **Mint-on-Dark Voltage** (The use of `#6ae1ac` as the sole high-saturation color against a `#151515` background to signal "algorithmic" health and primary actions. Observed on Homepage and Pricing.)
2. **Extreme Pill vs. Absolute Sharp** (The juxtaposition of `0px` sharp-edged section containers with `3996px` ultra-rounded cards and buttons. Observed across all analyzed pages.)
3. **Source Sans Spacing** (Body and button labels in Source Sans Pro often use expanded tracking, such as `0.96px` or `7.2px`, to create a technical, data-heavy feel. Observed in hero and CTA components.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#151515` | Primary page background (dark mode) | 2 | 0.8 | computed_style |
| `{color.surface}` | `#242626` | Elevated section backgrounds | 6 | 0.6 | computed_style |
| `{color.ink.white}` | `#ffffff` | Primary text and button labels | 132 | 0.8 | computed_style |
| `{color.ink.gray}` | `#a4a4a4` | Muted secondary text | 38 | 0.8 | computed_style |
| `{color.ink.black}` | `#000000` | Text on mint surfaces | 12 | 0.8 | computed_style |
| `{color.border.muted}` | `#606060` | Subtle section dividers | 6 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#6ae1ac` | Primary CTA background and active borders | 6 | 0.6 | computed_style |
| `{color.link}` | `#0000ee` | Standard browser-style link (legacy/utility) | 33 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 600 | Display and Headings | Montserrat (Google Fonts) | OFL |
| Source Sans Pro | 400, 500 | Body, Buttons, Navigation | Source Sans Pro | OFL |
| Roboto | 500 | Component labels | Roboto | OFL |
| Arial | 400 | Utility icons/buttons | System Sans | - |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 32px | 48px | normal | 500 | Main section heads | `p.MuiTypography-body1` |
| `{type.h1.alt}` | 32px | 56px | normal | 500 | Large button labels | `button.MuiButton-outlined` |
| `{type.h2}` | 24px | 30px | 0.96px | 500 | Sub-section heads | `p.MuiTypography-body1` |
| `{type.cta.lg}` | 24px | 42px | 7.2px | 500 | Primary Hero CTA | `a.MuiButton-contained` |
| `{type.cta.md}` | 24px | 42px | normal | 500 | Standard Button | `button.MuiButton-contained` |
| `{type.body.lg}` | 18px | 27px | normal | 500 | Lead paragraph | `p.MuiTypography-body1` |
| `{type.body.md}` | 18px | 27px | normal | 400 | Default body | `div.MuiGrid-container` |
| `{type.body.sm}` | 16px | 24px | normal | 400 | Navigation / Footer | `a.active` |

### Principles
1. **Heading Weight Cap:** Headings rarely exceed weight 600; the brand relies on size and spacing rather than heavy weights.
2. **Technical Tracking:** Large CTAs use extreme letter-spacing (`7.2px`) to emphasize a machine-readable or "spaced" aesthetic.
3. **Sans-Serif Exclusivity:** No serifs are used; the brand is strictly geometric and humanist sans-serif.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 16px | 8 |
| `{space.lg}` | 24px | 6 |
| `{space.xl}` | 32px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, inputs | 190 occurrences |
| `{radius.sm}` | 4px | Form inputs, small buttons | 14 occurrences |
| `{radius.lg}` | 16px | Feature cards | 4 occurrences |
| `{radius.pill}` | 3996px | Primary CTAs, Pill cards | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state for most cards | observed on pricing cards |
| `{shadow.low}` | `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px` | Elevated surface sections | 6 occurrences |
| `{shadow.raised}` | `rgba(0, 0, 0, 0.2) 0px 3px 1px -2px...` | Primary mint buttons | 4 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Create Account")
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#6ae1ac` / Text: `#000000` / Radius: `4px` / Padding: `6px 16px` / Typography: `24px 500`
**States observed:** Default: Captured | Hover: Not captured

#### Pill Button (Outline)
**Role:** Secondary actions on dark surfaces
**Pages observed:** Homepage, Pricing
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `2px solid #6ae1ac` / Radius: `3996px` / Padding: `5px 15px`
**States observed:** Default: Captured | Active: Captured

### Tier 2: Patterns

#### Feature Card (Pill)
**Role:** Highlighting specific indices or strategies
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#2c2c2c` / Text: `#ffffff` / Radius: `3996px` / Padding: `0px` / Typography: `16px`
**States observed:** Default: Captured

#### Rounded Button (Ghost)
**Role:** Tertiary actions or navigation
**Pages observed:** Homepage, Pricing
**Spec:** Background: `rgba(255, 255, 255, 0.12)` / Text: `rgba(255, 255, 255, 0.3)` / Radius: `16px` / Padding: `9px 23px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** Main content grouping
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#151515` / Text: `#ffffff` / Radius: `0px` / Padding: `81px 142px`
**States observed:** Default: Captured

#### Input Field
**Role:** User data entry
**Pages observed:** Pricing (Log in)
**Spec:** Background: `#242626` / Border: `1px solid #606060` / Radius: `4px` / Typography: `16px Montserrat`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max content width | ~1200px |
| Section Padding | 81px (vertical) |
| Grid | Flex-based 3-column for cards |

## Do's
- Use `#6ae1ac` for primary "Get Started" or "Log In" actions only.
- Maintain `0px` border radius for all main page section containers.
- Apply `Source Sans Pro` with `7.2px` letter-spacing for high-impact hero buttons.
- Use `#242626` for surface elevation against the `#151515` canvas.
- Ensure text on mint-green buttons is `#000000` for contrast.

## Don'ts
- **Wrong:** Using `#0000ee` for primary UI buttons. **Right:** Use `#6ae1ac`. **Reason:** Blue is a legacy link color; mint is the brand's primary action signal.
- Do not use rounded corners on section dividers or the main navigation bar.
- Do not use weights above 600 for Montserrat headings.
- Do not place white text directly on a mint-green background without checking contrast (use black).

## Similar brands
- Stripe (Dark mode/Technical)
- Vercel (Monochrome/Sharp geometry)
- Linear (High-contrast/Dark UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-canvas: #151515;
  --color-primary: #6ae1ac;
  --color-surface: #242626;
  --color-text-primary: #ffffff;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Source Sans Pro', sans-serif;
  --radius-pill: 3996px;
}
```

## Known gaps
- Hover and focus states for the primary mint button were not explicitly captured in the static evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) are not documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://alphablock.org | 1440x900 | 2026-06-06 |
| Pricing | https://alphablock.org/pricing | 1440x900 | 2026-06-06 |