# Andreas Kruszakin design system

> Andreas Kruszakin design system measured from andreas.vision: TRJN DaVinci font, #00AAFF primary, 10 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/andreas.vision/

Andreas Kruszakin’s website (andreas.vision) uses the TRJN DaVinci font and #00AAFF as its main color on a white background. Measured by Sitepeel on November 6, 2026.

## What font does Andreas Kruszakin use?

Andreas Kruszakin uses TRJN DaVinci (weight 400) and Geist Variable (weights 400 and 500) on andreas.vision. Page titles are 132px at weight 400 (50px on phones) and body text is 14px. Measured on November 6, 2026.

- TRJN DaVinci (weights 400)
- Geist Variable (weights 400, 500)

## Andreas Kruszakin colors: palette and hex codes

Andreas Kruszakin’s main colors are #FFFFFF (white) for the background, #000000 (near black) for text and #00AAFF (vivid blue) as the main accent. Measured on November 6, 2026.

- #FFFFFF: white
- #000000: near black
- #2E3342: deep blue
- #646465: slate
- #9B9B9B: gray
- #FBFBFB: snow
- #00AAFF: vivid blue

## What is Andreas Kruszakin built with?

Andreas Kruszakin’s website (andreas.vision) is built with React, Emotion, Vercel and Motion. Measured on November 6, 2026.

- Hosting & CDN: Vercel
- JavaScript framework: React 19.2.8
- Analytics: Vercel Web Analytics
- UI & CSS: Emotion
- Animation & 3D: Motion

## Questions and answers

### What font does Andreas Kruszakin use?

Andreas Kruszakin’s website uses TRJN DaVinci (weight 400) and Geist Variable (weights 400 and 500). Page titles are 132px at weight 400 (50px on phones) and body text is 14px. Measured on November 6, 2026.

### What are the Andreas Kruszakin colors and hex codes?

On andreas.vision: #FFFFFF (white) for the background, #000000 (near black) for text and #00AAFF (vivid blue) as the main accent. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Andreas Kruszakin design system?

The design system on this page is andreas.vision’s, as measured on November 6, 2026: TRJN DaVinci type, #00AAFF as the main color and 10px corners, written down as a DESIGN.md. It is not Andreas Kruszakin’s own documentation.

### What is Andreas Kruszakin built with?

Andreas Kruszakin’s website (andreas.vision) is built with React, Emotion, Vercel and Motion. The full tech stack Sitepeel found: Vercel, React, Vercel Web Analytics, Emotion and Motion. Measured on November 6, 2026.

### What is the Andreas Kruszakin DESIGN.md?

A plain-text file with Andreas Kruszakin’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Andreas Kruszakin’s official design system?

No. Sitepeel measured it from andreas.vision’s public page on November 6, 2026. It is an independent analysis, not made or approved by Andreas Kruszakin.

### Can I use Andreas Kruszakin’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Andreas Kruszakin’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/andreas.vision/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Andreas Kruszakin.

## The DESIGN.md file

```markdown
---
version: alpha
name: Andreas Kruszakin
description: "Light interface measured from andreas.vision: TRJN DaVinci type with Geist Variable, vivid blue accents, tonal surfaces and 10px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#2E3342"
  on-surface-muted: "#646465"
  on-surface-subtle: "#9B9B9B"
  surface-container-low: "#FBFBFB"
  overlay: "#0000000D"
  outline: "#00000008"
  primary: "#00AAFF"
  on-primary: "#000000"
typography:
  headline-display:
    fontFamily: TRJN DaVinci
    fontSize: 132px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Geist Variable
    fontSize: 105px
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Geist Variable
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.45
  body-md:
    fontFamily: Geist Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Geist Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  body-sm:
    fontFamily: Geist Variable
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
  caption:
    fontFamily: Geist Variable
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Geist Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.4
  label-sm:
    fontFamily: Geist Variable
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
  headline-display-mobile:
    fontFamily: TRJN DaVinci
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.04em
  headline-lg-mobile:
    fontFamily: Geist Variable
    fontSize: 56px
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -0.01em
rounded:
  sm: 8px
  md: 10px
  lg: 12px
  xl: 40px
  full: 9999px
spacing:
  xs: 2.04px
  sm: 6px
  md: 16px
  lg: 20px
  xl: 48px
  gutter: 16px
  section: 120px
  margin: 88px
components:
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# Andreas Kruszakin Design System

## Overview

Andreas Kruszakin describes itself as: “I'm Andreas, a growth-focused design engineer who is design first and builds the system underneath. I make founders' products easy to get, so customers buy and investors say yes, which so far has meant £1.4M raised for N” The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text, and **Vivid Blue (#00AAFF)** as the main accent.

Type is set in **TRJN DaVinci** and **Geist Variable**. Headlines run large with tight negative tracking; body text is 14px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 10px.

Measured from [andreas.vision](https://andreas.vision/) on November 6, 2026 at 1440×900 and 390×844 from 330 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **White (#FFFFFF):** Page background, seen 10 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 36 times. Token `on-surface`.
- **Deep Blue (#2E3342):** Secondary text, seen 6 times. Token `on-surface-variant`, CSS `--button-secondary-background-hover`.
- **Slate (#646465):** Muted text and metadata, seen 16 times. Token `on-surface-muted`.
- **Gray (#9B9B9B):** Subtle text and placeholders, seen 15 times. Token `on-surface-subtle`, CSS `--palette-b40`.
- **Snow (#FBFBFB):** Raised areas one step from the page, seen 10 times. Token `surface-container-low`.
- **Near Black 5% (#0000000D):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **Near Black 3% (#00000008):** Borders and dividers, seen 5 times. Token `outline`, CSS `--tab-hover`.
- **Vivid Blue (#00AAFF):** Brand color on large areas, seen 5 times. Token `primary`, CSS `--link-visited`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.

## Typography

**TRJN DaVinci** and **Geist Variable** share the interface. Fallback stack: `TRJN DaVinci, Newsreader Variable, Georgia, serif`.

- **headline-display:** TRJN DaVinci 132px at weight 400, line height 1.12, tracking -0.04em (50px on mobile). Page title (h1).
- **headline-lg:** Geist Variable 105px at weight 500, line height 0.86, tracking -0.01em (56px on mobile). Section headings (h2).
- **headline-md:** Geist Variable 20px at weight 400, line height 1.45. Sub-section headings.
- **body-md:** Geist Variable 14px at weight 400, line height 1.5. Body text.
- **body-lg:** Geist Variable 16px at weight 400, line height 1.4. Lead paragraphs.
- **body-sm:** Geist Variable 13px at weight 400, line height 1.4. Secondary and small text.
- **caption:** Geist Variable 11px at weight 400, line height 1.5. Captions and fine print.
- **label-md:** Geist Variable 17px at weight 400, line height 1.4. Buttons, navigation and labels.
- **label-sm:** Geist Variable 16px at weight 500, line height 1.4. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 42% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2.04px, sm 6px, md 16px, lg 20px, xl 48px.
- **Sections:** 120px vertical padding between major sections.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Page margin:** 88px on each side of full-width sections.
- **Breakpoints:** 820px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps (#FBFBFB) and hairline rings:

- `rgba(0, 0, 0, 0.03) 0px 0px 0px 1px`

## Shapes

Most elements use 10px corners. Measured radii, most used first:

- **md (10px):** 72 elements.
- **xl (40px):** 60 elements.
- **sm (8px):** 52 elements.
- **lg (12px):** 40 elements.
- **full (9999px):** 36 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-ghost (“How I design”):** transparent fill, #000000 text, 14px/400, padding 0px.
- **card:** #FFFFFF fill, #000000 text, 14px/400, padding 0px.
- **link:** transparent fill, #000000 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #FBFBFB.
- Do keep text in 4 levels: #000000, #2E3342, #646465, #9B9B9B.
- Do use #00AAFF as the brand accent: header, logo and key highlights.
- Do set headlines in TRJN DaVinci with tight tracking (-0.04em).
- Do reuse the measured spacing steps (6px, 16px, 20px).
- Do use 10px corners on most elements; larger surfaces also use 40px, 8px and 12px.
- Don't use #9B9B9B for body text; it reaches 2.78:1 on #FFFFFF. Keep it for large text or metadata.
- Don't add drop shadows for depth; use hairline rings and tonal surfaces.
- Don't introduce new font families beyond TRJN DaVinci and Geist Variable.
- Don't use #00AAFF for large backgrounds or body text.
- Don't make interface transitions slower than 0.6s.

## Motion

Interface transitions are quick: 0.1s, 0.5s, 0.25s, 0.6s. Longer ambient animations run 1.8s.

- **Easing:** `ease-out`, `cubic-bezier(0.16, 1, 0.3, 1)`, `cubic-bezier(0.22, 1, 0.36, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/andreas.vision/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```