Skip to content
DesignMunkDesignMunk Submit a site

Vessa

vessa.design
The only brand guidelines people actually open.
Design Tools Software Nuxt Homepage Switzer
Share Visit site
vessa.design DESKTOP · 1440
Vessa

AI Breakdown

Design export

---
version: alpha
name: Vessa
description: The only brand guidelines people actually open.
colors:
  primary: "#101216"
  secondary: "#848cec"
  tertiary: "#1f2de6"
  neutral: "#eef0f3"
  border: "#a2a3a5"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Switzer
    fontSize: 47px
    fontWeight: 500
    lineHeight: 1.03
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Switzer
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.029em
  headline-sm:
    fontFamily: Switzer
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.009em
  headline-xs:
    fontFamily: Switzer
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.19
  body-md:
    fontFamily: Switzer
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
rounded:
  sm: 8px
  md: 10px
spacing:
  xs: 2px
  sm: 10px
  md: 18px
  lg: 28px
  xl: 104px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 13px 16px
    height: 40px
  button-secondary:
    textColor: "#676d78"
    rounded: "{rounded.sm}"
    padding: 13px 16px
    height: 40px
  button-link:
    textColor: "{colors.tertiary}"
    rounded: 0px
  card:
    backgroundColor: "#f5f6f8"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 6px 0px
---

# Vessa: Interactive Brand Guidelines with an Ultramarine Rail

## Overview

Vessa presents brand guidelines as a live product interface. The tone is precise, direct, and utilitarian: ink on paper with a vivid ultramarine accent. Spacing is roomy and modular, letting content breathe while keeping controls compact. When tokens don't specify, default to clarity over decoration and prioritize readable contrast and simple interactions.

## Colors

- **primary (#101216):** Ink for headlines, body text, and icons. Highest-contrast text on light surfaces.
- **secondary (#848cec):** Soft accent for subtle highlights and supportive UI states; avoid for primary CTAs.
- **tertiary (#1f2de6):** Ultramarine action color for primary buttons, rails, and key links.
- **neutral (#eef0f3):** Paper background for the page and large sections.
- **border (#a2a3a5):** Graphite line for dividers, outlines, and low-contrast rules.
- **surface ({colors.neutral}):** Alias of neutral; use for cards and panels where a separate surface token is required.
- **on-surface ({colors.primary}):** Alias of primary; main text color on any light surface.

## Typography

- Family: Switzer (self-hosted). Headlines use weight 500 with tight letter-spacing; body is 16px/1.55 at weight 400. Sizes: 47/36/27/21px headline steps.
- Availability: Switzer is custom-served here; agents should not hotlink it. Use obtainable substitutes with a similar contemporary grotesk tone: Inter (Google Fonts), Plus Jakarta Sans (Google Fonts), or Satoshi (Fontshare).
- Roles: Headline-lg (47px, 500, -0.045em, 1.03) for primary statements; headline-md (36px, 500, -0.029em) for section leads; headline-sm (27px, 500, -0.009em) and headline-xs (21px, 500) for subheads; body-md (16px, 400, 1.55) for copy and lists.

## Layout

- Spacing scale: 2, 10, 18, 28, 104. Use 18px and 28px as the working rhythm for stacks and gutters; reserve 104px for major section spacing and hero blocks.
- Grid: A centered content column with generous outer gutters; cards and panels sit on the neutral surface with 10–28px internal padding.
- Flow: Headline then concise copy, followed by a single primary action. Demonstrations (tabs, swatches, motion) occupy full-width sections to read like product screens.
- Card padding follows the token (6px top/bottom) with additional inner spacing created by content blocks using the scale.

## Elevation & Depth

Shadows are minimal (sm only: rgba(0,0,0,0.05) 0 1px 2px). Hierarchy is conveyed through tone (neutral vs. paper), thin borders (#A2A3A5), and whitespace. Reserve the ultramarine rail and primary buttons to mark the most important interactions rather than adding larger shadows.

## Shapes

Two radii are used: 8px for controls and small surfaces (buttons, inputs, chips) and 10px for larger cards and panels. No fully pill-shaped elements; geometry stays mostly rectangular to feel tool-like.

## Components

- Button — Primary: #1F2DE6 background, #FFFFFF text, 8px radius, 13x16px padding, 40px height. Use for main actions.
- Button — Secondary: Text-only button in #676D78 with 8px radius and the same 13x16px padding/40px height where buttons align in a row.
- Button — Link: Inline action with #1F2DE6 text and 0px radius. For lightweight navigational links.
- Card: #F5F6F8 surface, #101216 text, 10px radius, 6px vertical padding. Use for pricing, examples, and embedded demos.

### Section Tabs Rail
A full-bleed band with background #1F2DE6. Contains horizontally scrollable section tabs (chips at 8px radius) and prev/next controls. Text sits in #FFFFFF.

### Palette Swatches
Large swatches labeled "Ink #101216", "Paper #EEF0F3", "Ultramarine #1F2DE6". Each copies the hex to clipboard on click; sit on neutral surface with thin borders.

### Motion Spec Block
A compact panel listing easing and duration values as real numbers. Use body-md for values; key labels can take headline-xs.

### AI Command Console
A code-like log showing commands and confirmations. Body-md text in #101216 with highlights in #1F2DE6. Container uses 10px radius and neutral surface.

### Pricing Tier Card
Two side-by-side cards using the Card token. Headlines in headline-sm, price called out near headline-md, bullets in body-md. Primary CTA uses the primary button.

### Password Gate Prompt
Short form with a single password input (8px radius) and a primary button. Copy uses body-md; background stays on neutral to imply privacy without heavy chrome.

### Email Capture Bar
One input and a primary button aligned inline. Maintain 18px gaps and 8px radii; border color #A2A3A5 for the field outline.

### Example Brand Links
Two headline-style links (VANTA, Pythia) using button-link styling in #1F2DE6. Place on neutral surface with 28px vertical spacing.

## Do's and Don'ts

- Do reserve #1F2DE6 for primary CTAs, the section rail, and key links; keep general accents to #848CEC only when a softer cue is needed.
- Do set major headlines in Switzer 47/36/27/21 at weight 500 with the specified negative letter-spacing.
- Do space sections with 104px blocks; use 18px and 28px for inner stacks and control group gaps.
- Don't introduce heavy shadows beyond the sm token; prefer borders (#A2A3A5) and tonal steps (#F5F6F8, #EEF0F3).
- Don't round elements beyond 8px for controls or 10px for cards; avoid pills.
- Don't mix multiple display fonts; if Switzer is unavailable, pick one substitute and use it consistently.

## Agent Prompt Guide

Quick color reference — Text: #101216 · Background: #EEF0F3 · Border: #A2A3A5 · Accent/CTA: #1F2DE6

1) Build a hero header
- Set page background to #EEF0F3 and text to #101216.
- Use font-family: "Switzer", Inter, system-ui. H1: 47px, font-weight 500, line-height 1.03, letter-spacing -0.045em.
- Body copy: 16px/1.55, weight 400.
- Add a primary button: background #1F2DE6, text #FFFFFF, height 40px, padding 13px 16px, border-radius 8px.
- Space hero with 104px top and bottom.

2) Create an ultramarine tabs rail
- Insert a full-width section with background #1F2DE6 and 28px vertical padding.
- Add horizontally scrollable chips for tabs: text #FFFFFF, background transparent with 1px #FFFFFF border, border-radius 8px, 18px gaps.

3) Feature card with swatches
- Place a card container: background #F5F6F8, text #101216, border-radius 10px, padding 28px.
- Add three color swatches labeled with hexes #101216, #EEF0F3, #1F2DE6. Each swatch copies its hex on click.

4) Pricing section (two tiers)
- Grid of two cards using the card styles above. Headline: 27px/500; price line: 36px/500.
- Bullets in 16px/1.55. Primary CTA buttons use #1F2DE6 with 8px radius.

5) Email capture bar
- Inline input (border 1px #A2A3A5, radius 8px, 18px internal padding) and a primary button (40px tall). Maintain 18px gap between controls.

## Similar Brands

- Linear — Similar restraint and blue-forward accent; Linear leans darker with more motion microdetails.
- Stripe — Precise typography and generous spacing; Stripe uses deeper gradients and richer illustrations.
- Vercel — Tool-first tone with minimal chrome; Vercel is monochrome and denser.
- Framer — Product demos in-page; Framer's palette is darker and uses heavier effects.
- Brandpad — Adjacent product space; their pages emphasize downloads, whereas Vessa centers the live page.

More like this

Browse Design Tools →
every.to
Every AI
Every
Build Faster With AI
Blog · 18 minutes ago
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 18 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago