Sarthak Sharma design system

---
version: alpha
name: Sarthak Sharma
description: "Dark monochrome interface measured from sarthak-sharma-portfolio-six.vercel.app: Instrument Serif type with DM Sans, tonal surfaces and pill-shaped controls."
colors:
  background: "#030303"
  surface: "#030303"
  on-surface: "#F1EEE8"
  on-background: "#F1EEE8"
  on-surface-variant: "#D5D0C8"
  on-surface-muted: "#C4B7A7"
  on-surface-subtle: "#B0AAA2"
  surface-container-low: "#080808"
  surface-container: "#171410"
  overlay: "#0D0D0DBD"
  overlay-strong: "#91725265"
  outline: "#F1EEE829"
  outline-variant: "#6F5B4666"
  primary: "#E4D8C6"
  on-primary: "#17120D"
  inverse-surface: "#C8C8C8"
  secondary: "#FF8C59"
  tertiary: "#CB8E5B"
typography:
  headline-display:
    fontFamily: Instrument Serif
    fontSize: 183px
    fontWeight: 480
    lineHeight: 0.98
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Instrument Serif
    fontSize: 79px
    fontWeight: 400
    lineHeight: 1.03
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Instrument Serif
    fontSize: 44.5px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.025em
  headline-sm:
    fontFamily: Instrument Serif
    fontSize: 43px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.025em
  title-lg:
    fontFamily: Instrument Serif
    fontSize: 37.5px
    fontWeight: 400
    lineHeight: 1.15
  body-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.75
  body-lg:
    fontFamily: DM Sans
    fontSize: 19px
    fontWeight: 450
    letterSpacing: -0.026em
  body-sm:
    fontFamily: DM Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.75
  caption:
    fontFamily: DM Sans
    fontSize: 12px
    fontWeight: 400
  label-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
  code:
    fontFamily: SFMono-Regular
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
  headline-display-mobile:
    fontFamily: Instrument Serif
    fontSize: 74px
    fontWeight: 480
    lineHeight: 0.95
    letterSpacing: -0.04em
  headline-lg-mobile:
    fontFamily: Instrument Serif
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.03
    letterSpacing: -0.035em
  title-lg-mobile:
    fontFamily: Instrument Serif
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.15
rounded:
  xs: 3px
  sm: 12px
  md: 13px
  lg: 22px
  xl: 40px
  full: 9999px
spacing:
  xs: 2px
  sm: 5px
  md: 12px
  lg: 20px
  xl: 37px
  gutter: 20px
  section: 120px
  margin: 72px
  container: 1120px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 12px 15px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.xl}"
    padding: 15px 22px
    height: 48px
  button-tertiary:
    textColor: "#F4E8D5"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 0px 18px
    height: 42px
  button-ghost:
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 12px 15px
  card:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 35px 0px 50px 0px
  link:
    textColor: "{colors.on-surface}"
---

# Sarthak Sharma Design System

## Overview

Sarthak Sharma describes itself as: “I build products, teach developers, and help education businesses grow. Explore Sarthak Sharma’s work across software engineering, technical education, and EdTech leadership.” The interface is dark, built on **Near Black (#030303)** with **Warm Mist (#F1EEE8)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Instrument Serif** and **DM Sans**, with **SFMono-Regular** for code. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [sarthak-sharma-portfolio-six.vercel.app](https://sarthak-sharma-portfolio-six.vercel.app/) on November 4, 2026 at 1440×900 and 390×844 from 353 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 16 roles, plus gradient stops #FF8C59.

- **Near Black (#030303):** Page background, seen 8 times. Token `background`, CSS `--bg`.
- **Warm Mist (#F1EEE8):** Primary text and headings, seen 61 times. Token `on-surface`, CSS `--ink`.
- **Warm Silver (#D5D0C8):** Secondary text, seen 8 times. Token `on-surface-variant`.
- **Light Orange (#C4B7A7):** Muted text and metadata, seen 6 times. Token `on-surface-muted`.
- **Warm Gray (#B0AAA2):** Subtle text and placeholders, seen 8 times. Token `on-surface-subtle`.
- **Near Black (#080808):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Warm Charcoal (#171410):** Cards and panels, seen 6 times. Token `surface-container`.
- **Charcoal 74% (#0D0D0DBD):** Translucent fill for cards and controls, seen 2 times. Token `overlay`.
- **Orange 40% (#91725265):** Stronger translucent fill, seen 2 times. Token `overlay-strong`.
- **Warm Mist 16% (#F1EEE829):** Borders and dividers, seen 11 times. Token `outline`, CSS `--line`.
- **Dark Orange 40% (#6F5B4666):** Secondary dividers, seen 6 times. Token `outline-variant`.
- **Light Orange (#E4D8C6):** Primary buttons and calls to action, seen 6 times. Token `primary`.
- **Warm Charcoal (#17120D):** Text and icons on primary. Token `on-primary`.
- **Silver (#C8C8C8):** High-contrast fills, seen 4 times. Token `inverse-surface`.
- **Orange (#FF8C59):** Accent in text, fills and borders, seen 5 times. Token `secondary`, CSS `--blue`.
- **Orange (#CB8E5B):** Accent in text, fills and borders, seen 3 times. Token `tertiary`.

## Typography

**Instrument Serif**, **DM Sans** and **SFMono-Regular** (monospace) share the interface. Fallback stack: `Instrument Serif, Instrument Serif Fallback, Georgia, serif`.

- **headline-display:** Instrument Serif 183px at weight 480, line height 0.98, tracking -0.05em (74px on mobile). Page title (h1).
- **headline-lg:** Instrument Serif 79px at weight 400, line height 1.03, tracking -0.035em (46px on mobile). Section headings (h2).
- **headline-md:** Instrument Serif 44.5px at weight 400, line height 1.08, tracking -0.025em. Sub-section headings.
- **headline-sm:** Instrument Serif 43px at weight 400, line height 1.08, tracking -0.025em. Card and feature titles.
- **title-lg:** Instrument Serif 37.5px at weight 400, line height 1.15 (33px on mobile). Small titles.
- **body-md:** DM Sans 14px at weight 400, line height 1.75. Body text.
- **body-lg:** DM Sans 19px at weight 450, tracking -0.026em. Lead paragraphs.
- **body-sm:** DM Sans 13px at weight 400, line height 1.75. Secondary and small text.
- **caption:** DM Sans 12px at weight 400. Captions and fine print.
- **label-md:** DM Sans 16px at weight 400. Buttons, navigation and labels.
- **code:** SFMono-Regular 8px at weight 400, line height 1.6. Code and technical values.

## Layout

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

- **Scale:** xs 2px, sm 5px, md 12px, lg 20px, xl 37px.
- **Sections:** 120px vertical padding between major sections.
- **Gaps:** 20px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1120px.
- **Page margin:** 72px on each side of full-width sections.
- **Breakpoints:** 360px, 700px, 701px, 900px, 1000px, 1050px, 1100px, 1600px, 1700px.

## Elevation & Depth

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

- `rgba(255, 255, 255, 0.133) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 4px 16px 0px`
- `rgba(255, 255, 255, 0.094) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.133) 0px 4px 16px 0px`
- `rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.133) 0px 2px 8px 0px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **xl (40px):** 20 elements.
- **sm (12px):** 16 elements.
- **full (9999px):** 16 elements.
- **xs (3px):** 4 elements.
- **md (13px):** 4 elements.
- **lg (22px):** 4 elements.

## Components

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

- **button-primary (“Build ↗”):** #E4D8C6 fill, #17120D text, 13px/400, padding 12px 15px, border 1px solid #E4D8C6.
- **button-secondary (“Explore my work Explore my work”):** #0D0D0DBD fill, #F1EEE8 text, 12px/400, 40px radius, padding 15px 22px, border 1px solid #E4D6BD55, shadow `rgba(255, 255, 255, 0.094) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.133) 0px 4px 16px 0px`.
- **button-tertiary (“Let’s talk Let’s talk”):** transparent fill, #F4E8D5 text, 12px/400, 13px radius, padding 0px 18px, border 1px solid #F1E7D547, shadow `rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.133) 0px 2px 8px 0px`.
- **button-ghost (“Teach ↗”):** transparent fill, #C4B7A7 text, 13px/400, padding 12px 15px, border 1px solid #5F503E.
- **card:** transparent fill, #F1EEE8 text, 16px/400, padding 35px 0px 50px 0px, border 1px solid #F1EEE829.
- **link:** transparent fill, #F1EEE8 text, padding 0px.

## Do's and Don'ts

- Do use #030303 for the page and lift surfaces in small steps: #080808, #171410.
- Do keep text in 4 levels: #F1EEE8, #D5D0C8, #C4B7A7, #B0AAA2.
- Do let contrast carry emphasis; primary actions use #E4D8C6 on #030303.
- Do set headlines in Instrument Serif with tight tracking (-0.05em).
- Do reuse the measured spacing steps (5px, 12px, 20px).
- Do make buttons and chips fully rounded (9999px); most other elements use 40px corners.
- Don't introduce new font families beyond Instrument Serif, DM Sans and SFMono-Regular.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.45s.

## Motion

Interface transitions are quick: 0.2s, 0.25s, 0.3s, 0.35s.

- **Easing:** `ease`, `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/sarthak-sharma-portfolio-six.vercel.app/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).