Aside

---
version: alpha
name: Aside
description: Aside is the intelligent browser agent built for people and tasks.
colors:
  primary: "#090b0c"
  secondary: "#848c8c"
  tertiary: "#00a6f4"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: displayFont
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.01em
  headline-md:
    fontFamily: displayFont
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.22
  headline-sm:
    fontFamily: displayFont
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
  headline-xs:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#fafafa"
    rounded: "{rounded.full}"
    padding: 12px 12px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 12px 12px
    height: 40px
  button-link:
    textColor: "#0084d1"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Aside: A Cloud-Soft Hero for a Security-First AI Browser

## Overview

Aside's UI is confident but calm—optimistic sky visuals, compact headlines, and restrained color. It targets both technical and non-technical users who care about capability and safety. Spacing is generous and readable rather than dense; sections stack with clear proof points and minimal chrome. When tokens don't cover a case, prefer quiet, light surfaces and let a single accent carry emphasis.

## Colors

- Primary (#090b0c): Deep ink for headlines, core text, and high-importance icons.
- Secondary (#848c8c): Muted slate for secondary nav, metadata, and helper text.
- Tertiary (#00a6f4): Bright accent for links, charts, and key highlights.
- Neutral (#ffffff): Pure white surfaces, cards, and the global canvas.
- Border (#e5e7eb): Subtle separators, card outlines, and header/footer rules.
- Surface (#ffffff): The base surface; identical to neutral.
- On-surface (#090b0c): Default text color on light backgrounds.

## Typography

- Display Font (custom): Used for headline-lg/md/sm at 44/36/24px, weight 400. This is proprietary/self-hosted; an agent cannot load it without the provided files. Substitute options with similar contemporary grotesk tone: Plus Jakarta Sans, Sora, or Urbanist (all Google).
- Geist (Google): Used for headline-xs (18px, 400) and body-md (14px, 400). Freely available; load from Google Fonts. Use Geist for all UI labels, body copy, and small headings where clarity matters.

## Layout

Spacing scale favors readable blocks: xs 6, sm 16, md 24, lg 40, xl 64. Compose vertical rhythm using lg (40px) between major sections and md (24px) within a section. Cards and feature groups align to a simple column grid with wide gutters; reserve xl (64px) for hero paddings and section breaks. Keep line lengths moderate—body at 60–72ch, headlines centered in the hero.

## Elevation & Depth

Depth relies on a light ring + soft drop (shadow-sm) on floating elements like the browser mock and key cards. Larger shadow sizes are intentionally "none"; prefer borders (#e5e7eb) and whitespace to separate content. Inner focus states can use the provided inset shadow for inputs. Avoid heavy glows or colored shadows.

## Shapes

Two radii define the language: sm = 8px for cards, screenshots, and panels; full = 9999px for pills (CTAs, badges, chips). Use square corners for inline links and text elements. Rounded-full signals interactivity and primary actions.

## Components

- Button — Primary: Background #090b0c, text #fafafa, height 40px, padding 12px 12px, rounded-full. Use for "Download".
- Button — Secondary: Text #090b0c, height 40px, padding 12px 12px, rounded-full on transparent or surface backgrounds. Pair with the primary.
- Button — Link: Text #0084d1, no radius. Prefer underline on hover to maintain contrast.
- Card: Background #ffffff, text #090b0c, radius 8px, padding 16px. Add border #e5e7eb and shadow-sm for lift.

### Top Navigation Bar
- Background: surface (#ffffff) or transparent over hero. Bottom border: #e5e7eb when sticky. Link text: primary; spacing: sm (16px) vertical; right-aligned primary pill.

### Hero With Sky Backdrop
- Headline: 44px display (400, -0.01em, 1.09). Centered, two lines. Supporting badge above; primary and secondary pills below with sm (16px) gap.

### Browser Mock Window
- Container: card (8px radius, shadow-sm). Use border #e5e7eb and md (24px) internal gaps. Intended to span wide with xl (64px) top margin from hero.

### YC Badge
- Small pill using rounded-full, border #e5e7eb, text secondary (#848c8c). Inline with md (24px) spacing from the headline block.

### SOTA Benchmarks Card
- Card 8px/16px. Section title: 24px display. Bars or key numbers use accent #00a6f4; labels in secondary.

### Feature List Rows
- Three-up or stacked items (Signing in, Communications, Docs). Each item: headline-xs (18px Geist) + body-md (14px) with md (24px) gaps.

### Password Manager Panel
- Grid of benefits. Each benefit in a card: 8px radius, 16px padding, border #e5e7eb. Headlines at 18px Geist; body at 14px.

### Footer
- Top border #e5e7eb. Multi-column links in body-md; metadata in secondary. Vertical spacing lg (40px).

## Do's and Don'ts

- Do keep headlines at weight 400; the voice relies on contrast from size, not heavy weight.
- Do use #00a6f4 sparingly for actions and data highlights; keep most text in #090b0c or #848c8c.
- Do apply only shadow-sm for elevation; otherwise use #e5e7eb borders and whitespace.
- Don't mix new radii—use 8px for containers and full pills for actions/badges.
- Don't shrink the primary button below 40px height; touch targets must remain comfortable.
- Don't introduce dark sections; the system assumes light mode throughout.

## Agent Prompt Guide

Quick color reference — Text: #090b0c. Background: #ffffff. Border: #e5e7eb. Accent: #00a6f4.

1) Build the hero header
- Container: center, max 960px, padding-top: 64px, padding-bottom: 64px, background: #ffffff (sky art optional).
- H1: font-family: Display Font (fallback: "Plus Jakarta Sans", "Sora", "Urbanist", sans-serif); font-size: 44px; font-weight: 400; line-height: 1.09; letter-spacing: -0.01em; color: #090b0c; text-align: center.
- Sub/badge row above: pill with border 1px #e5e7eb; color #848c8c; border-radius: 9999px; padding: 6px 16px.
- CTA group: Primary button (bg #090b0c, text #fafafa, height 40px, padding 12px 12px, radius 9999px) + Secondary (text #090b0c, same size) with 16px gap.

2) Navigation bar with download pill
- Bar: width 100%, background #ffffff; padding: 16px 24px; bottom border: 1px solid #e5e7eb.
- Links: font-family: Geist; font-size: 14px; color: #090b0c; spacing: 24px.
- Right action: Primary button spec above.

3) Benchmarks card
- Card: background #ffffff; border 1px #e5e7eb; box-shadow: shadow-sm; border-radius: 8px; padding: 16px.
- Title: font-family: Display Font (fallbacks as above); font-size: 24px; font-weight: 400; color: #090b0c.
- Bars/keys: use #00a6f4 for fills; labels in #848c8c; body text Geist 14px/1.43.

4) Password Manager features grid
- Grid: three cards, gap 24px.
- Each card: background #ffffff; border 1px #e5e7eb; radius 8px; padding 16px; shadow-sm optional.
- Headline: Geist 18px/1.22, color #090b0c. Body: Geist 14px/1.43, color #848c8c for secondary lines.

5) Browser mock frame
- Wrapper: card spec (8px radius, 16px padding, shadow-sm), margin-top: 64px.
- Inside layout: left rail 280px and content area; separators use 1px #e5e7eb.

## Similar Brands

- Arc Browser: Shares bright, optimistic visuals and rounded pills; Arc leans more playful, Aside is more minimal with tighter type.
- Raycast: Similar restrained palette and strong product mock usage; Raycast uses darker themes and denser layouts.
- Linear: Comparable typographic calm and focus on proof sections; Linear employs more gray surfaces versus Aside's white canvas.
- Vercel: Clean sans + blue accent rhythm; Vercel uses stronger contrast and more code-oriented components.
- Notion: Minimal white canvas with soft cards; Notion's typography is looser and more document-like, while Aside is app-UI precise.

:root {
  /* Colors */
  --color-primary: #090b0c;
  --color-secondary: #848c8c;
  --color-tertiary: #00a6f4;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 44px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.09;
  --text-headline-lg-tracking: -0.01em;
  --text-headline-md-size: 36px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.22;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.33;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.43;
  --font-displayfont: "displayFont";
  --font-geist: "Geist";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #fafafa;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 12px 12px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 12px 12px;
  --button-secondary-height: 40px;
  --button-link-text-color: #0084d1;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Aside is the intelligent browser agent built for people and tasks.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.035,
          0.043,
          0.047
        ],
        "hex": "#090b0c"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.518,
          0.549,
          0.549
        ],
        "hex": "#848c8c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.651,
          0.957
        ],
        "hex": "#00a6f4"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.035,
          0.043,
          0.047
        ],
        "hex": "#090b0c"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "displayFont",
        "fontSize": {
          "value": 44,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.01,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "displayFont",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "displayFont",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}