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

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

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