# ferndesk.com — Design Reference

## 1. Visual Theme & Atmosphere

Ferndesk is a productivity SaaS with a design sensibility that earns trust through quiet craftsmanship. The standout choice is **Erode** — a warm, slightly quirky geometric serif with distinctive OpenType features — used for display and headings. This unusual pairing with **Inter** for body copy creates an interface that feels simultaneously professional and characterful, avoiding the blandness of all-sans stacks.

The signature green (`rgb(140,195,82)`) — a muted, organic lime — appears on CTAs and anchored navigation elements. It evokes nature and calm productivity without feeling generic. Built with Svelte and Tailwind.

## 2. Color Palette & Roles

| Role | Value | Notes |
|------|-------|-------|
| Background | transparent / white | Canvas is clear or white |
| Header | `rgb(255, 255, 255)` | Sticky header surfaces |
| Primary text | `rgb(0, 0, 0)` / `oklch(0.269 0 0)` | H2 in near-black oklch |
| Secondary text | `oklch(0.708 0 0)` | H3 — medium gray |
| Muted text | `oklch(0.439 0 0)` | Buttons, body UI |
| Accent Green | `rgb(140, 195, 82)` | Links, CTAs, sticky nav highlight |

The oklch color space usage signals a modern CSS stack and a designer who cares about perceptual color uniformity.

**What's absent:** No secondary accent, no dark mode, no gradients. The green is the sole identity color.

## 3. Typography Rules

| Element | Family | Size | Weight | Notes |
|---------|--------|------|--------|-------|
| H1 | Erode | 48px | 500 | −1.44px tracking, 100% line height |
| H2 | Erode | 36px | 500 | −1.08px tracking, 40px line height |
| H3 / Labels | Inter | 12px | 600 | UPPERCASE, +0.6px tracking — category labels |
| Body | Inter | 16px | 400 | −0.16px tracking, 24px line height |
| Para | Inter | 14px | 400 | −0.16px tracking, 22.75px line height |

Erode uses OpenType features cv02, cv03, cv04, cv11 — these give it subtle character differentiation. Inter carries all functional UI text. The H3/label style (uppercase Inter 600 with positive tracking) creates a clear third tier for section labeling.

## 4. Component Stylings

- **Buttons:** 8–12px border-radius — rounded but not pill-shaped
- **Cards:** White surface (`rgb(255,255,255)`), bordered with 1px `oklab` shadow ring
- **Shadows:** Layered ring-shadow system — 1px border ring + depth shadow for elevated components
- **Large shadow:** 20px depth shadow for modal/overlay elements
- **Header:** White, sticky, no background blur
- **Labels:** Uppercase Inter 600, +0.6px tracking — section markers

## 5. Layout Principles

- Four breakpoints: 600, 640, 768, 1024px
- Tailwind-driven spacing system
- Content max-width likely ~1024px
- Svelte component architecture — discrete, contained components
- Section padding generous but measured — breathing room without excess

## 6. Depth & Elevation

Ferndesk uses a sophisticated layered shadow system:
- **Base cards:** 1px border-ring shadow in `oklab(0 0 0 / 0.08)` — barely visible outline
- **Active/hover:** Border color shifts to the accent green ring
- **Raised elements:** 20px drop shadow (`rgba(0,0,0,0.1)`) for significant elevation
- **Deep modal:** 50px large shadow with heavy opacity for overlay contexts

## 7. Do's and Don'ts

**Do:**
- Use Erode for all display headings — its character is the visual differentiator
- Use the organic green (`rgb(140,195,82)`) sparingly — primary CTAs and active states only
- Apply uppercase Inter 600 with positive tracking for section labels
- Use the ring-shadow pattern (1px border ring) instead of hard borders
- Apply oklch for any new color definitions to stay consistent

**Don't:**
- Replace Erode with a generic sans for headings — it defines the product's warmth
- Use the green as a fill color beyond CTAs and navigation accents
- Add pill-shaped buttons — medium roundness (8–12px) is the system
- Add color beyond the single accent green

## 8. Responsive Behavior

- Mobile-first Tailwind breakpoints: 600, 640, 768, 1024
- Erode headings scale from 48px down proportionally
- Single column layout on mobile with preserved typography hierarchy
- Sticky green-accented nav likely collapses to hamburger below 640px

## 9. Agent Prompt Guide

> "Design in the style of ferndesk.com: Erode serif at 48px for headlines with slight negative tracking, Inter for all body and UI. Single accent color — organic lime green (`rgb(140,195,82)`) — used only for CTAs and active states. White surfaces with 1px `oklab` ring shadows instead of borders. 8–12px border-radius. Uppercase Inter 600 labels with positive tracking. Clean, warm productivity aesthetic."

---

*Generated by Sparkbites — extracted from live CSS analysis*