# Myanatomy.in Design System

> A professional corporate canvas defined by deep plum primary accents, structured Urbanist typography, and soft-edged geometric containers.

**Source:** https://myanatomy.in | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Myanatomy.in utilizes a sophisticated "monochrome-plus" system where a deep plum primary (`#4f0051`) anchors a clean, high-contrast white background (`#ffffff`). The interface relies on the **Urbanist** typeface for high-impact display and headings, often paired with **Inter** for functional UI elements. Visual hierarchy is established through a wide spectrum of purple-tinted accents (ranging from `#300c41` to `#e1bee7`) and generous use of rounded corners (radii from 14px to 50px). Components are characterized by subtle elevation via soft shadows and clean, borderless surfaces that emphasize content clarity.

## Signature DNA
1. **The Plum Anchor** (Deep plum `#4f0051` used as the primary action color for buttons and footer backgrounds, providing a high-authority focal point against white space).
2. **Urbanist Display** (Heavyweight Urbanist at 800 weight for display numbers and 600-700 for section headings, creating a modern, geometric editorial feel).
3. **Soft-Panel Geometry** (Extensive use of 24px to 50px border radii on feature cards and primary CTAs, softening the professional corporate aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary background, button text | 114 | 1 | `css_variable:--white` |
| `{colors.black}` | `#000000` | Primary text, footer text | 112 | 1 | `css_variable:--black` |
| `{colors.bg-soft}` | `#f8f8ff` | Section backgrounds | 9 | 1 | `css_variable:--background-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#4f0051` | Primary button BG, footer BG | 30 | 1 | `css_variable:--primary` |
| `{colors.ink-deep}` | `#300c41` | Heading text, button text | 32 | 1 | `css_variable:--dark-blue` |
| `{colors.slate-blue}` | `#353f4f` | Secondary text, surface BG | 22 | 1 | `css_variable:--black-grey` |
| `{colors.lavender-soft}` | `#e1bee7` | Muted text, decorative labels | 57 | 1 | `css_variable:--color-text-primary` |
| `{colors.purple-border}` | `#6c2a96` | Decorative borders | 5 | 1 | `css_variable:--color-border` |
| `{colors.purple-light}` | `#9c27b0` | Decorative only | 1 | 1 | `css_variable:--purple-light` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Urbanist** | 400, 500, 600, 700, 800 | Display, Headings, Buttons | Urbanist (Google Fonts) | SIL OFL |
| **Inter** | 400, 500, 600, 700, 800 | UI Labels, Navigation | Inter (Google Fonts) | SIL OFL |
| **Arial** | 400, 500, 600, 700 | Body fallback, Controls | System Sans | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 60px | 60px | normal | 800 | Hero Stats | `div.number` |
| `{type.display-md}` | 55px | normal | 1.1px | 800 | Gallery Titles | `div.gallery-title` |
| `{type.h1}` | 54px | 64.8px | normal | 600 | Page Hero | `h1.heading-gradient` |
| `{type.h2}` | 34px | 44.2px | normal | 700 | Section Headings | `h2.section-heading-alt` |
| `{type.h3}` | 24px | normal | normal | 500 | Sub-section headings | `h3` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Intro paragraphs | `p` |
| `{type.body-md}` | 16px | normal | normal | 400 | Default body text | `section.hero-section` |
| `{type.button}` | 16px | normal | normal | 600 | Primary CTAs | `a.btn.btn-primary` |
| `{type.caption}` | 12px | normal | normal | 400 | Small annotations | `span` |

### Principles
1. **Heavyweight Display:** Use Urbanist 800 for numerical data and 600+ for primary headings to establish authority.
2. **Geometric Clarity:** Maintain "normal" letter spacing for body text to preserve the circular geometry of the Urbanist/Inter families.
3. **Hierarchy via Color:** Use `{colors.lavender-soft}` for secondary labels and `{colors.ink-deep}` for primary headings.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 52 |
| `{space.sm}` | 12px | 62 |
| `{space.md}` | 20px | 44 |
| `{space.lg}` | 32px | 12 |
| `{space.xl}` | 60px | 11 |
| `{space.section}` | 100px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 6px | Form inputs | 28 occurrences |
| `{radius.md}` | 14px | Feature cards | 8 occurrences |
| `{radius.lg}` | 24px | Large content containers | 7 occurrences |
| `{radius.pill}` | 50px | Primary buttons, pill labels | 46 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `0 5px 15px 0 rgba(0,0,0,0.1)` | Floating feature cards | 7 occurrences |
| `{shadow.deep}` | `0 8px 32px 0 rgba(0,0,0,0.1)` | Hover states / Modals | 6 occurrences |
| `{shadow.brand}` | `0 7.424px 37.121px 0 rgba(23,15,73,0.08)` | Brand-specific elevation | 4 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide call to action.
**Pages observed:** Homepage, About.
**Spec:** Background: `#4f0051` | Text: `#ffffff` | Radius: `50px` | Padding: `16px 32px` | Typography: `Urbanist 600 16px`.
**States observed:** Default: Captured | Hover: Not captured | Active: Captured.

#### Navigation Link
**Role:** Header menu items.
**Pages observed:** Homepage, About.
**Spec:** Background: `transparent` | Text: `#111827` | Typography: `Inter 400 16px`.
**States observed:** Default: Captured | Hover: Not captured.

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting core platform capabilities.
**Pages observed:** Homepage.
**Spec:** Background: `#ffffff` | Border: `1px solid #e4e2f1` | Radius: `24px` | Padding: `25px` | Shadow: `none`.
**States observed:** Default: Captured.

#### Stats Block
**Role:** Displaying platform scale and metrics.
**Pages observed:** Homepage.
**Spec:** Typography (Value): `Urbanist 800 60px` | Typography (Label): `Urbanist 400 16px` | Text Color: `#353f4f`.

### Tier 3: Surface-specific

#### Footer Container
**Role:** Global site navigation and corporate info.
**Pages observed:** Homepage, About.
**Spec:** Background: `#4f0051` | Text: `#ffffff` | Typography: `Urbanist 400 14px`.
**States observed:** Default: Captured.

#### Partner Logo Plate
**Role:** Social proof and integration display.
**Pages observed:** Homepage.
**Spec:** Background: `#ffffff` | Border: `1px solid #d4d2e3` | Radius: `12px` | Padding: `10px`.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px (approx) |
| Section Gap | 100px |
| Card Grid | 3-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked grids, 20px horizontal padding, mobile menu toggle |
| Desktop | 1440px | 3-column feature grids, horizontal nav |

## Do's
- Use `{colors.primary}` (#4f0051) for all high-intent conversion buttons.
- Apply `{radius.pill}` (50px) to all primary action elements.
- Set display numbers in Urbanist 800 for maximum visual weight.
- Use `{colors.bg-soft}` (#f8f8ff) to differentiate background sections.
- Ensure all feature cards use a minimum of 24px padding.

## Don'ts
- Do not use sharp 0px corners for buttons or primary containers.
- Do not use pure black (#000000) for large blocks of body text; prefer `#111827`.
- Do not mix font families within a single component (e.g., Urbanist label with Arial value).
- **Wrong:** Using a bright purple from a sub-brand as the primary button color. **Right:** Use `#4f0051`. **Reason:** Maintains parent brand authority.

## Similar brands
- Greenhouse
- Lever
- Workday
- Phenom

## Quick start

### CSS Custom Properties
```css
:root {
  --primary: #4f0051;
  --dark-blue: #300c41;
  --black-grey: #353f4f;
  --white: #ffffff;
  --bg-soft: #f8f8ff;
  --font-display: 'Urbanist', sans-serif;
  --font-ui: 'Inter', sans-serif;
  --radius-pill: 50px;
  --radius-card: 24px;
}
```

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the static evidence.
- Specific transition timings for AOS (Animate On Scroll) elements were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://myanatomy.in | 1440x900 | 2026-06-06 |
| About Us | https://myanatomy.in/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://myanatomy.in | 390x844 | 2026-06-06 |