Palmo design system

---
version: alpha
name: Palmo
description: "Light interface measured from palmo.co.in: Khand type with Patrick Hand, light amber accents, flat surfaces and 25.92px corners."
colors:
  background: "#F8F8F0"
  surface: "#F8F8F0"
  on-surface: "#463721"
  on-background: "#463721"
  on-surface-strong: "#000000"
  outline: "#46372133"
  outline-variant: "#F8F8F01A"
  primary: "#FFE386"
  on-primary: "#000000"
  secondary: "#ECE2B1"
  warning: "#684900"
typography:
  headline-display:
    fontFamily: Khand
    fontSize: 135px
    fontWeight: 600
    lineHeight: 0.85
  headline-lg:
    fontFamily: Khand
    fontSize: 33px
    fontWeight: 600
    lineHeight: 0.9
  body-md:
    fontFamily: Patrick Hand
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.2
  body-sm:
    fontFamily: Patrick Hand
    fontSize: 19.5px
    fontWeight: 400
    lineHeight: 1.3
  caption:
    fontFamily: Inter
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Khand
    fontSize: 68.5px
    fontWeight: 600
    lineHeight: 0.85
  headline-lg-mobile:
    fontFamily: Khand
    fontSize: 27px
    fontWeight: 600
    lineHeight: 0.9
rounded:
  sm: 5.63px
  md: 11.52px
  lg: 25.92px
spacing:
  sm: 6.48px
  md: 14.4px
  lg: 21.6px
  xl: 36px
  gutter: 14.4px
  section: 86.4px
  margin: 43.2px
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 4.32px 28.8px
    height: 35px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: 0px 36px
  link:
    textColor: "{colors.background}"
---

# Palmo Design System

## Overview

Palmo describes itself as: “Paradise in every sip. 100% raw, cold-pressed coconut water packed with natural electrolytes, zero added sugar, and infused with real organic fruits.” The interface is light, built on **Warm Snow (#F8F8F0)** with **Deep Orange (#463721)** text, and **Light Amber (#FFE386)** as the main accent.

Type is set in **Khand** and **Patrick Hand**. Headlines run large; body text is 22px. Depth comes from soft drop shadows. Corners are mostly 25.92px.

Measured from [palmo.co.in](https://www.palmo.co.in/) on November 3, 2026 at 1440×900 and 390×844 from 294 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **Warm Snow (#F8F8F0):** Page background, seen 26 times. Token `background`, CSS `--background`.
- **Deep Orange (#463721):** Primary text and headings, seen 65 times. Token `on-surface`.
- **Near Black (#000000):** Headings and emphasis, seen 2 times. Token `on-surface-strong`, CSS `--color-black`.
- **Deep Orange 20% (#46372133):** Borders and dividers, seen 1 time. Token `outline`.
- **Warm Snow 10% (#F8F8F01A):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Light Amber (#FFE386):** Brand color on large areas, seen 18 times. Token `primary`, CSS `--beige`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Light Amber (#ECE2B1):** Accent on large areas, seen 16 times. Token `secondary`, CSS `--light-beige`.
- **Deep Amber (#684900):** Warnings and highlights, seen 1 time. Token `warning`, CSS `--light-brown`.

## Typography

**Khand**, **Patrick Hand** and **Inter** share the interface. Fallback stack: `Khand, Khand Fallback`.

- **headline-display:** Khand 135px at weight 600, line height 0.85, uppercase (68.5px on mobile). Page title (h1).
- **headline-lg:** Khand 33px at weight 600, line height 0.9, uppercase (27px on mobile). Section headings (h2).
- **body-md:** Patrick Hand 22px at weight 400, line height 1.2. Body text.
- **body-sm:** Patrick Hand 19.5px at weight 400, line height 1.3. Secondary and small text.
- **caption:** Inter 14.5px at weight 400, line height 1.5. Captions and fine print.
- **label-md:** Inter 15px at weight 400, line height 1.5. Buttons, navigation and labels.

## Layout

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

- **Scale:** sm 6.48px, md 14.4px, lg 21.6px, xl 36px.
- **Sections:** 86.4px vertical padding between major sections.
- **Gaps:** 14.4px is the most common gap in flex and grid layouts.
- **Page margin:** 43.2px on each side of full-width sections.
- **Breakpoints:** 768px, 769px, 1024px, 1025px.

## Elevation & Depth

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

- `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, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`

## Shapes

Most elements use 25.92px corners. Measured radii, most used first:

- **lg (25.92px):** 72 elements.
- **sm (5.63px):** 16 elements.
- **md (11.52px):** 4 elements.

## Components

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

- **button-primary (“MENU CLOSE”):** #463721 fill, #ECE2B1 text, 21.7501px/400, 5.62502px radius, padding 4.32px 28.8px.
- **button-ghost (“D D i i s s c c o o v v e e r r ”):** transparent fill, #463721 text, 15px/400, padding 0px.
- **card:** #F8F8F0 fill, #463721 text, 15px/400, 25.92px radius, padding 0px 36px.
- **link:** transparent fill, #F8F8F0 text, padding 0px.

## Do's and Don'ts

- Do use #F8F8F0 for the page.
- Do keep text in 2 levels: #463721, #000000.
- Do use #FFE386 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (6.48px, 14.4px, 21.6px).
- Do use 25.92px corners on most elements; larger surfaces also use 5.63px and 11.52px.
- Don't introduce new font families beyond Khand, Patrick Hand and Inter.
- Don't use #FFE386 for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.5s, 0.15s, 0.3s, 0.2s.

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

Generated by [Sitepeel](https://sitepeel.dev/design-md/palmo.co.in/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).