---
version: alpha
name: Anastasia Kas
description: Editorial designer-portfolio minimalism — Playfair Display serif headlines over Google Sans Code monospace body on a cool slate canvas, numbered index navigation, soft rounded cards, and a single restrained blue accent.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#f8fafc"
  surface-soft: "#f1f5f9"
  ink: "#0f172a"
  ink-secondary: "#475569"
  ink-muted: "#64748b"
  ink-faint: "#94a3b8"

  # Accent — restrained editorial blue
  primary: "#2563eb"
  accent-soft: "#bfdbfe"
  accent-bright: "#60a5fa"

  # Highlight / alert
  highlight-red: "#e7000b"

  # Neutral slate scale
  slate-900: "#0f172b"
  slate-800: "#1e293b"
  slate-700: "#334155"
  slate-600: "#475569"
  slate-500: "#62748e"
  slate-400: "#94a3b8"
  slate-300: "#cbd5e1"
  slate-200: "#e2e8f0"
  slate-100: "#f1f5f9"
  slate-50: "#f8fafc"

  # Borders + tints (flattened over white)
  border: "#e2e8f0"
  border-soft: "#eef2f6"
  hairline: "#f0f3f6"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1px
  display-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  display-italic:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  section-title:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.25px
  card-title:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Google Sans Code, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Google Sans Code, ui-monospace, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Google Sans Code, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Google Sans Code, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.5px
  mono-index:
    fontFamily: "Google Sans Code, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "Google Sans Code, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  md: 6px
  lg: 12px
  xl: 30px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  index-number:
    textColor: "{colors.ink-faint}"
    typography: "{typography.mono-index}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 40px
    borderColor: "{colors.border-soft}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"

  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  link-underline:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Anastasia Kas Design System

## Overview

Anastasia Kas's portfolio is an exercise in editorial restraint — the visual language of a product designer who wants the work, not the chrome, to do the talking. The site pairs a high-contrast typographic duet (the romantic serif of Playfair Display against the mechanical evenness of Google Sans Code monospace) over a cool, near-achromatic slate canvas. The result reads like a printed design annual: numbered index entries, generous margins, and ink that never quite reaches pure black (`{colors.ink}` is a deep slate-navy, not `#000000`).

The defining move is the serif-over-mono contrast. Headlines and project titles are set in Playfair Display at weight 500, often with an italic emphasis word, giving the page an authored, magazine-cover quality. Everything functional — navigation, body copy, labels, metadata, the 01–06 section index — falls to Google Sans Code, a monospace whose fixed rhythm signals "engineer" as much as "designer." This is the whole thesis of the brand (a "Product Designer & UI/UX Engineer") expressed in two typefaces.

Color is deliberately scarce. The entire palette is the Tailwind slate ramp — from `{colors.slate-50}` surfaces to `{colors.slate-900}` ink — with one restrained editorial blue (`{colors.primary}`) reserved for links and the rare accent moment. There is no decorative color, no gradient wash, no warmth. Depth comes from hairline slate borders and soft rounding (cards at `{rounded.lg}`–`{rounded.xl}`, pills at `{rounded.pill}`), never from heavy shadow.

**Key Characteristics:**
- Playfair Display serif headlines (weight 500, slight negative tracking) — the editorial voice
- Google Sans Code monospace for all body, navigation, labels, and the numbered index
- Cool achromatic slate palette (`{colors.slate-50}` → `{colors.slate-900}`), no warm tones
- A single restrained blue accent (`{colors.primary}`) for links and emphasis only
- Numbered 01–06 index navigation in mono with wide tracking
- Soft rounding — `{rounded.lg}` cards, `{rounded.xl}` feature panels, `{rounded.pill}` buttons
- Hairline slate borders (`{colors.border}`) instead of shadows for separation
- Ink that stops at deep slate-navy (`{colors.ink}`), never pure black

## Colors

### Primary
- **Slate Ink** (`{colors.ink}`): Primary text, headings, dark CTAs. A deep slate-navy, not pure black.
- **White** (`{colors.background}`): Page background, card surfaces, on-ink text.
- **Surface** (`{colors.surface}`): Soft slate-tinted panel background.

### Text Hierarchy
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata.
- **Ink Faint** (`{colors.ink-faint}`): Index numbers, placeholders, disabled labels.

### Accent
- **Editorial Blue** (`{colors.primary}`): Links, the single accent. Used sparingly.
- **Accent Soft** (`{colors.accent-soft}`): Tinted accent backgrounds, hover wash.
- **Accent Bright** (`{colors.accent-bright}`): Highlighted accent, focus glow.

### Highlight
- **Highlight Red** (`{colors.highlight-red}`): Rare alert / required-field flag.

### Neutral Slate Scale
- **Slate 900** (`{colors.slate-900}`): Darkest ink contexts.
- **Slate 700** (`{colors.slate-700}`): Strong body text.
- **Slate 500** (`{colors.slate-500}`): Muted text.
- **Slate 300** (`{colors.slate-300}`): Strong borders, dividers.
- **Slate 200** (`{colors.slate-200}`): Default borders, card outlines.
- **Slate 100** (`{colors.slate-100}`): Soft surface tint.
- **Slate 50** (`{colors.slate-50}`): Subtle panel background.

### Borders
- **Border** (`{colors.border}`): Default hairline card/divider line.
- **Border Soft** (`{colors.border-soft}`): Lighter feature-panel outline.

## Typography

### Font Family
- **Display**: `Playfair Display`, with fallbacks: `Georgia, serif` — headlines, project titles, italic emphasis.
- **Body / Mono**: `Google Sans Code`, with fallbacks: `ui-monospace, monospace` — body, navigation, labels, index numbers.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px Playfair hero — the introduction headline |
| `display-heading` | Major section headlines |
| `display-italic` | Italicized emphasis word inside a headline |
| `section-title` | Section / group titles |
| `card-title` | Project and feature card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text (mono) |
| `body-small` | Compact UI text, inputs |
| `label` | Buttons, nav links, emphasized labels |
| `mono-index` | The 01–06 numbered index, wide-tracked |
| `caption` | Metadata, tags, fine print |

### Principles
- **Serif announces, mono operates**: Playfair Display carries every headline and title; Google Sans Code carries everything functional. The contrast is the identity.
- **One serif weight**: Playfair lives at weight 500 — never bold, never light. Emphasis comes from italics, not heavier weight.
- **Monospace as system voice**: The fixed-width body signals the "engineer" half of the brand and gives the index its tabular precision.
- **Restrained tracking**: Slight negative tracking on serif display (-1px to -0.25px); positive tracking only on the mono index and labels for an editorial, spaced-caps feel.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px; the scale jumps from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) to open up generous section gaps.

### Grid & Container
- Max content width: approximately 1100–1200px, centered
- Numbered index navigation (01–06) anchors the page structure
- Project showcase as a vertical sequence of feature cards
- Generous left/right margins reinforce the editorial, printed-page feel

### Whitespace Philosophy
- **Editorial margins**: Wide gutters and tall section spacing (`{spacing.3xl}`–`{spacing.4xl}`) give the page a printed-annual calm.
- **Separation by hairline**: Sections and cards divide via `{colors.border}` hairlines, not shadow or color blocks.
- **Index rhythm**: The mono numbered index sets a vertical cadence that the serif headlines play against.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, dividers, default separation |
| Soft Panel (Level 2) | `1px solid {colors.border-soft}` on `{colors.surface}` | Feature panels |
| Focus | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: This system is shadow-averse. Depth is communicated almost entirely through hairline slate borders and soft surface tints. When a card lifts, it lifts by sitting on `{colors.surface}` inside a `{colors.border-soft}` outline — never by casting a heavy shadow. The mood is flat, printed, and quiet.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed edges, dividers |
| `xs` | 4px | Small chips, inline tags |
| `md` | 6px | Inputs, small controls |
| `lg` | 12px | Standard cards |
| `xl` | 30px | Feature panels, large containers |
| `pill` | 9999px | Buttons, badges, pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Slate-ink fill, white text, full pill. The default dark CTA.
- **`button-secondary`** — White surface with `{colors.border}` hairline. Ghost action.
- **`button-accent`** — Editorial blue fill for the rare emphasized action.

### Pills & Badges
- **`badge`** — Soft slate surface, secondary-ink text, full pill. Tags and metadata.
- **`index-number`** — Faint mono numerals (01–06) with wide tracking for the section index.

### Cards
- **`card`** — White, hairline `{colors.border}`, `{rounded.lg}`. The default project tile.
- **`card-feature`** — `{colors.surface}` panel with `{rounded.xl}` and soft `{colors.border-soft}` outline.

### Inputs
- **`input`** — White surface, hairline border, `{rounded.md}`. Focus swaps the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — White header, mono labels, bottom hairline border. Numbered index drives structure.

### Distinctive Components
- **Numbered Index**: The 01–06 mono index is the signature navigation device — faint slate numerals with wide letter-spacing pacing the page.
- **Serif/Italic Headline**: Playfair Display headlines with a single italicized emphasis word — the editorial centerpiece.

## Do's and Don'ts

### Do
- Pair Playfair Display headlines with Google Sans Code body — the serif/mono contrast IS the brand
- Keep Playfair at weight 500; use italics for emphasis, not heavier weight
- Use mono for all navigation, labels, and the numbered index
- Keep the palette achromatic slate; reserve `{colors.primary}` for links and rare accents
- Separate with hairline `{colors.border}` lines, not shadows
- Use `{colors.ink}` (deep slate-navy) for primary text, never pure black
- Use wide positive tracking only on the mono index and labels

### Don't
- Don't introduce warm colors (oranges, yellows, greens) — the system is cool slate
- Don't use heavy or colored drop shadows — depth is hairlines and surface tints
- Don't set body copy in the serif — Playfair is headline-only
- Don't bolden Playfair past 500 or use it at small sizes
- Don't let the blue accent become decorative — it marks links and emphasis only
- Don't use sharp 0px corners on cards — soft rounding (`{rounded.lg}`+) is the default

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, index stacks above content, reduced margins |
| Tablet | 640–1024px | 2-column project grids, expanded gutters |
| Desktop | 1024–1280px | Full layout, centered max-width, wide editorial margins |
| Large | >1280px | Centered with generous outer margins |

### Touch Targets
- Buttons use comfortable padding (12px vertical) with pill geometry
- Mono nav links spaced for tap with adequate gaps
- Badges use 12px horizontal padding for tap comfort

### Collapsing Strategy
- Hero: Playfair 56px scales down, maintains negative tracking proportionally
- Navigation: horizontal mono links → stacked / menu on mobile
- Numbered index: inline with content → stacked label rows
- Project cards: multi-column → single column
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

### Image Behavior
- Project imagery sits inside `{rounded.lg}`–`{rounded.xl}` containers with hairline borders
- Images maintain aspect ratio and soft rounding at all sizes
- Full-bleed feature panels stay edge-to-edge inside the content column

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Slate Ink `{colors.ink}`
- Background: White `{colors.background}`
- Heading text: Slate Ink `{colors.ink}` (Playfair Display)
- Body text: Ink Secondary `{colors.ink-secondary}` (Google Sans Code)
- Border: `1px solid {colors.border}`
- Link / accent: Editorial Blue `{colors.primary}`
- Focus ring: `{colors.primary}`

### Example Component Prompts
- "Create a hero on white. Headline in Playfair Display 56px weight 500, line-height 1.05, letter-spacing -1px, color `{colors.ink}`, with one italicized emphasis word. Subtitle in Google Sans Code 18px weight 400, color `{colors.ink-secondary}`. Dark pill CTA (`{colors.ink}`, 9999px, 12px 24px) and ghost pill (white, 1px `{colors.border}`)."
- "Design a project card: white background, 1px `{colors.border}`, `{rounded.lg}` radius, 24px padding. Title in Playfair Display 22px weight 500 `{colors.ink}`. Body in Google Sans Code 16px `{colors.ink-secondary}`. A mono index number `01` in `{colors.ink-faint}` with wide tracking above the title."
- "Build a numbered index nav: Google Sans Code 13px weight 500, letter-spacing 1px, numerals `{colors.ink-faint}`, labels `{colors.ink}`, bottom hairline `{colors.border}`."
- "Create a soft feature panel: `{colors.surface}` background, 1px `{colors.border-soft}`, `{rounded.xl}` radius, 40px padding. No shadow."

### Iteration Guide
1. Headlines and titles are ALWAYS Playfair Display weight 500; everything else is Google Sans Code
2. Keep color achromatic slate — `{colors.primary}` blue appears only on links and rare emphasis
3. Separate elements with hairline `{colors.border}`, never shadows
4. Use `{colors.ink}` (deep slate-navy) for ink, never `#000000`
5. The mono numbered index (01–06) with wide tracking is the signature navigation device
6. Soft rounding throughout — `{rounded.lg}` cards, `{rounded.xl}` panels, `{rounded.pill}` buttons

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Anastasia Kas. Brand names and trademarks belong to their respective owners.