Claude Code
Cursor
Codex
GitHub Copilot
Sitepeel
DESIGN.md · measured November 3, 2026
Parchi design system
Light interface · Fredoka, DM Sans · Pill corners
- #F3F5F8
- #FFFFFF
- #16283B
- #1F3A56
From my-parchi.vercel.app ↗ · 177 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Parchi
Parchi color palette
16 colors with hex codes, grouped by where each one is used on the page.
Surfaces
Snow
#F3F5F8background · --groundPage background · 3×White
#FFFFFFsurface-container-low · --paperRaised areas one step from the page · 11×White 96%
#FFFFFFF5surface-containerCards and panels · 1×Pale Orange
#F6E4DEsurface-container-high · --terra-softHover and pressed fills · 1×White 35%
#FFFFFF59overlayTranslucent fill for cards and controls · 5×Text
Deep Blue
#16283Bon-surface · --inkPrimary text and headings · 20×Near Black
#000000on-surface-strongHeadings and emphasis · 2×Dark Blue
#1F3A56on-surface-variant · --navySecondary text · 19×Dark Blue
#4A5B6Don-surface-muted · --mutedMuted text and metadata · 15×White
#FFFFFFon-primaryText and icons on primaryAccents
Dark Blue
#1F3A56primary · --navyBrand color on large areas · 27×Dark Red
#8A3A22secondary · --terra-darkAccent in text, fills and borders · 6×Borders
White
#FFFFFFoutline · --paperBorders and dividers · 3×Cool Mist
#D9E0E8outline-variant · --lineSecondary dividers · 1×Status
Red
#A84B30error · --terraErrors and destructive states · 32×Orange
#DDAA52warning · --goldWarnings and highlights · 30×Parchi fonts and type scale
2 families.
AaFredokaWeights 600Fredoka, Nunito, Trebuchet MS, system-ui
AaDM SansWeights 400, 700DM Sans, system-ui, -apple-system, Segoe UI
headline-displayPage title (h1)Parchi72px · 600 · 1.1 · -0.01em
mobile 40px
mobile 40px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog52px · 600 · 1.1 · -0.01em
mobile 32px
mobile 32px
headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog24px · 600 · 1.1 · -0.01em
headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog21px · 400 · 1.6
body-mdBody textThe quick brown fox jumps over the lazy dog17px · 400 · 1.6
body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1.6
label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 700 · 1
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog15px · 700 · 1.6
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 700 · 1.6 · 0.12em
Contrast
Text on #F3F5F8
AaAAA
13.7:1AaAAA
19.2:1AaAAA
10.6:1AaAA
6.3:1Spacing
4px grid · 94% of values fit
xs2pxsm8pxmd12pxlg32pxxl64pxgutter8pxsection96pxBreakpoints: 480px 768px 1024px
Shapes
Corner radii, most used first.
full9999px · 76×
lg24px · 28×
sm8px · 16×
md16px · 4×
Depth
Shadow
Shadow
Parchi UI components
Rebuilt from the measured CSS.
Join the pilot
See how it works
See how it works
Input text
Card
Motion
Interface transitions
0.2s0.3s0.5seaseease-out
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #F3F5F8 for the page and lift surfaces in small steps: #FFFFFF, #FFFFFFF5, #F6E4DE.
- Keep text in 4 levels: #16283B, #000000, #1F3A56, #4A5B6D.
- Use #1F3A56 as the brand accent: header, logo and key highlights.
- Set headlines in Fredoka with tight tracking (-0.01em).
- Keep spacing on the 4px grid.
- Make buttons and chips fully rounded (9999px); most other elements use 24px corners.
- Introduce new font families beyond Fredoka and DM Sans.
- Use #1F3A56 for large backgrounds or body text.
- Make interface transitions slower than 0.5s.
Parchi DESIGN.md236 lines
---
version: alpha
name: Parchi
description: "Light interface measured from my-parchi.vercel.app: Fredoka type with DM Sans, dark blue accents, tonal surfaces and pill-shaped controls."
colors:
background: "#F3F5F8"
surface: "#F3F5F8"
on-surface: "#16283B"
on-background: "#16283B"
on-surface-strong: "#000000"
on-surface-variant: "#1F3A56"
on-surface-muted: "#4A5B6D"
surface-container-low: "#FFFFFF"
surface-container: "#FFFFFFF5"
surface-container-high: "#F6E4DE"
overlay: "#FFFFFF59"
outline: "#FFFFFF"
outline-variant: "#D9E0E8"
primary: "#1F3A56"
on-primary: "#FFFFFF"
secondary: "#8A3A22"
error: "#A84B30"
warning: "#DDAA52"
typography:
headline-display:
fontFamily: Fredoka
fontSize: 72px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -0.01em
headline-lg:
fontFamily: Fredoka
fontSize: 52px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -0.01em
headline-md:
fontFamily: Fredoka
fontSize: 24px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -0.01em
headline-sm:
fontFamily: DM Sans
fontSize: 21px
fontWeight: 400
lineHeight: 1.6
body-md:
fontFamily: DM Sans
fontSize: 17px
fontWeight: 400
lineHeight: 1.6
body-sm:
fontFamily: DM Sans
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
label-lg:
fontFamily: DM Sans
fontSize: 16px
fontWeight: 700
lineHeight: 1
label-md:
fontFamily: DM Sans
fontSize: 15px
fontWeight: 700
lineHeight: 1.6
label-sm:
fontFamily: DM Sans
fontSize: 14px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0.12em
headline-display-mobile:
fontFamily: Fredoka
fontSize: 40px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -0.01em
headline-lg-mobile:
fontFamily: Fredoka
fontSize: 32px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -0.01em
rounded:
sm: 8px
md: 16px
lg: 24px
full: 9999px
spacing:
base: 4px
xs: 2px
sm: 8px
md: 12px
lg: 32px
xl: 64px
gutter: 8px
section: 96px
components:
button-primary:
backgroundColor: "{colors.error}"
textColor: "{colors.on-primary}"
typography: "{typography.label-lg}"
rounded: "{rounded.full}"
padding: 12px 24px
height: 48px
button-primary-hover:
backgroundColor: "{colors.secondary}"
button-outline:
textColor: "{colors.on-surface-variant}"
typography: "{typography.label-lg}"
rounded: "{rounded.full}"
padding: 12px 24px
height: 48px
button-ghost:
textColor: "{colors.on-surface-variant}"
typography: "{typography.label-lg}"
rounded: "{rounded.full}"
padding: 12px 24px
input-field:
backgroundColor: "{colors.surface-container-low}"
textColor: "{colors.on-surface}"
typography: "{typography.body-md}"
rounded: "{rounded.sm}"
padding: 12px 16px
card:
backgroundColor: "{colors.error}"
textColor: "{colors.on-primary}"
typography: "{typography.body-md}"
rounded: "{rounded.lg}"
padding: 24px
---
# Parchi Design System
## Overview
Parchi describes itself as: “Parchi turns the bill your kirana store already makes into self-updating stock. Kam kaam, poora hisaab.” The interface is light, built on **Snow (#F3F5F8)** with **Deep Blue (#16283B)** text, and **Dark Blue (#1F3A56)** as the main accent.
Type is set in **Fredoka** and **DM Sans**. Headlines run large with tight negative tracking; body text is 17px. Depth comes from soft drop shadows. Controls are pill-shaped.
Measured from [my-parchi.vercel.app](https://my-parchi.vercel.app/) on November 3, 2026 at 1440×900 and 390×844 from 177 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 16 roles.
- **Snow (#F3F5F8):** Page background, seen 3 times. Token `background`, CSS `--ground`.
- **Deep Blue (#16283B):** Primary text and headings, seen 20 times. Token `on-surface`, CSS `--ink`.
- **Near Black (#000000):** Headings and emphasis, seen 2 times. Token `on-surface-strong`.
- **Dark Blue (#1F3A56):** Secondary text, seen 19 times. Token `on-surface-variant`, CSS `--navy`.
- **Dark Blue (#4A5B6D):** Muted text and metadata, seen 15 times. Token `on-surface-muted`, CSS `--muted`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 11 times. Token `surface-container-low`, CSS `--paper`.
- **White 96% (#FFFFFFF5):** Cards and panels, seen 1 time. Token `surface-container`.
- **Pale Orange (#F6E4DE):** Hover and pressed fills, seen 1 time. Token `surface-container-high`, CSS `--terra-soft`.
- **White 35% (#FFFFFF59):** Translucent fill for cards and controls, seen 5 times. Token `overlay`.
- **White (#FFFFFF):** Borders and dividers, seen 3 times. Token `outline`, CSS `--paper`.
- **Cool Mist (#D9E0E8):** Secondary dividers, seen 1 time. Token `outline-variant`, CSS `--line`.
- **Dark Blue (#1F3A56):** Brand color on large areas, seen 27 times. Token `primary`, CSS `--navy`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Red (#8A3A22):** Accent in text, fills and borders, seen 6 times. Token `secondary`, CSS `--terra-dark`.
- **Red (#A84B30):** Errors and destructive states, seen 32 times. Token `error`, CSS `--terra`.
- **Orange (#DDAA52):** Warnings and highlights, seen 30 times. Token `warning`, CSS `--gold`.
## Typography
**Fredoka** and **DM Sans** share the interface. Fallback stack: `Fredoka, Nunito, Trebuchet MS, system-ui`.
- **headline-display:** Fredoka 72px at weight 600, line height 1.1, tracking -0.01em (40px on mobile). Page title (h1).
- **headline-lg:** Fredoka 52px at weight 600, line height 1.1, tracking -0.01em (32px on mobile). Section headings (h2).
- **headline-md:** Fredoka 24px at weight 600, line height 1.1, tracking -0.01em. Sub-section headings.
- **headline-sm:** DM Sans 21px at weight 400, line height 1.6. Card and feature titles.
- **body-md:** DM Sans 17px at weight 400, line height 1.6. Body text.
- **body-sm:** DM Sans 14px at weight 400, line height 1.6. Secondary and small text.
- **label-lg:** DM Sans 16px at weight 700, line height 1. Large buttons and tabs.
- **label-md:** DM Sans 15px at weight 700, line height 1.6. Buttons, navigation and labels.
- **label-sm:** DM Sans 14px at weight 700, line height 1.6, tracking 0.12em. Small labels and badges.
## Layout
Spacing follows a 4px grid: 94% of measured gaps and paddings are multiples of 4px.
- **Scale:** xs 2px, sm 8px, md 12px, lg 32px, xl 64px.
- **Sections:** 96px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 480px, 768px, 1024px.
## Elevation & Depth
Raised elements use soft drop shadows. The most used recipes:
- `rgba(168, 75, 48, 0.9) 0px 12px 24px -14px`
- `rgba(168, 75, 48, 0.7) 0px 24px 40px -22px`
## Shapes
Interactive controls are pill-shaped. Measured radii, most used first:
- **full (9999px):** 76 elements.
- **lg (24px):** 28 elements.
- **sm (8px):** 16 elements.
- **md (16px):** 4 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“Join the pilot”):** #A84B30 fill, #FFFFFF text, 16px/700, 999px radius, padding 12px 24px, shadow `rgba(168, 75, 48, 0.9) 0px 12px 24px -14px`.
- **button-primary-hover:** background #8A3A22, text #FFFFFF on hover.
- **button-outline (“See how it works”):** transparent fill, #1F3A56 text, 16px/700, 999px radius, padding 12px 24px, border 2px solid #1F3A56.
- **button-ghost (“See how it works”):** transparent fill, #1F3A56 text, 16px/700, 999px radius, padding 12px 24px, border 2px solid #1F3A56.
- **input-field:** #FFFFFF fill, #16283B text, 17px/400, 8px radius, padding 12px 16px, border 2px solid #5F7589.
- **card:** #A84B30 fill, #FFFFFF text, 17px/400, 24px radius, padding 24px, border 2px solid #A84B30, shadow `rgba(168, 75, 48, 0.7) 0px 24px 40px -22px`.
## Do's and Don'ts
- Do use #F3F5F8 for the page and lift surfaces in small steps: #FFFFFF, #FFFFFFF5, #F6E4DE.
- Do keep text in 4 levels: #16283B, #000000, #1F3A56, #4A5B6D.
- Do use #1F3A56 as the brand accent: header, logo and key highlights.
- Do set headlines in Fredoka with tight tracking (-0.01em).
- Do keep spacing on the 4px grid.
- Do make buttons and chips fully rounded (9999px); most other elements use 24px corners.
- Don't introduce new font families beyond Fredoka and DM Sans.
- Don't use #1F3A56 for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.
## Motion
Interface transitions are quick: 0.2s, 0.3s, 0.5s. Longer ambient animations run 0.7s, 0.8s, 9s.
- **Easing:** `ease`, `ease-out`, `cubic-bezier(0.2, 0.9, 0.3, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/my-parchi.vercel.app/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need a page behind a login?
The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.
More designs
Brand examples →
Another site? Make a DESIGN.md from any link.
FAQ
Parchi design system questions
What font does Parchi use?
Parchi’s website uses Fredoka (weight 600) and DM Sans (weights 400 and 700). Page titles are 72px at weight 600 (40px on phones) and body text is 17px. Measured on November 3, 2026.
What are the Parchi colors and hex codes?
On my-parchi.vercel.app: #F3F5F8 (snow) for the background, #16283B (deep blue) for text and #1F3A56 (dark blue) as the main accent, with #8A3A22 (dark red) as another accent. The color palette above lists all 16 colors with their hex codes and where each one is used.
What is the Parchi design system?
The design system on this page is my-parchi.vercel.app’s, as measured on November 3, 2026: Fredoka type, #1F3A56 as the main color, pill-shaped corners and a 4px spacing grid, written down as a DESIGN.md. It is not Parchi’s own documentation.
What is the Parchi DESIGN.md?
A plain-text file with Parchi’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this Parchi’s official design system?
No. Sitepeel measured it from my-parchi.vercel.app’s public page on November 3, 2026. It is an independent analysis, not made or approved by Parchi.
Can I use Parchi’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Parchi’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.