# Felt · Design system migration spec

> Source: https://www.felt.com  ·  Curated by OpenDesign  ·  en

> Worth including for its successful blend of professional, earthy colors with a modern, serif-forward typographic system.

## 1. Identity DNA

Felt's design system is the technical equivalent of its own product: a cloud-native platform that makes complex systems—cartographic data, collaborative workflows, and spatial analysis—feel inherently manageable. It grounds a sophisticated GIS toolset in a visual language that is both professional and approachable, like a well-organized field notebook meeting a modern dashboard.

**One-liner:** A cloud-native GIS platform that makes maps, apps, and dashboards easy to create.
**Keywords:** GIS · Mapping · Spatial · Collaboration · Platform
**Analogy:** Google Docs for maps

## 2. Color

The color system pairs a grounded, high-contrast earthy palette with a warm action color to balance utility and approachability. Deep forest greens and off-whites provide a stable, natural foundation, while a burnt orange accent guides the user's eye toward primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#3D521E` | main background |
| `--bg-soft` | `#64754B` | card background |
| `--bg-quiet` | `#EEE` | quiet area |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#333333` | placeholder |
| `--muted-soft` | `#EEE` | weak hint |
| `--accent` | `#DC8C46` | single accent |
| `--line` | `rgba(51,51,51,1)` | divider |

**Color principle:** High-contrast earthy tones mixed with a warm action color to balance utility and approachability.

The principle is to use color not for decoration, but as a clear signal of hierarchy and interactivity within a calm, focused workspace.

## 3. Typography

Typography employs a deliberate split: a light-weight transitional serif for impactful headlines and a clean grotesque sans-serif for UI elements and body text. This pairing communicates both the authority of a mapping platform and the clarity required for a productivity tool.

- **Display:** transitional-serif
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 101px | 0.88 | 300 | -2.88px | hero headline |
| body | 16px | 1.5 | 400 | normal | default text |

**Type rules:**
- Headlines use a light-weight transitional serif with tight letter-spacing
- UI elements use a clean grotesque sans-serif
- Monospace elements are used for technical labels

## 4. Spacing

All spatial relationships adhere to a strict 8px baseline grid, creating a consistent and readable rhythm across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px baseline grid

## 5. Surfaces

Surface treatment is minimal, relying on thin, dark borders and subtle shadows to define depth without visual noise. The system prioritizes content and interface screenshots, treating surfaces as clean, bounded containers.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 2px 5px 0px rgba(0,0,0,0.2)
- **Borders:** 1px solid #333333

## 6. Layout

The layout skeleton is built on centered content columns with generous whitespace, allowing the product's large-scale typography and interface showcases room to breathe. This structure provides a stable, focused reading path that adapts gracefully from hero sections to detailed documentation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content columns with generous whitespace

## 7. Motion & Interaction

Motion is minimal and purposeful, confined to rapid micro-interactions that provide immediate feedback. Background-color and text-color transitions are used sparingly to confirm user actions without distracting from the core task of map creation.

- **Durations:** micro 75ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Background color transitions on hover
  - Text color transitions on focus

- **Hover:** Background color change
- **Click:** Subtle background darkening
- **Transition:** background-color 0.075s ease
- **Keyboard:** Standard tab focus navigation

## 8. Voice & Don'ts

The editorial voice is professional yet accessible, using large, impactful serif headlines to convey authority and direct, action-oriented language for calls-to-action. It avoids technical jargon and aggressive sales tactics, opting for a modern, straightforward tone.

- **Tone:** Professional yet accessible and modern
- **Headline style:** Large, impactful serif typography
- **CTA style:** Direct and action-oriented (e.g., 'Get started for free')
- **Avoid:** Technical jargon / Aggressive sales language / Overly playful tone

### Don'ts
- ❌ Don't use neon or highly saturated synthetic colors — screenshot shows a grounded, earthy palette.
- ❌ Don't use thick decorative borders — screenshot shows clean, 1px borders or borderless layouts.
- ❌ Don't use tight, dense layouts — screenshot shows generous whitespace around elements.
- ❌ Don't use all-lowercase for UI labels — screenshot shows uppercase for navigation and specific labels.
- ❌ Don't use heavy drop shadows — screenshot shows very subtle or no shadows on most elements.
- ❌ Don't use a playful sans-serif for headlines — screenshot shows a transitional serif for impact.

The system deliberately avoids decorative borders, dense layouts, and synthetic neon colors, choosing instead a restrained palette and generous whitespace to keep the focus on the tool's functional core.

## System Prompt (paste into AI tool)

```
This is a modern SaaS landing page for a cloud-native GIS platform. It positions itself as an easy-to-use, collaborative mapping tool. The primary colors are a deep forest green (#3D521E) and a warm accent orange (#DC8C46), with off-white (#EEE) for contrast. Typography pairs a transitional serif for display with a grotesque sans for body text. Critical donts: avoid neon colors, avoid dense layouts, avoid decorative borders, avoid lowercase UI labels, avoid heavy shadows, and avoid sans-serif display type.
```