{
 "name": "Deli Paper",
 "version": 1,
 "color": {
  "themes": [
   {
    "id": "light",
    "name": "Light"
   },
   {
    "id": "dark",
    "name": "Dark"
   }
  ],
  "tokens": [
   {
    "name": "page",
    "value": {
     "light": "#e7e6e2",
     "dark": "#0f0f0e"
    },
    "usage": "The ground under the paper. Shows only where the paper is thin or still fading in."
   },
   {
    "name": "card",
    "value": {
     "light": "#fcfcfb",
     "dark": "#1a1a18"
    },
    "usage": "The sheet everything sits on: the one card on the paper, menus, dialogs."
   },
   {
    "name": "card-sunken",
    "value": {
     "light": "#efefeb",
     "dark": "#242421"
    },
    "usage": "Code blocks, inline code, quiet wells inside the card."
   },
   {
    "name": "text",
    "value": {
     "light": "#0a0a0a",
     "dark": "#f2f1ed"
    },
    "usage": "Running text on card and card-sunken. 19:1 light, 15:1 dark."
   },
   {
    "name": "heading",
    "value": {
     "light": "#171717",
     "dark": "#fafaf7"
    },
    "usage": "Headings, the wordmark, links in the header on hover, the ink button's fill."
   },
   {
    "name": "muted",
    "value": {
     "light": "#6b6b66",
     "dark": "#a5a49d"
    },
    "usage": "Secondary text: row details, captions, header links at rest. On card 5.2:1 light, 7.0:1 dark; on card-sunken 4.6:1 and 6.2:1."
   },
   {
    "name": "rule",
    "value": {
     "light": "#e6e6e1",
     "dark": "#2e2e2b"
    },
    "usage": "Hairlines between rows and under the pinned nav (1.2:1, decorative). Use rule-strong where a border marks a control."
   },
   {
    "name": "rule-strong",
    "value": {
     "light": "#8f8e88",
     "dark": "#6b6a64"
    },
    "usage": "Borders that mark a control (inputs, the outline button): 3.2:1 on card in both themes."
   },
   {
    "name": "on-ink",
    "value": {
     "light": "#fcfcfb",
     "dark": "#1a1a18"
    },
    "usage": "Text on a heading-coloured fill, such as the ink button's label."
   },
   {
    "name": "accent",
    "value": {
     "light": "#d6402f",
     "dark": "#f0705f"
    },
    "usage": "Deli red: text selection and the highlighter only. Never body text: 4.4:1 on card in light."
   },
   {
    "name": "on-accent",
    "value": {
     "light": "#fcfcfb",
     "dark": "#1a1a18"
    },
    "usage": "Selected text on an accent fill (4.4:1 light, 6.0:1 dark)."
   },
   {
    "name": "marker-red",
    "value": {
     "light": "rgba(214, 64, 47, 0.42)",
     "dark": "rgba(240, 112, 95, 0.4)"
    },
    "usage": "The highlighter stroke behind the one line that matters on a page."
   },
   {
    "name": "marker-yellow",
    "value": {
     "light": "rgba(247, 214, 74, 0.6)",
     "dark": "rgba(247, 214, 74, 0.32)"
    },
    "usage": "The stroke that paints in behind a link on hover."
   },
   {
    "name": "marker-blue",
    "value": {
     "light": "rgba(150, 195, 238, 0.7)",
     "dark": "rgba(120, 170, 230, 0.45)"
    },
    "usage": "The pastel blue stroke for a name in running text."
   },
   {
    "name": "credit",
    "value": {
     "light": "#1e7a4c",
     "dark": "#4cc38a"
    },
    "usage": "Money coming back to you, on card (5.2:1 light, 7.9:1 dark). Same lightness as debit, so always write the + sign; colour never carries it alone."
   },
   {
    "name": "debit",
    "value": {
     "light": "#c4302b",
     "dark": "#ff7a6e"
    },
    "usage": "Money you owe, on card (5.4:1 light, 6.9:1 dark). Always write the − sign; colour never carries it alone."
   },
   {
    "name": "focus",
    "value": {
     "light": "#0a0a0a",
     "dark": "#f2f1ed"
    },
    "usage": "The 2px keyboard focus outline, 3px off the element. Matches text so it reads on every surface."
   },
   {
    "name": "deli-ink",
    "value": {
     "light": "#111111",
     "dark": "#111111"
    },
    "usage": "Deli paper, the portfolio's colourway: the dark checks."
   },
   {
    "name": "deli-paper",
    "value": {
     "light": "#f7f7f7",
     "dark": "#f7f7f7"
    },
    "usage": "Deli paper, the portfolio's colourway: the light checks."
   },
   {
    "name": "ledger-credit",
    "value": {
     "light": "#bae0c4",
     "dark": "#bae0c4"
    },
    "usage": "Ledger paper (splitova): the pastel green checks, where + amounts are printed."
   },
   {
    "name": "ledger-debit",
    "value": {
     "light": "#f4c9c3",
     "dark": "#f4c9c3"
    },
    "usage": "Ledger paper (splitova): the pastel red checks, where − amounts are printed."
   },
   {
    "name": "ledger-credit-ink",
    "value": {
     "light": "#267046",
     "dark": "#267046"
    },
    "usage": "The + amounts printed on ledger-credit checks, at 72% opacity. Decorative (4.1:1) and hidden from assistive tech."
   },
   {
    "name": "ledger-debit-ink",
    "value": {
     "light": "#a83e32",
     "dark": "#a83e32"
    },
    "usage": "The − amounts printed on ledger-debit checks, at 68% opacity. Decorative (4.1:1) and hidden from assistive tech."
   },
   {
    "name": "hook-ink",
    "value": {
     "light": "#b3c8f1",
     "dark": "#b3c8f1"
    },
    "usage": "Hook paper (mhook): the pastel blue checks."
   },
   {
    "name": "hook-paper",
    "value": {
     "light": "#f9f5ed",
     "dark": "#f9f5ed"
    },
    "usage": "Hook paper (mhook): the cream checks."
   },
   {
    "name": "hook-accent",
    "value": {
     "light": "#5b8def",
     "dark": "#7ea6f2"
    },
    "usage": "mhook's highlighter and the console's active-tab underline. Marks, never text."
   }
  ]
 },
 "type": {
  "fonts": [
   {
    "family": "Manrope Variable",
    "file": "fonts/manrope-latin-wght-normal.woff2",
    "weight": "200 800",
    "style": "normal"
   }
  ],
  "families": {
   "sans": "\"Manrope Variable\", system-ui, sans-serif",
   "mono": "ui-monospace, \"SF Mono\", Menlo, monospace"
  },
  "groups": [
   {
    "name": "Display",
    "family": "sans",
    "styles": [
     {
      "name": "display",
      "fontSize": "48px",
      "lineHeight": "52px",
      "fontWeight": 600,
      "letterSpacing": "-2.16px",
      "sample": "Split bills in rupees. Settle up with UPI.",
      "usage": "The hero headline, once per page. Set as clamp(2.1rem, 5vw, 3rem) with max-width 15ch."
     },
     {
      "name": "title",
      "fontSize": "24px",
      "lineHeight": "28px",
      "fontWeight": 400,
      "letterSpacing": "-0.4px",
      "sample": "Projects",
      "usage": "Page and section headings (h1, h2). Light weight; size does the work."
     }
    ]
   },
   {
    "name": "Text",
    "family": "sans",
    "styles": [
     {
      "name": "body",
      "fontSize": "20px",
      "lineHeight": "32px",
      "fontWeight": 500,
      "sample": "I enjoy building cool stuff on the internet.",
      "usage": "All running text and row text. 18px/28px under 720px wide."
     },
     {
      "name": "body-compact",
      "fontSize": "18px",
      "lineHeight": "28px",
      "fontWeight": 500,
      "sample": "Groups for the flat and the trip.",
      "usage": "Body under 720px wide."
     },
     {
      "name": "subhead",
      "fontSize": "20px",
      "lineHeight": "28px",
      "fontWeight": 600,
      "sample": "Information mhook uses",
      "usage": "h3 inside posts and legal pages."
     },
     {
      "name": "nav",
      "fontSize": "20px",
      "lineHeight": "24px",
      "fontWeight": 500,
      "sample": "Index",
      "usage": "Header links, stacked or pinned. Muted at rest, heading on hover and when current."
     },
     {
      "name": "caption",
      "fontSize": "16px",
      "lineHeight": "24px",
      "fontWeight": 500,
      "sample": "Every group, where you stand",
      "usage": "Under phone frames and figures, in muted."
     }
    ]
   },
   {
    "name": "Interface",
    "family": "sans",
    "styles": [
     {
      "name": "ui",
      "fontSize": "14px",
      "lineHeight": "20px",
      "fontWeight": 500,
      "sample": "Recent notifications",
      "usage": "Dense app screens such as the mhook console: tables, menus, forms."
     },
     {
      "name": "ui-small",
      "fontSize": "12px",
      "lineHeight": "16px",
      "fontWeight": 500,
      "sample": "Has hooks",
      "usage": "Badges, table heads, timestamps."
     },
     {
      "name": "figure",
      "fontSize": "20px",
      "lineHeight": "24px",
      "fontWeight": 600,
      "sample": "+₹1,240",
      "usage": "Money and counts. Use tabular figures where numbers line up."
     }
    ]
   },
   {
    "name": "Code",
    "family": "mono",
    "styles": [
     {
      "name": "code",
      "fontSize": "14px",
      "lineHeight": "22px",
      "fontWeight": 400,
      "sample": "curl -X POST \"$HOOK_URL\"",
      "usage": "Code blocks at 0.9rem / 1.55, inline code at 0.85em."
     }
    ]
   }
  ]
 },
 "spacing": {
  "tokens": [
   {
    "name": "space-3",
    "value": "12px",
    "usage": "Row padding above and below; gap inside a row."
   },
   {
    "name": "space-5",
    "value": "20px",
    "usage": "Between paragraphs; between a phone and the next."
   },
   {
    "name": "space-6",
    "value": "24px",
    "usage": "Under a section heading; card padding sideways under 720px."
   },
   {
    "name": "space-8",
    "value": "32px",
    "usage": "The gutter between the card's two columns."
   },
   {
    "name": "space-14",
    "value": "56px",
    "usage": "Between blog entries; the pinned nav strip's height."
   },
   {
    "name": "space-16",
    "value": "64px",
    "usage": "The card's padding on every side."
   },
   {
    "name": "space-18",
    "value": "72px",
    "usage": "Between sections under 720px wide."
   },
   {
    "name": "space-30",
    "value": "120px",
    "usage": "Between sections, and under the header."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-none",
    "value": "0px",
    "usage": "The card. Paper and card are square; corners belong to things you hold."
   },
   {
    "name": "radius-sm",
    "value": "4px",
    "usage": "Inline code."
   },
   {
    "name": "radius-md",
    "value": "8px",
    "usage": "Code blocks, inputs and console controls."
   },
   {
    "name": "radius-phone",
    "value": "12%",
    "usage": "Phone screenshots (12% / 5.5% of the frame)."
   },
   {
    "name": "radius-pill",
    "value": "999px",
    "usage": "The ink button and badges."
   }
  ]
 },
 "shadow": {
  "tokens": [
   {
    "name": "shadow-phone",
    "value": "0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 36px -18px rgba(0, 0, 0, 0.28)",
    "usage": "Phone frames only. Nothing else on the card casts a shadow."
   }
  ]
 },
 "size": {
  "tokens": [
   {
    "name": "card-width",
    "value": "51.2rem",
    "usage": "The card's max width: two 330px columns, a 32px gutter and 64px padding."
   },
   {
    "name": "measure",
    "value": "32rem",
    "usage": "Max width of a hero lede."
   },
   {
    "name": "breakpoint",
    "value": "720px",
    "usage": "Below this the card's columns stack and type steps down."
   }
  ]
 },
 "duration": {
  "tokens": [
   {
    "name": "duration-instant",
    "value": "120ms",
    "usage": "The link marker painting in on hover. Linear."
   },
   {
    "name": "duration-quick",
    "value": "200ms",
    "usage": "Colour changes on header links."
   },
   {
    "name": "duration-strip",
    "value": "450ms",
    "usage": "The pinned nav strip sliding down."
   },
   {
    "name": "duration-glide",
    "value": "480ms",
    "usage": "Each nav link gliding to its pinned place, 30ms apart."
   },
   {
    "name": "duration-rise",
    "value": "700ms",
    "usage": "Content rising in, 70ms apart, at most 8 steps."
   },
   {
    "name": "duration-paper",
    "value": "900ms",
    "usage": "The paper fading in once painted."
   },
   {
    "name": "duration-draw",
    "value": "1000ms",
    "usage": "The highlighter drawing across its line, after a 450ms wait."
   },
   {
    "name": "duration-count",
    "value": "1300ms",
    "usage": "A ledger amount counting up from zero; later changes take 900ms."
   }
  ]
 },
 "easing": {
  "tokens": [
   {
    "name": "ease-out",
    "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
    "usage": "Everything that arrives: rise-in, the nav glide, the strip."
   },
   {
    "name": "ease-draw",
    "value": "cubic-bezier(0.6, 0, 0.2, 1)",
    "usage": "The highlighter: slow start, quick middle, soft landing."
   },
   {
    "name": "ease-linear",
    "value": "linear",
    "usage": "The hover marker, so it paints at an even pace."
   }
  ]
 },
 "meta": {
  "source": "github",
  "repo": "skyaara/portfolio",
  "ref": "main@d24c6bb+e081058",
  "paths": {
   "tokens": [
    "site/src/styles/global.css",
    "splitova site/src/styles/global.css"
   ],
   "fonts": [
    "@fontsource-variable/manrope"
   ],
   "docs": []
  },
  "synced": "2026-10-29"
 }
}