# Moneytor.in Design System

> High-contrast monochrome foundation punctuated by deep indigo accents and soft-radius elevation.

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

## TL;DR
Moneytor.in utilizes a clean, professional aesthetic anchored by a monochrome palette of pure white (#ffffff) and black (#000000), with a sophisticated indigo accent (#402b9c) used for primary text and brand emphasis. The typography is exclusively **Hellix**, a geometric sans-serif that scales from massive 64px display headlines to functional 14px body text. Layouts favor generous whitespace and soft-radius containers (24px), often elevated by subtle drop shadows (rgba(0,0,0,0.25)) to create a layered, modern interface. Interactive elements like buttons and inputs feature pill shapes or high-radius corners, maintaining a friendly yet corporate fintech feel.

## Signature DNA
1. **Indigo Emphasis** (The use of #402b9c for key headings and active states against a stark white canvas, as seen on the homepage hero and offering labels).
2. **Hellix Geometry** (Uniform application of the Hellix typeface across all roles, using weight 600 for authority and weight 400 for high-legibility body copy).
3. **Soft Elevation** (The consistent use of 24px border radii combined with 4px-6px blur shadows to define content cards and form inputs).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | #ffffff | Canvas, surface background, button text | 28 | 0.8 | computed_style |
| `{color.black}` | #000000 | Primary text, brand foundation | 20 | 0.8 | computed_style |
| `{color.dark-gray}` | #303030 | Secondary text | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.indigo}` | #402b9c | Primary brand text, headings | 38 | 0.8 | computed_style |
| `{color.lavender-soft}` | #dcccea | Decorative text, secondary accents | 20 | 0.8 | computed_style |
| `{color.violet}` | #631af4 | Interactive text elements | 7 | 0.6 | computed_style |
| `{color.periwinkle}` | #e0ddff | Card borders, subtle dividers | 4 | 0.6 | computed_style |
| `{color.brand-blue}` | #0000ee | Hyperlinks (standard) | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Hellix | 400, 500, 600 | All roles (Display, Heading, Body) | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-xl}` | 64px | 70.4px | -1.28px | 600 | Main Hero | `h1.headline-text` |
| `{type.display-lg}` | 52px | 54.6px | 1.04px | 600 | Section Headings | `h2.trusted-heading` |
| `{type.display-md}` | 44px | 44.88px | 0.88px | 500 | Feature Labels | `h4.offerings-label` |
| `{type.heading-md}` | 34px | 34px | 1.36px | 500 | Media Labels | `span.stack-media-label` |
| `{type.heading-sm}` | 21px | 19.32px | 0.42px | 600 | Card Titles | `p.stack-title` |
| `{type.body-lg}` | 18px | 32.4px | normal | 400 | List Content | `li:nth-of-type(1)` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `div.landing-page` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Footer/Metadata | `div.footer-bottom` |

### Principles
1. **Tight Display Tracking:** Large display headings (64px) use negative letter spacing (-1.28px) to maintain visual density.
2. **Indigo for Hierarchy:** Primary headings often shift from black to indigo (#402b9c) to signal brand presence.
3. **Geometric Clarity:** All UI labels and buttons use Hellix at weight 600 for immediate recognition.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 6 |
| `{space.sm}` | 12px | 17 |
| `{space.md}` | 16px | 5 |
| `{space.lg}` | 24px | 8 |
| `{space.xl}` | 32px | 9 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers | 105 occurrences |
| `{radius.md}` | 24px | Content cards, inputs | Card (observed_once) |
| `{radius.pill}` | 999px | Primary buttons | button.audience-cta |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.low}` | rgba(0, 0, 0, 0.25) 0px 2px 6.2px 0px | Form inputs | Text Input (observed_once) |
| `{shadow.mid}` | rgba(0, 0, 0, 0.25) 0px 4px 6.2px 0px | Hoverable cards | Card (observed_once) |
| `{shadow.soft}` | rgba(0, 0, 0, 0.15) 0px 4px 6px 0px | Static cards | Card (observed_once) |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** User data entry in contact forms.
**Pages observed:** https://moneytor.in
**Spec:** Background: transparent / Text: #402b9c / Border: 2px transparent / Radius: 24px / Padding: 12px 18px / Shadow: rgba(0,0,0,0.25) 0px 2px 6.2px 0px
**States observed:** Default: captured | Hover: not captured | Focus: not captured

#### Primary Button
**Role:** Main call to action (Submit, Reach out).
**Pages observed:** https://moneytor.in
**Spec:** Background: #402b9c / Text: #ffffff / Radius: 999px / Typography: Hellix 600 16px / Letter-spacing: 0.32px
**States observed:** Default: captured | Active: captured

### Tier 2: Patterns

#### Content Card
**Role:** Displaying service offerings (Collections, Debt Purchase).
**Pages observed:** https://moneytor.in
**Spec:** Background: #ffffff / Border: 1px #e0ddff / Radius: 24px / Padding: 14px 16px 12px / Shadow: rgba(0,0,0,0.15) 0px 4px 6px 0px
**States observed:** Default: captured

#### Navigation Link
**Role:** Top-level site navigation.
**Pages observed:** https://moneytor.in
**Spec:** Text: #ffffff / Typography: Hellix 500 18px / Line-height: 28.8px / Letter-spacing: 0.18px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Offering Label
**Role:** Sub-titles within the "Offerings" section.
**Pages observed:** https://moneytor.in
**Spec:** Text: #402b9c / Typography: Hellix 500 44px / Line-height: 44.88px / Letter-spacing: 0.88px
**States observed:** Default: captured

#### Footer Bottom
**Role:** Copyright and legal links.
**Pages observed:** https://moneytor.in
**Spec:** Text: #000000 / Typography: Hellix 400 14px / Line-height: 21px
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1440px (Desktop) |
| Card Padding | 30px 24px |
| Section Gap | 40px - 64px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked card layouts, reduced display type size. |
| Desktop | 1440px | Multi-column grids, full navigation bar visibility. |

## Imagery & decoration
The brand uses high-quality product mockups (laptops/phones) to demonstrate the software interface. Decorative elements include soft lavender (#dcccea) text highlights and rounded image masks that match the 24px component radius.

## Do's
- Use **Hellix** for all typographic needs.
- Apply **#402b9c** for primary brand emphasis and headings.
- Maintain a **24px border radius** on all content cards and inputs.
- Use **rgba(0,0,0,0.25)** shadows to indicate interactive surfaces.
- Ensure high contrast between black/indigo text and white backgrounds.

## Don'ts
- **Wrong:** Using a generic blue (#0000ff) for brand buttons. **Right:** Use Indigo #402b9c. **Reason:** Brand consistency and specific fintech identity.
- **Wrong:** Using sharp 0px corners for cards. **Right:** Use 24px radius. **Reason:** Soft-radius geometry is a core brand signature.
- **Wrong:** Applying a sub-brand accent color as the main page background. **Right:** Keep background #ffffff. **Reason:** Parent brand is monochrome-first.
- Do not use weights of Hellix other than 400, 500, or 600.
- Do not use letter spacing on body copy; keep it "normal".

## Similar brands
- Revolut (Geometric type, monochrome base)
- Stripe (Clean typography, high-contrast accents)
- Wise (Fintech clarity, specific brand indigo/blue)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #402b9c;
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-border: #e0ddff;
  --radius-card: 24px;
  --shadow-soft: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
  --font-main: 'Hellix', sans-serif;
}
```

## Agent prompt examples
- "Create a content card using a white background, a 1px border in #e0ddff, and a 24px border radius. Include a heading in Hellix 600 Indigo #402b9c."
- "Design a primary button with a pill shape (999px radius), #402b9c background, and white Hellix 600 text at 16px."
- "Generate a hero section with a 64px Hellix headline in #000000, using -1.28px letter spacing."

## Known gaps
- Hover and Focus states for buttons and inputs were not explicitly captured in the source.
- Mobile-specific typography tokens (fluid type) were not fully mapped.
- Semantic colors for success/error messages were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://moneytor.in | 1440x900 | 2026-06-06 |
| Pricing | https://moneytor.in/pricing | 1440x900 | 2026-06-06 |
| About | https://moneytor.in/about | 1440x900 | 2026-06-06 |