Psn design system

---
version: alpha
name: Psn
description: "Light interface measured from psn-portfolio.ai.studio: Press Start 2P type with Plus Jakarta Sans, vivid amber accents, tonal surfaces and square corners."
colors:
  background: "#F8F5EA"
  surface: "#F8F5EA"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#9F9FA9"
  surface-container-low: "#E8F6F9"
  surface-container: "#FFFFFF"
  primary: "#FACC15"
  on-primary: "#000000"
  secondary: "#0E9AB5"
  tertiary: "#67E8F9"
  success: "#4ADE80"
typography:
  headline-display:
    fontFamily: Press Start 2P
    fontSize: 54.5px
    fontWeight: 400
    lineHeight: 1.25
  headline-lg:
    fontFamily: Press Start 2P
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-sm:
    fontFamily: Press Start 2P
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Silkscreen
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
  label-sm:
    fontFamily: Silkscreen
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  headline-display-mobile:
    fontFamily: Press Start 2P
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.25
  headline-lg-mobile:
    fontFamily: Press Start 2P
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 24px
  xl: 48px
  gutter: 8px
  section: 96px
  margin: 32px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: 14px 20px
    height: 54px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface-container}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: 14px 20px
    height: 54px
  button-outline:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: 14px 20px
    height: 54px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.none}"
    padding: 0px
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.none}"
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# Psn Design System

## Overview

Psn describes itself as: “Parth Nakti (Psn) — second-year computer engineering student at Atharva College of Engineering, Mumbai. The real trail of what he built, what broke, and what he decided.” The interface is light, built on **Warm Mist (#F8F5EA)** with **Near Black (#000000)** text, and **Vivid Amber (#FACC15)** as the main accent.

Type is set in **Press Start 2P** and **Plus Jakarta Sans**, with **JetBrains Mono** for code. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Corners are square.

Measured from [psn-portfolio.ai.studio](https://psn-portfolio.ai.studio/) on November 7, 2026 at 1440×900 and 390×844 from 254 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles, plus gradient stops #E3DCC4.

- **Warm Mist (#F8F5EA):** Page background, seen 7 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 76 times. Token `on-surface`, CSS `--color-black`.
- **Cool Gray (#9F9FA9):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **Cool Mist (#E8F6F9):** Raised areas one step from the page, seen 3 times. Token `surface-container-low`.
- **White (#FFFFFF):** Cards and panels, seen 42 times. Token `surface-container`, CSS `--tw-ring-offset-color`.
- **Vivid Amber (#FACC15):** Brand color on large areas, seen 15 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Cyan (#0E9AB5):** Secondary buttons, seen 13 times. Token `secondary`.
- **Cyan (#67E8F9):** Accent in text, fills and borders, seen 5 times. Token `tertiary`.
- **Green (#4ADE80):** Success and positive states, seen 7 times. Token `success`.

## Typography

**Press Start 2P**, **Plus Jakarta Sans**, **Silkscreen** and **JetBrains Mono** (monospace) share the interface. Fallback stack: `Press Start 2P, monospace`. Other loaded fonts: Chakra Petch.

- **headline-display:** Press Start 2P 54.5px at weight 400, line height 1.25 (30px on mobile). Page title (h1).
- **headline-lg:** Press Start 2P 30px at weight 400, line height 1.2 (20px on mobile). Section headings (h2).
- **body-md:** Plus Jakarta Sans 14px at weight 400, line height 1.43. Body text.
- **body-sm:** Press Start 2P 12px at weight 400, line height 1.33. Secondary and small text.
- **label-lg:** Plus Jakarta Sans 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** Silkscreen 14px at weight 700, line height 1.43. Buttons, navigation and labels.
- **label-sm:** Silkscreen 12px at weight 700, line height 1.33, uppercase. Small labels and badges.
- **code:** JetBrains Mono 14px at weight 400, line height 1.43. Code and technical values.

## Layout

Spacing is mostly on a 4px grid (73% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 10px, lg 24px, xl 48px.
- **Sections:** 96px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 32px on each side of full-width sections.
- **Breakpoints:** 600px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgb(0, 0, 0) 4px 4px 0px 0px`
- `rgb(0, 0, 0) 5px 5px 0px 0px`
- `rgb(0, 0, 0) 6px 6px 0px 0px`

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

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

- **button-primary (“EMAIL ME”):** #FACC15 fill, #000000 text, 14px/700, padding 14px 20px, border 3px solid #000000, shadow `rgb(0, 0, 0) 5px 5px 0px 0px`.
- **button-secondary (“VIEW PROJECTS”):** #0E9AB5 fill, #FFFFFF text, 14px/700, padding 14px 20px, border 3px solid #000000, shadow `rgb(0, 0, 0) 5px 5px 0px 0px`.
- **button-outline (“HIRE ME”):** #FFFFFF fill, #000000 text, 14px/700, padding 14px 20px, border 3px solid #000000, shadow `rgb(0, 0, 0) 5px 5px 0px 0px`.
- **button-ghost (“PSN”):** transparent fill, #000000 text, 16px/400, padding 0px.
- **input-field (“Enter your name”):** #F8F5EA fill, #000000 text, 16px/400, padding 12px 16px, border 3px solid #000000.
- **card:** #FFFFFF fill, #000000 text, 16px/400, padding 0px, border 3px solid #000000, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(132, 204, 22) 6px 6px 0px 0px`.
- **link:** transparent fill, #000000 text, padding 0px.

## Do's and Don'ts

- Do use #F8F5EA for the page and lift surfaces in small steps: #E8F6F9, #FFFFFF.
- Do keep text in 2 levels: #000000, #9F9FA9.
- Do use #FACC15 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (8px, 10px, 24px).
- Don't use #9F9FA9 for body text; it reaches 2.40:1 on #F8F5EA. Keep it for large text or metadata.
- Don't introduce new font families beyond Press Start 2P, Plus Jakarta Sans, Silkscreen and JetBrains Mono.
- Don't use #FACC15 for large backgrounds or body text.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.15s, 0.12s, 0.25s. Longer ambient animations run 4.5s, 1.1s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`, `ease-in-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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