Thelyo

Generated Nov 4, 2026

DESIGN.md for portfolio.vynn.dev

portfolio.vynn.dev6 colors6 componentsInter

Remix

4 screenshots captured· portfolio.vynn.dev

1 / 4 · VynDev — Portfolio · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Portfolio
description: |
  VynDev's design system embodies a dark, minimalist technical aesthetic paired
  with purposeful green accents that signal actionability and energy. The visual
  language prioritizes deep blacks and near-black surfaces (#080808, #111111)
  that recede into the background, allowing content and interaction points to
  breathe. Typography is bold and confident—particularly the display sizes with
  aggressive negative letter-spacing that creates visual tension and draws the
  eye. The system favors stark contrast between text and background, coupled
  with subtle micro-interactions (lift on hover, slight scale, drift) that
  reward exploration without overwhelming. Every element feels purposefully
  placed in a grid-based, spacious layout where whitespace is as much a design
  decision as color. The brand accent green (#22C55E) punctuates the achromatic
  palette, appearing as a status indicator and availability signal, reinforcing
  a sense of activeness and readiness.
source:
  url: "https://portfolio.vynn.dev"
  pagesAnalyzed: 2
  extractedAt: 2026-11-04
  tokensMeasured: true
colors:
  primary: "#FFFFFF"
  accent: "#22C55E"
  canvas: "#080808"
  surface: "#111111"
  on-primary: "#080808"
  ink: "#FFFFFF"
  body: "#A0A0A0"
  muted: "#444444"
typography:
  display-xxl:
    fontFamily: Inter
    fontSize: 128px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: -5.76px
  display-xl:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.44px
  heading-md:
    fontFamily: Inter
    fontSize: 35.2px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -1.41px
  heading-sm:
    fontFamily: Inter
    fontSize: 16.8px
    fontWeight: 600
    letterSpacing: -0.17px
  body-xl:
    fontFamily: Inter
    fontSize: 21.6px
    fontWeight: 400
    letterSpacing: -0.22px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 700
    letterSpacing: -0.32px
  body-md:
    fontFamily: Inter
    fontSize: 13.6px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body-md-strong:
    fontFamily: Inter
    fontSize: 13.6px
    fontWeight: 500
    letterSpacing: 0px
  body-sm:
    fontFamily: Inter
    fontSize: 12.48px
    fontWeight: 400
    letterSpacing: 0px
  button:
    fontFamily: Inter
    fontSize: 11.2px
    fontWeight: 700
    letterSpacing: 0.9px
  caption-lg:
    fontFamily: Inter
    fontSize: 11.52px
    fontWeight: 600
    letterSpacing: 0.69px
    textTransform: uppercase
  caption-lg-strong:
    fontFamily: Inter
    fontSize: 11.52px
    fontWeight: 700
    letterSpacing: 0.69px
    textTransform: uppercase
  caption-md:
    fontFamily: Inter
    fontSize: 11.2px
    fontWeight: 700
    letterSpacing: 1.34px
    textTransform: uppercase
  caption-sm:
    fontFamily: Inter
    fontSize: 10.88px
    fontWeight: 700
    letterSpacing: 0.65px
    textTransform: uppercase
  caption-xs:
    fontFamily: Inter
    fontSize: 10.4px
    fontWeight: 700
    letterSpacing: 0.73px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 8px
  sm: 12px
  md: 18px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 36px
  xxxl: 40px
  section: 48px
  band: 64px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F9FDFB"
    surface: "#EFF3F1"
    surfaceRaised: "#E8EBE9"
    text: "#121A15"
    textMuted: "#696F6C"
    border: "#D6DAD8"
    accent: "#167F3D"
    accentFg: "#FFFFFF"
    focusRing: "#1CA24D"
    elevation: shadow
  dark:
    bg: "#080808"
    surface: "#111111"
    surfaceRaised: "#242424"
    text: "#FFFFFF"
    textMuted: "#A0A0A0"
    border: "#262626"
    accent: "#22C55E"
    accentFg: "#080808"
    focusRing: "#22C55E"
    elevation: "border+surface"
components:
  button-primary:
    textColor: "{colors.on-primary}"
    height: 39px
    padding: "10px 20px 10px 20px"
    fontSize: 14px
    fontFamily: Inter
    fontWeight: 500
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-primary-sm:
    typography: "{typography.body-md-strong}"
    textColor: "{colors.ink}"
    height: 28px
    padding: "6px 14px 6px 14px"
    rounded: "{rounded.xs}"
    backgroundColor: "rgba(255, 255, 255, 0.06)"
  button-outline:
    textColor: "{colors.body}"
    border: "1px solid rgba(255, 255, 255, 0.07)"
    height: 39px
    padding: "10px 20px 10px 20px"
    fontSize: 14px
    fontFamily: Inter
    fontWeight: 500
    rounded: "{rounded.sm}"
  button-outline-sm:
    typography: "{typography.button}"
    textColor: "{colors.body}"
    border: "1px solid rgba(255, 255, 255, 0.07)"
    height: 26px
    padding: "5px 10px 5px 10px"
    rounded: "{rounded.xs}"
  card:
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.07)"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    rounded: "{rounded.md}"
    backgroundColor: "{colors.surface}"
  card-sm:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    backgroundColor: "rgb(14, 14, 14)"
  badge-primary:
    textColor: "{colors.body}"
    border: "1px solid rgba(255, 255, 255, 0.07)"
    height: 29px
    padding: "6px 14px 6px 14px"
    fontSize: 12.8px
    fontFamily: Inter
    fontWeight: 400
    rounded: 100px
    backgroundColor: "rgba(255, 255, 255, 0.04)"
  badge-primary-sm:
    typography: "{typography.caption-xs}"
    textColor: "{colors.muted}"
    border: "1px solid rgba(255, 255, 255, 0.07)"
    height: 21px
    padding: "3px 9px 3px 9px"
    rounded: 100px
    backgroundColor: "rgba(255, 255, 255, 0.04)"
  navigation:
    textColor: "{colors.ink}"
    height: 60px
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    backgroundColor: "rgba(8, 8, 8, 0.82)"
  footer:
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.07)"
    padding: "36px 0px 36px 0px"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
  link:
    typography: "{typography.body-md-strong}"
    textColor: "{colors.body}"
    padding: "6px 14px 6px 14px"
    rounded: "{rounded.xs}"
  link-sm:
    typography: "{typography.body-lg-strong}"
    textColor: "{colors.ink}"
states:
  nav-hover:
    target: nav
    state: hover
    opacity: 0.65
  button-hover:
    target: button
    state: hover
    backgroundColor: "rgba(255, 255, 255, 0.05)"
  card-hover:
    target: card
    state: hover
    transform: "translateY(-3px)"
  link-hover:
    target: link
    state: hover
    transform: "translateX(5px)"
  input-focus:
    target: input
    state: focus
    borderColor: "rgba(255, 255, 255, 0.28)"
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 3
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 53
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 540
    gridColumns: 6
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 580
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 92
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1160
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 115
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1160
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 128
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 18
  gradientsFound: 0
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by VynDev

1. Visual Theme & Atmosphere

VynDev's design system embodies a dark, minimalist technical aesthetic paired with purposeful green accents that signal actionability and energy. The visual language prioritizes deep blacks and near-black surfaces ({colors.canvas} — #080808, {colors.surface} — #111111) that recede into the background, allowing content and interaction points to breathe. Typography is bold and confident—particularly the display sizes with aggressive negative letter-spacing that creates visual tension and draws the eye. The system favors stark contrast between text and background, coupled with subtle micro-interactions (lift on hover, slight scale, drift) that reward exploration without overwhelming. Every element feels purposefully placed in a grid-based, spacious layout where whitespace is as much a design decision as color. The brand accent green ({colors.accent} — #22C55E) punctuates the achromatic palette, appearing as a status indicator and availability signal, reinforcing a sense of activeness and readiness.

Key Characteristics:

Deep, near-black canvas and surface palette for technical credibility
High-contrast white typography with aggressive negative letter-spacing on display scales
Green accent used sparingly for status, availability, and brand marks
Micro-interactions leverage subtle transforms (translateY, translateX, scale) and opacity shifts
Pill-shaped buttons and badges ({rounded.full}) contrasted against sharp card corners
Generous vertical and horizontal spacing creates breathing room
Navigation and cards respond to hover with elevation shift and color brighten
No decorative imagery or gradients; pure color-blocking and typography-led design

2. Color Palette & Roles

Primary

Primary / Brand / Ink ({colors.primary} — #FFFFFF): Primary CTA fill, all primary headings, brand mark, high-contrast body text, and active/hover states on interactive elements. Delivers the system's main visual weight.

Accent Colors

Brand Accent ({colors.accent} — #22C55E): Status indicator, availability signal, accent marks alongside neutral typography. Provides energy and signals live/active states.

Neutral Scale (Text & Surface)

Canvas / On Primary ({colors.canvas} — #080808): Default page background. Creates the deep foundation upon which all cards and text sit.
Surface ({colors.surface} — #111111): Card and panel backgrounds. Slightly elevated from canvas to create minimal visual separation.
Body ({colors.body} — #A0A0A0): Primary body copy text. Readable on dark backgrounds; sits between #FFFFFF and #444444 in the contrast ladder.
Muted ({colors.muted} — #444444): Secondary text, captions, and labels. Used for reduced emphasis and hierarchical separation.

3. Typography Rules

Font Family

Primary: Inter (https://fonts.googleapis.com/), fallback stack: font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Inter	128px	800	0.95	-5.76px	Hero/main name. Extreme negative tracking creates visual drama.
Display XL	Inter	48px	700	1.1	-1.44px	Section headings, hero subheadings. Bold tracking compression.
Heading MD	Inter	35.2px	800	1	-1.41px	Large card or section titles. Tight, deliberate spacing.
Heading SM	Inter	16.8px	600	not measured	-0.17px	Subsection titles, small headings.
Body XL	Inter	21.6px	400	not measured	-0.22px	Larger body, intro text. Slight tracking adjustment.
Body LG Strong	Inter	16px	700	not measured	-0.32px	Emphasized body copy, labels.
Body LG	Inter	16px	400	1.8	0px	Primary body copy. Generous line height for readability.
Body MD Strong	Inter	13.6px	500	not measured	0px	Links, emphasized smaller text.
Body MD	Inter	13.6px	400	1.7	0px	Secondary body copy, descriptions.
Body SM	Inter	12.48px	400	not measured	0px	Small body text, dense copy.
Button	Inter	11.2px	700	not measured	0.9px	Primary and secondary button text. All-caps styling in some contexts.
Caption LG Strong	Inter	11.52px	700	not measured	0.69px	Emphasis on small caps. Uppercase.
Caption LG	Inter	11.52px	600	not measured	0.69px	Elevated caption. Uppercase.
Caption MD	Inter	11.2px	700	not measured	1.34px	Wide-tracked small labels. Uppercase.
Caption SM	Inter	10.88px	700	not measured	0.65px	Smallest caption size. Uppercase.
Caption XS	Inter	10.4px	700	not measured	0.73px	Minimal label. Uppercase.

Principles

Negative letter-spacing on display sizes creates visual tension and premium feel; body copy uses 0 spacing for legibility.
Weight distribution: Headings favor 700–800 weight; body defaults to 400, with 500–700 used for emphasis.
Line height: Larger sizes compress (0.95–1.1), body text expands (1.7–1.8) for scanability.
All-caps captions use wide letter-spacing (0.65–1.34px) to prevent cramping.
Hierarchy is driven by size and weight, not color — all primary text is {colors.primary} (#FFFFFF).

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#FFFFFF)
Text color: {colors.canvas} (#080808)
Padding: 10px 20px
Font size: 14px, weight 500
Border radius: {rounded.xs} (8px)
Border: none
Width: 176px, height: 39px
Box shadow: none
Hover state: Background rgba(255, 255, 255, 0.88), box-shadow rgba(255, 255, 255, 0.1) 0px 8px 24px, transform translateY(-1px)

Primary Button Small

Background: rgba(255, 255, 255, 0.06)
Text color: {colors.primary} (#FFFFFF)
Padding: 6px 14px
Font size: 13.6px, weight 500
Border radius: {rounded.xs} (8px)
Border: none
Width: 66px, height: 28px
Box shadow: none
Hover state: Background rgba(255, 255, 255, 0.05), transform translateY(-1px), box-shadow rgba(255, 255, 255, 0.08) 0px 6px 20px

Outline Button

Background: transparent
Text color: {colors.body} (#A0A0A0)
Padding: 10px 20px
Font size: 14px, weight 500
Border: 1px solid rgba(255, 255, 255, 0.07)
Border radius: {rounded.xs} (8px)
Width: 154px, height: 39px
Box shadow: none
Hover state: Background rgba(255, 255, 255, 0.05), border color updated, text color {colors.primary} (#FFFFFF), transform translateY(-1px)

Outline Button Small

Background: transparent
Text color: {colors.body} (#A0A0A0)
Padding: 5px 10px
Font size: 11.2px, weight 700
Border: 1px solid rgba(255, 255, 255, 0.07)
Border radius: {rounded.xs} (8px)
Width: 37.8px, height: 26px
Letter spacing: 0.9px
Box shadow: none
Hover state: Border color updated, background rgba(255, 255, 255, 0.04), transform translateY(-1px)

Cards & Containers

Card Default

Background: {colors.surface} (#111111)
Text color: {colors.primary} (#FFFFFF)
Border: 1px solid rgba(255, 255, 255, 0.07)
Border radius: {rounded.md} (18px)
Padding: 0px (content handled internally)
Width: 348px, height: 405px
Font size: 16px, weight 400
Box shadow: none
Hover state: Transform translateY(-5px), border color brightened, box-shadow rgba(0, 0, 0, 0.55) 0px 24px 60px, filter grayscale(0) brightness(1), transform scale(1.08)

Card Default Small

Background: rgb(14, 14, 14)
Text color: {colors.primary} (#FFFFFF)
Border: none
Border radius: {rounded.none} (0px)
Padding: 0px
Width: 346px, height: 170px
Font size: 16px, weight 400
Box shadow: none
Hover state: Transform scale(1.05), filter grayscale(0) brightness(1)

Badges

Badge Primary

Background: rgba(255, 255, 255, 0.04)
Text color: {colors.body} (#A0A0A0)
Border: 1px solid rgba(255, 255, 255, 0.07)
Border radius: {rounded.full} (9999px)
Padding: 6px 14px
Font size: 12.8px, weight 400
Width: 153px, height: 29px

Badge Primary Small

Background: rgba(255, 255, 255, 0.04)
Text color: rgb(68, 68, 68)
Border: 1px solid rgba(255, 255, 255, 0.07)
Border radius: {rounded.full} (9999px)
Padding: 3px 9px
Font size: 10.4px, weight 700
Width: 94.3px, height: 21px
Letter spacing: 0.73px

Inputs & Forms

Input Focus State

Border color: rgba(255, 255, 255, 0.28) (on focus)
Baseline border: rgba(255, 255, 255, 0.07)

Navigation

Navigation Default

Background: rgba(8, 8, 8, 0.82) (semi-transparent canvas with slight opacity)
Text color: {colors.primary} (#FFFFFF)
Border: none
Height: 60px
Padding: 0px
Width: full viewport
Font size: 16px, weight 400
Border radius: {rounded.none} (0px)
Hover state on nav links: Opacity 0.65, background rgba(255, 255, 255, 0.06), text color {colors.primary} (#FFFFFF)

Footer

Footer Default

Background: transparent
Text color: {colors.primary} (#FFFFFF)
Border: 1px solid rgba(255, 255, 255, 0.07) (top border)
Border radius: {rounded.none} (0px)
Padding: 36px 0px
Height: 103px
Width: full viewport
Font size: 16px, weight 400

5. Layout Principles

Spacing System

Base unit: 4px

{spacing.xxs} = 4px — Minimal internal gaps, tight component spacing
{spacing.xs} = 8px — Small gaps between elements, tight padding
{spacing.sm} = 12px — Button/badge padding, small margins
{spacing.md} = 16px — Standard padding, common margin unit
{spacing.lg} = 20px — Generous internal padding on cards
{spacing.xl} = 24px — Section margin between content blocks
{spacing.xxl} = 36px — Large gaps, nav/footer padding
{spacing.xxxl} = 40px — Hero section internal spacing
{spacing.section} = 48px — Page section spacing
{spacing.band} = 64px — Extra-large vertical separation

Usage Context:

Cards use {spacing.md} (16px) padding on content
Hero sections span {spacing.band} (64px) vertically
Button groups use {spacing.xs} (8px) gaps
Section headings sit atop {spacing.section} (48px) of breathing room

Grid & Container

Max width (1280px+): 1160px content column
Tablet (768px): 540px content column
Mobile (375px): 375px content column (full viewport width minus gutters if any)
Column strategy: 6-column grid measured at 768px and above; responsive scaling below
Section padding-x: 0px measured across all breakpoints (full-width sections with internal card margins)

Cards in project gallery use 3-column layout on desktop, reflow on tablet, single column on mobile.

Whitespace Philosophy

The system relies on whitespace as a primary design tool. Every section is separated by at least {spacing.section} (48px), and hero content is given {spacing.band} (64px) breathing room. Cards float on the canvas with 1px solid rgba(255, 255, 255, 0.07) borders that define their edges subtly, not aggressively. Between text and interactive elements, padding is generous ({spacing.lg} to {spacing.xxl}) to prevent cognitive crowding. This whitespace makes the content feel curated and premium rather than dense.

Border Radius Scale

{rounded.none} = 0px — Sharp corners on cards, sections, footer (architectural edges)
{rounded.xs} = 8px — Buttons, small badges, input fields (interactive elements)
{rounded.sm} = 12px — Medium components (not widely used in measured data)
{rounded.md} = 18px — Primary card container (project gallery cards)
{rounded.full} = 9999px — Badges, status indicators (pill-shaped)

Component radius mapping:

Buttons: {rounded.xs} (8px)
Badges: {rounded.full} (9999px)
Cards (default): {rounded.md} (18px)
Cards (small): {rounded.none} (0px)

Border Widths

Thin: 1px — Used on all borders (buttons, cards, input fields, navigation underlines)

All borders in the system use a single 1px stroke weight with semantic color rgba(255, 255, 255, 0.07) as the default hairline, brightening to rgba(255, 255, 255, 0.28) on interactive focus/hover states.

6. Depth & Elevation

Elevation Strategy

The system uses color-blocking elevation—depth is created through surface color changes rather than heavy shadows. The canvas (#080808) sits behind the surface (#111111), and cards float above with a hairline border. Interaction depth is achieved through micro-transforms (translateY, scale) and subtle shadow lifts, not layered shadow stacks.

Level	Treatment	Use
Flat (Base)	No shadow, border only: `1px solid rgba(255, 255, 255, 0.07)`	Cards at rest, inputs, badges
Elevated (Hover)	Box-shadow: `rgba(255, 255, 255, 0.1) 0px 8px 24px`, transform: `translateY(-1px)`	Primary button hover
High Lift (Card Hover)	Box-shadow: `rgba(0, 0, 0, 0.55) 0px 24px 60px`, transform: `translateY(-5px)`	Project gallery card on hover
Micro Lift	Box-shadow: `rgba(255, 255, 255, 0.08) 0px 6px 20px`, transform: `translateY(-1px)`	Small button hover

Shadow Philosophy: Shadows are reserved for hover states only. At rest, components are flat and rely on border and background color to define edges. On interaction, shadows emerge to signal lift and approachability. The dark shadow (rgba(0, 0, 0, 0.55)) is used sparingly on large cards to create dramatic depth; lighter shadows on buttons provide subtle feedback.

Opacity Levels

The system defines four opacity tiers:

100% (1.00): Full opacity, primary content and CTA states
97% (0.97): Near-full, minimal transparency
91% (0.91): Slight transparency, secondary surfaces
76% (0.76): Distinct transparency, muted text or disabled states

Navigation uses 0.82 opacity (rgba(8, 8, 8, 0.82)) to create a frosted effect over the canvas. Buttons in hover states shift between 0.04 and 0.88 opacity for active feedback.

Z-index / Layering

Modal: z-index: 1000 — Floating modals, dropdowns, and overlays sit atop all other content

The system measures only one explicit z-index value, suggesting a simple layering model where modals and popovers are isolated on a high layer and everything else flows in document order.

7. Do's and Don'ts

Do

Use white ({colors.primary} — #FFFFFF) as the primary text for all headings and key CTAs. It is the system's strongest signal.
Pair white text with deep backgrounds ({colors.canvas} and {colors.surface}) to maintain WCAG AAA contrast.
Apply negative letter-spacing to display and heading sizes (display-xl, display-xxl, heading-md) — this is a defining brand trait and should be preserved exactly as measured.
Use green ({colors.accent} — #22C55E) for status indicators, availability badges, and brand mark accents only—not for all CTAs.
Generously space sections with {spacing.section} or {spacing.band} to create breathing room and premium feel.
Lift cards and buttons on hover using transform: translateY(-1px to -5px) and subtle shadows; avoid static hover states.
Use rgba(255, 255, 255, 0.07) borders as the default hairline separator; brighten on focus/hover to rgba(255, 255, 255, 0.28).
Keep buttons pill-shaped with {rounded.full} for badges and {rounded.xs} for buttons; sharp corners for cards and sections.
Preserve Inter as the system font; it is critical to the technical, modern aesthetic.
Use opacity and scale transforms for micro-interactions; avoid color flashing or opacity-only hover effects.

Don't

Do not use accent green for body copy or general UI chrome. Reserve it for actionable, status-bearing elements.
Do not remove negative letter-spacing from display sizes. The compression is intentional and drives visual hierarchy.
Do not invent new shadow values. Only apply shadows on hover states; leave rest states flat with borders only.
Do not use rounded corners on cards (> 8px radius) unless specifically required; the system favors sharp (0px) or subtle (18px for large cards).
Do not add drop shadows to text. All text contrast is achieved through color relationships, not shadow effects.
Do not shrink spacing below {spacing.md} (16px) between major content sections; the system breathes.
Do not change the modal z-index (1000); use it as the ceiling for floating layers.
Do not apply filters (grayscale, brightness) outside of card hover states.
Do not stack multiple opacity levels on a single element; choose one opacity tier and apply it cleanly.
Do not change Inter font weight for body copy below 400 (normal); reserve 500+ for headings and emphasis.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Column	Grid Columns	Nav Links Visible	Largest Heading Size	Body Text Size	Section Padding-X
Mobile	375px	375px	3	4	53px	16px	0px
Tablet	768px	540px	6	4	72px	16px	0px
Small Desktop	1024px	580px	6	8	92px	16px	0px
Desktop	1280px	1160px	6	8	115px	16px	0px
Large Desktop	1440px	1160px	6	8	128px	16px	0px

Key breakpoint behavior:

375px to 768px: Content column scales proportionally; heading size grows from 53px to 72px; grid adjusts from 3 to 6 columns.
768px to 1024px: Heading size continues scaling (72px → 92px); content column remains responsive.
1024px and above: Content column plateaus at 1160px; headings reach maximum sizes (115–128px).
Navigation: 4 links visible at mobile/tablet; expands to 8 at small desktop and above. No menu toggle was measured, indicating all nav items remain visible across all breakpoints.

Touch Targets

Minimum touch target size: 44px × 44px (inferred from button and interactive element sizing):

Buttons: minimum 26px height (small variants), standard 39px height (primary)
Badge/link touch zone: 28–29px height
Navigation items: within 60px height bar

Recommendation: Ensure all interactive elements meet or exceed 44px × 44px on mobile viewports for accessibility compliance.

Collapsing Strategy

Cards: 3-column grid on desktop (1280px+) → 2-column on tablet (768px) → 1-column stack on mobile (375px)
Content column: Grows from 375px (mobile) to 1160px (1280px+), scaling proportionally at intermediate breakpoints
Heading sizes: Scale proportionally from 53px (375px) to 128px (1440px), never shrinking
Section padding: No horizontal padding observed; sections remain full-width with internal gutters
Navigation: All 4–8 primary links remain visible; no hamburger menu was measured
Footer: Full-width at all breakpoints, content centered within max-width constraint

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Headings: Primary (#FFFFFF) — use for buttons, main text, and brand marks
Brand Accent: Accent (#22C55E) — status indicators, availability badges, live markers only
Page Background: Canvas (#080808) — default page backdrop
Card/Panel Background: Surface (#111111) — elevated content containers
Body Text: Body (#A0A0A0) — primary copy, secondary emphasis
Muted/Caption Text: Muted (#444444) — reduced emphasis, metadata, labels
Borders: rgba(255, 255, 255, 0.07) (default) → rgba(255, 255, 255, 0.28) (focus/hover)

Iteration Guide

Start with Inter font family (fallback: system sans-serif) and ensure negative letter-spacing on all display/heading roles; this drives the brand identity.
Apply white text ({colors.primary} — #FFFFFF) to all primary headings and CTAs; use {colors.body} (#A0A0A0) for secondary copy.
Set canvas background to {colors.canvas} (#080808); surface cards and containers at {colors.surface} (#111111).
Border all interactive elements with 1px solid rgba(255, 255, 255, 0.07); brighten on hover to rgba(255, 255, 255, 0.28).
Button styling: Primary buttons use white background with dark text; secondary/outline buttons are transparent with light borders.
Card interactions: Lift on hover with transform: translateY(-5px) and shadow rgba(0, 0, 0, 0.55) 0px 24px 60px; scale smaller cards with transform: scale(1.05) or scale(1.08).
Spacing: Use {spacing.section} (48px) or {spacing.band} (64px) between major sections; {spacing.md} (16px) for internal component padding.
Badges & status: Pill-shaped ({rounded.full}) with rgba(255, 255, 255, 0.04) background and {colors.body} text; use green accent for live/active indicators.
Navigation: Fixed or sticky at 60px height, semi-transparent background rgba(8, 8, 8, 0.82), full-width at all breakpoints.
Responsive: Content scales proportionally up to 1160px max-width; heading sizes scale from 53px (375px viewport) to 128px (1440px viewport).

10. Known Gaps

Interaction states: Only hover states were extracted; active, focus, disabled, and visited states may exist but were not captured. Implement standard focus indicators for keyboard navigation and disabled opacity reductions (recommend 0.5 opacity for disabled elements).
Semantic color ramp: No error, warning, success, or info colors were measured. The site does not expose a semantic status palette; implement custom error/success states if needed for forms and alerts.
Gradients and decorative effects: No gradient backgrounds or mesh overlays were found. The system is pure color-blocking.
Dark mode / Light mode: Only one theme was analyzed. The extraction represents the site's shipped design; a derived light-mode theme was not extracted or confirmed.
Animation and transition timings: No transition durations or easing functions were extracted from stylesheets. Implement transitions for hover states (recommend 150ms–200ms ease-out for snappy feel).
Elevation shadows on non-hover states: Only hover-state shadows were captured. Rest-state shadows are absent; all depth at rest comes from surface color changes.
Opacity on interactive elements at rest: Only hover-state opacity changes were captured (e.g., button background opacity). Rest-state opacity values for buttons and badges are inferred but not explicitly measured.
Breakpoint-specific component variants: Button and card sizes may differ at mobile; only desktop and measured breakpoints are documented.
Authenticated surfaces: No pages behind login were analyzed. If the site has account pages, admin panels, or protected content, their styling is not covered.
Micro-interaction sequences: Only single-state transforms were captured (e.g., translateY(-1px)). Multi-step animations or sequences are not documented.
Icon styling: Icons appear in the screenshots (GitHub, Discord, email, play button, status indicator) but no icon-specific styling was extracted. Assume icons inherit text color and scale proportionally to their context.
Form validation states: Input focus was captured, but validation error/success state styling was not. Implement with border color or background changes as needed.
Accessibility tokens: No ARIA labels, focus rings, or screen-reader text was analyzed. Ensure semantic HTML and standard focus management practices are applied.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from portfolio.vynn.dev

Primary

#FFFFFF

Primary CTA, brand accent, active state; Headings / primary text

#22C55E

Brand hue used alongside the achromatic primary

Neutral

#080808

Default page background; label colour on brand surfaces

#111111

Card / panel background

#A0A0A0

Body copy

#444444

Captions, secondary text

Typography · InterGoogle Fonts

body16px · 400 · 28.8px

h316.8px · 600

body13.6px · 400 · 23.12px

link13.6px · 500

button11.2px · 700

caption11.2px · 700

caption10.4px · 700

body12.48px · 400

caption11.52px · 600

caption10.88px · 700

body16px · 700

h1128px · 800 · 121.6px

h248px · 700 · 52.8px

body21.6px · 400

body17.6px · 400

heading35.2px · 800 · 35.2px

body14px · 500

caption11.52px · 700

body12.8px · 400

h148px · 700 · 52.8px

Spacing

8px

24px

12px

16px

20px

40px

140px

4px

Components · 6

Remixes of portfolio.vynn.dev

Latest remixes

No public remixes yet. Be the first to make one.

Remix it