---
version: alpha
name: mantas-vaitukaitis
description: Current visual language for mantasvaitukaitis.com; a foundation rather than the future standalone component system.
colors:
  primary: "hsl(0 0% 98%)"
  on-primary: "hsl(240 10% 3.9%)"
  background: "hsl(240 10% 3.9%)"
  foreground: "hsl(0 0% 98%)"
  card: "hsl(0 0% 9% / 0.5)"
  border: "hsl(240 3.7% 15.9%)"
  muted: "hsl(240 3.7% 15.9%)"
  muted-foreground: "hsl(240 5% 64.9%)"
  light-background: "hsl(0 0% 97.6%)"
  light-foreground: "hsl(0 0% 0%)"
  light-primary: "hsl(0 0% 0%)"
  light-on-primary: "hsl(0 0% 100%)"
  light-card: "hsl(0 0% 100%)"
  light-border: "hsl(0 0% 89.8%)"
  light-muted: "hsl(0 0% 96.1%)"
  light-muted-foreground: "hsl(0 0% 45.1%)"
typography:
  display:
    fontFamily: Geist Sans
    fontSize: 6rem
    fontWeight: 600
    lineHeight: 0.8
    letterSpacing: -0.05em
  heading-1:
    fontFamily: Geist Sans
    fontSize: 3.75rem
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: -0.04em
  heading-1-mobile:
    fontFamily: Geist Sans
    fontSize: 2.75rem
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: -0.04em
  heading-2:
    fontFamily: Geist Sans
    fontSize: 3rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.04em
  heading-2-mobile:
    fontFamily: Geist Sans
    fontSize: 2.25rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.04em
  heading-3:
    fontFamily: Geist Sans
    fontSize: 1.875rem
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-3-mobile:
    fontFamily: Geist Sans
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-4:
    fontFamily: Geist Sans
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading-4-mobile:
    fontFamily: Geist Sans
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-large:
    fontFamily: Geist Sans
    fontSize: 1.5rem
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-large-mobile:
    fontFamily: Geist Sans
    fontSize: 1.25rem
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-medium:
    fontFamily: Geist Sans
    fontSize: 1.25rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.01em
  body-medium-mobile:
    fontFamily: Geist Sans
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.01em
  body-small:
    fontFamily: Geist Sans
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.5
  navigation:
    fontFamily: Geist Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  metadata:
    fontFamily: Geist Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
rounded:
  none: 0rem
  full: 9999px
spacing:
  base: 8px
  gap-sm: 16px
  gap-md: 32px
  gap-lg: 48px
  section-sm: 4rem
  section-md: 6rem
  section-lg: 8rem
  section-xl: 12rem
components:
  page-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
  card-dark:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
  divider-dark:
    backgroundColor: "{colors.border}"
    height: 1px
  muted-surface-dark:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    rounded: "{rounded.none}"
  primary-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.navigation}"
    rounded: "{rounded.full}"
  primary-cta-hover:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.navigation}"
    rounded: "{rounded.full}"
  page-light:
    backgroundColor: "{colors.light-background}"
    textColor: "{colors.light-foreground}"
    rounded: "{rounded.none}"
  card-light:
    backgroundColor: "{colors.light-card}"
    textColor: "{colors.light-foreground}"
    rounded: "{rounded.none}"
  divider-light:
    backgroundColor: "{colors.light-border}"
    height: 1px
  muted-surface-light:
    backgroundColor: "{colors.light-muted}"
    textColor: "{colors.light-muted-foreground}"
    rounded: "{rounded.none}"
  primary-cta-light:
    backgroundColor: "{colors.light-primary}"
    textColor: "{colors.light-on-primary}"
    typography: "{typography.navigation}"
    rounded: "{rounded.full}"
---

# Design system

## Overview

The interface is a restrained, high-contrast portfolio system that combines editorial scale with technical precision. Large Geist Sans headings provide the expressive layer; lowercase Geist Mono navigation, metadata, paths, and labels provide structure. The design should feel deliberate, direct, and built rather than decorated.

This document describes the current website. It is a working foundation, not the planned standalone component system.

## Colors

Dark mode is the default. It uses an almost-black background, near-white foreground, and low-contrast neutral dividers. Light mode inverts the relationship without introducing a separate accent hue. Primary actions derive their contrast from the same foreground and background pair rather than from decorative color.

Opacity variants of the primary and muted colors establish secondary hierarchy. Preserve readable contrast and avoid introducing unrelated accent colors.

## Typography

Geist Sans carries display, heading, and body content. Display type is tightly tracked and uses a compact line height; heading sizes step down responsively below 768px. Body styles loosen line height as text gets smaller.

Geist Mono is used for navigation, metadata, paths, labels, and machine-oriented information. These labels are generally lowercase and compact. Geist Pixel Square is reserved for distinctive machine-facing display moments rather than general reading.

## Layout

The layout uses asymmetrical responsive grids and an 8px base rhythm. Standard grid gaps are 16px, 32px, and 48px; major section spacing ranges from 4rem to 12rem. Desktop navigation occupies a resizable 280px sidebar by default, while primary content reflows into the available space. Mobile layouts collapse grids before reducing information hierarchy.

Text measures should remain intentionally constrained when content becomes multi-line. Tables and structured rows use aligned responsive columns, consistent vertical spacing, and full-width divider interactions.

## Elevation & Depth

The system is predominantly flat. Hierarchy comes from typography, opacity, borders, and spatial separation instead of shadows or decorative blur. Hover and focus states strengthen existing dividers or invert established colors.

## Shapes

Content surfaces, tables, and structural containers use square corners. Fully rounded geometry is reserved for primary call-to-action controls and tiny circular navigation indicators. Do not introduce intermediate corner radii without a component-level reason.

## Components

Primary calls to action use the primary color pair, a fully rounded outline, compact 14px typography, and a decipher-text hover transition. Their hover state becomes transparent while retaining a visible primary border and foreground.

Structured data rows use monospaced labels in the leading column and readable values in the remaining columns. Interactive rows highlight their top and bottom dividers on hover or keyboard focus. Expandable groups use a standard 16px chevron and retain highlighted outer boundaries while open.

## Do's and Don'ts

- Do preserve the high-contrast neutral palette in both themes.
- Do use Geist Mono for paths, metadata, and compact interface labels.
- Do maintain the 8px rhythm and consistent row heights.
- Do use borders, opacity, and spacing to express hierarchy.
- Don't add decorative colors, shadows, or blur to create depth.
- Don't mix arbitrary corner radii into structural components.
- Don't allow multi-line text to expand to unreadably long measures.
- Don't replace clear lowercase labels with ornamental interface copy.