# Vectorflow Design System

> High-contrast monochrome utility anchored by light-weight sans-serif typography on a stark achromatic canvas.

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

## TL;DR
Vectorflow utilizes a strictly monochrome palette of #000000 and #ffffff to create a high-contrast, utility-first interface. The system relies on Open Sans, specifically leveraging the 300 weight for display headings to achieve an airy, technical aesthetic. Layouts are characterized by sharp 0px corners and a consistent 20px spacing rhythm. The interface is intentionally sparse, prioritizing legibility and structural clarity over decorative elements or chromatic accents.

## Signature DNA
1. **Achromatic Extremes** (The system uses only #000000 and #ffffff for all core UI elements, creating a 21:1 contrast ratio that emphasizes functional clarity over brand "color".)
2. **Light-weight Display** (Headings use Open Sans at weight 300 for 45px display text, providing a sophisticated, technical feel that avoids the heaviness of traditional bold SaaS headers.)
3. **Sharp Geometry** (A universal 0px border radius is applied to all elements, reinforcing a precise, engineering-focused identity.)

## Family Map
No sub-brands captured in source.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | #ffffff | Primary background and text color | 6 | 0.6 | computed_style |
| `{color.ink}` | #000000 | Primary text and structural color | 3 | 0.6 | computed_style |

### Accent
No accent colors captured in source. System is monochrome.

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 100, 300, 400 | All roles (Display, Heading, Body) | N/A (Open Source) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 45px | normal | normal | 300 | Main section headings | `h2.heading.font-center` |
| `{type.title}` | 32px | normal | normal | 100 | Site title / Brand mark | `h1.site-title` |
| `{type.body}` | 16px | normal | normal | 400 | Header and general text | `header` |
| `{type.h1}` | 32px | normal | normal | 100 | Primary page headings | `h1.site-title` |
| `{type.h2}` | 45px | normal | normal | 300 | Secondary headings | `h2.heading.font-center` |
| `{type.nav}` | 16px | normal | normal | 400 | Navigation links | `header` |
| `{type.ui-small}` | 16px | normal | normal | 400 | Utility labels | `header` |
| `{type.display-light}` | 45px | normal | normal | 300 | Signature display | `h2.heading.font-center` |

### Principles
1. **Weight Contrast:** Use weight 300 for large display text and weight 400 for functional body text.
2. **Achromatic Hierarchy:** Hierarchy is established through size and weight rather than color shifts.
3. **Zero Tracking:** All typography uses "normal" letter spacing as captured in evidence.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.md}` | 20px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Universal application | 9 occurrences across all pages |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | All surfaces | No shadows captured in source |

## Components
### Tier 1: Foundational
#### Site Header
**Role:** Global navigation and brand identification.
**Pages observed:** 3
**Spec:** Background: #000000 / Text: #ffffff / Typography: `{type.body}` (16px/400)
**States observed:** Default: captured | Hover/Active: not captured

#### Brand Mark
**Role:** Primary brand identifier.
**Pages observed:** 3
**Spec:** Text: #ffffff / Typography: `{type.title}` (32px/100)
**States observed:** Default: captured

### Tier 2: Patterns
#### Maintenance Block
**Role:** Central messaging container.
**Pages observed:** 3
**Spec:** Background: #000000 / Text: #ffffff / Typography: `{type.display}` (45px/300)
**States observed:** Default: captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|---|---|
| Content Alignment | Center |
| Spacing Rhythm | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Text remains centered; font sizes scale proportionally. |

## Imagery & decoration
Vectorflow avoids all decorative imagery, gradients, and icons. The visual identity is purely typographic and achromatic.

## Do's
- Use Open Sans at weight 300 for all display headers (`{type.display}`).
- Maintain a strict #000000 or #ffffff background.
- Keep all corners at a sharp 0px radius.
- Center-align primary messaging blocks.
- Use 20px increments for layout spacing.

## Don'ts
- **Wrong:** Using a blue primary color. **Right:** Use #000000. **Reason:** Vectorflow is a monochrome parent; saturated colors are not part of the core identity.
- Do not use bold weights (>400) for headings.
- Do not introduce border-radii or rounded corners.
- Do not use drop shadows or elevation effects.
- Do not use non-achromatic colors for text or backgrounds.

## Similar brands
- Vercel (monochrome utility)
- Linear (early versions, high contrast)
- Standard Notes (minimalist utility)

## Quick start

```css
:root {
  --vf-color-canvas: #ffffff;
  --vf-color-ink: #000000;
  --vf-font-main: 'Open Sans', sans-serif;
  --vf-radius-none: 0px;
  --vf-space-base: 20px;
}
```

```javascript
// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        canvas: '#ffffff',
        ink: '#000000',
      },
      fontFamily: {
        sans: ['Open Sans', 'sans-serif'],
      },
      borderRadius: {
        none: '0px',
      },
      spacing: {
        base: '20px',
      }
    }
  }
}
```

## Agent prompt examples
- "Generate a hero section for Vectorflow using #000000 background, #ffffff Open Sans text at weight 300, and 0px border radius."
- "Create a navigation bar with a black background and white Open Sans 16px text, ensuring no rounded corners."
- "Design a centered maintenance card using the Vectorflow 20px spacing rhythm and monochrome palette."

## Known gaps
- Interactive states (hover, focus, active) for buttons or links were not captured due to the site's maintenance state.
- Form elements and complex data components were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://vectorflow.com | 1440px | 2026-06-06 |
| Pricing | https://vectorflow.com/pricing | 1440px | 2026-06-06 |
| Mobile | https://vectorflow.com | 390px | 2026-06-06 |