# Orufy Design System

> Clean SaaS utility defined by a soft violet primary anchor, high-contrast charcoal typography, and generous whitespace.

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

## TL;DR
Orufy utilizes a "Soft Professional" aesthetic, pairing a signature violet primary (`#7a60cb`) with a foundation of pure white surfaces and charcoal text (`#363942`). The system relies on the Manrope typeface across all hierarchies, using weight shifts (300 to 700) rather than font pairings to establish order. Layouts are characterized by large-scale display type (up to 85px) and rounded geometry, specifically 8px and 12px radii for functional components and full pill shapes for decorative badges. The interface feels airy and modern, avoiding heavy shadows in favor of 1px light-gray borders (`#e5e7eb`).

## Signature DNA
1. **The Violet Anchor** (The primary color `#7a60cb` is used consistently for all primary actions and brand-heavy surfaces like the footer CTA, creating a singular focal point against the monochrome base.)
2. **Manrope Weight Play** (The system uses a single font family, __Manrope, across a broad weight range from 300 for light body text to 700 for heavy display headers, maintaining a cohesive but varied typographic texture.)
3. **Softened Geometry** (A consistent application of 8px and 12px border radii on cards and buttons removes the "sharpness" of typical enterprise software, aligning with the brand's approachable SaaS positioning.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background and primary surface | 42 | 1.0 | computed_style |
| `{color.ink}` | `#363942` | Primary text and dark UI elements | 245 | 0.8 | computed_style |
| `{color.ink-muted}` | `#686b71` | Secondary body text | 30 | 0.8 | computed_style |
| `{color.border}` | `#e5e7eb` | Default 1px card and button outlines | 28 | 0.8 | computed_style |
| `{color.surface-soft}` | `#f8f9fb` | Subtle section backgrounds | 23 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#7a60cb` | Primary buttons, brand surfaces, active icons | 52 | 0.8 | computed_style |
| `{color.primary-light}` | `#e3dbff` | Badge backgrounds, decorative accents | 17 | 0.8 | computed_style (selector: div.bg-[#E3DBFF]) |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| `__Manrope_bfd9e0` | 300, 400, 500, 600, 700 | Primary Brand Face (Display & Body) | Manrope (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-hero}` | 85px | 127.5px | normal | 500 | Main homepage hero | `p.text-[42px].md:text-[44px]` |
| `{type.display-lg}` | 40px | 48px | normal | 700 | Section headlines | `p.text-20.leading-10` |
| `{type.heading-md}` | 24px | 32px | normal | 500 | Sub-section titles | `p.text-s1.text-20` |
| `{type.heading-sm}` | 22px | 33px | normal | 400 | Feature descriptions | `p.text-[22px]` |
| `{type.body-lg}` | 18px | 24px | normal | 400 | Primary body copy | `p.text-14.sm:text-18` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard body / Nav | `header.top-0.z-10` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Muted metadata | `p.text-s1.text-opacity-50` |
| `{type.caption}` | 12px | 16px | normal | 300 | Small annotations | `p.text-[9px].sm:text-xs` |
| `{type.overline}` | 10px | 14px | 3px | 600 | Uppercase section labels | `p.uppercase.tracking-[3px]` |

### Principles
1. **Weight Contrast:** Headlines jump to 700 weight to create immediate hierarchy against 400 weight body text.
2. **Lightweight Body:** A 300 weight variant is used for longer descriptive passages to maintain a "light" feel on the white canvas.
3. **Wide Tracking for Labels:** Small 10px captions use 3px letter spacing to ensure legibility and a premium "label" feel.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 72 |
| `{space.sm}` | 16px | 31 |
| `{space.md}` | 24px | 17 |
| `{space.lg}` | 40px | 7 |
| `{space.xl}` | 80px | 5 |
| `{space.section}` | 88px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|------|----------|
| `{radius.none}` | 0px | Main page sections | 218 occurrences |
| `{radius.sm}` | 6px | Input fields | 5 occurrences |
| `{radius.md}` | 8px | Primary buttons, small cards | 21 occurrences |
| `{radius.lg}` | 12px | Pricing cards, feature containers | 23 occurrences |
| `{radius.pill}` | 9999px | Badges, secondary buttons | 26 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Standard cards and buttons | Default state |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px` | Floating surfaces / Hover | pricing, about pages |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Elevated feature cards | orufy.com |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** all
**Spec:** Background `{color.primary}` (#7a60cb) / Text `{color.canvas}` (#ffffff) / Border `{color.border}` (#e5e7eb) / Radius `{radius.md}` (8px) / Padding 12px 24px / Typography `{type.body-md}` (16px)
**States observed:** Default: captured | Hover: not captured

#### Surface
**Role:** Generic content container
**Pages observed:** pricing, about
**Spec:** Background transparent / Text `{color.ink}` (#363942) / Border `{color.border}` (#e5e7eb) / Radius `{radius.md}` (8px) / Padding 10px
**States observed:** Default: captured

### Tier 2: Patterns

#### Card
**Role:** Feature and pricing display
**Pages observed:** pricing, about
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink}` (#363942) / Border `{color.border}` (#e5e7eb) / Radius `{radius.lg}` (12px) / Padding 12px 10px
**States observed:** Default: captured

#### Pill Badge
**Role:** Status or category label
**Pages observed:** orufy.com
**Spec:** Background `rgba(122, 96, 203, 0.125)` / Text `{color.primary}` (#7a60cb) / Border none / Radius `{radius.pill}` (9999px) / Padding 8px / Typography `{type.heading-sm}` (22px)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Feature Card (Elevated)
**Role:** Highlighting core product benefits
**Pages observed:** orufy.com
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink}` (#363942) / Border `{color.border}` (#e5e7eb) / Radius `{radius.md}` (8px) / Shadow `{shadow.deep}`
**States observed:** Default: captured

#### Section Container
**Role:** Main page vertical rhythm
**Pages observed:** orufy.com
**Spec:** Background `{color.canvas}` (#ffffff) / Padding 88px 20px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1440px |
| Section Padding (Vertical) | 88px |
| Content Gutter | 20px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Display font scales from 85px to 42px; padding reduces to 20px. |
| Desktop | 1440px | Full 88px section spacing; multi-column card layouts. |

## Imagery & decoration
Orufy uses clean, vector-style product mockups with rounded corners that mirror the UI's 12px radius. Decorative elements include soft violet gradients and small star icons in the footer CTA band. The brand avoids photography, relying on UI-inspired illustrations to demonstrate value.

## Do's
- Use `#7a60cb` for all primary interactive elements.
- Apply `__Manrope` at 700 weight for all section headers.
- Maintain a minimum of 88px vertical spacing between major homepage sections.
- Use 12px border radius for content cards containing text and images.
- Use uppercase 10px text with 3px tracking for section overlines.

## Don'ts
- **Wrong:** Using `#3b82f6` (default Tailwind blue) for buttons. **Right:** Use `#7a60cb`. **Reason:** Blue is a system-level ring color, not the brand primary.
- Do not use sharp (0px) corners on buttons; always use at least 8px radius.
- Do not use dark backgrounds for main content sections; stick to `#ffffff` or `#f8f9fb`.
- Do not mix font families; Orufy is strictly a Manrope system.
- Do not apply heavy shadows to standard cards; use 1px borders instead.

## Similar brands
- Linear
- Raycast
- Attio
- Framer

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #7a60cb;
  --color-canvas: #ffffff;
  --color-ink: #363942;
  --color-border: #e5e7eb;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-main: "__Manrope_bfd9e0", sans-serif;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #7a60cb;
  --color-ink: #363942;
  --color-canvas: #ffffff;
  --font-manrope: "__Manrope_bfd9e0";
  --radius-md: 8px;
  --radius-lg: 12px;
  --spacing-section: 88px;
}
```

## Agent prompt examples
- "Create a pricing card using a 1px #e5e7eb border, 12px border radius, and a primary button in #7a60cb."
- "Design a hero section with a 85px headline in Manrope weight 500 and a 18px body text in Manrope weight 400."
- "Generate a badge component with a pill shape, #e3dbff background, and #7a60cb text."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the computed style evidence.
- Success and Error semantic colors were not present on the analyzed marketing pages.
- Mobile-specific navigation menu transitions were not captured.

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