---
title: "Felt design system"
variant: extended
source: https://felt.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/felt-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Felt · Design System

> Quiet editorial design for maps, data, and fieldwork.

**Theme:** light · **Industry:** saas · **Source:** https://felt.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Felt pairs a warm, paper-like canvas with refined serif headlines and clear sans-serif interface text. The homepage uses expansive product visuals, restrained dividers, and dark map surfaces to explain an AI-native GIS platform.

## North star

Keep the page feeling like a calm editorial map atlas: cream space, serif-led hierarchy, precise rules, and product visuals that do the explaining.

## Overview

The visual identity is led by a warm cream canvas (#f4f2ea), which gives the long homepage a calm, paper-like quality. Ink (#1c1b18) anchors headings, body text, controls, and the dark footer; the small burnt-orange accent appears selectively in eyebrow text and important links rather than as a broad CTA fill. GT Alpina serif headlines provide an editorial counterpoint to Atlas Grotesk navigation and interface copy, while SF Mono marks compact, uppercase technical labels. Content sits in a broad centered frame, usually aligned to the left and divided into generous horizontal bands with fine gray rules. Sections alternate text with maps, software captures, mobile screens, and illustrations. White cards and subtle shadows add depth to product mockups, but most content remains flat and border-led. Dark panels are reserved for maps, developer/security moments, and the footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Map Paper | `#f4f2ea` | `--color-map-paper` | brand | Primary page canvas across the hero and most homepage sections; creates the warm, paper-like foundation. |
| Atlas Ink | `#1c1b18` | `--color-atlas-ink` | brand | Primary text and dark controls; also the footer and inverse surfaces. |
| Field Slate | `#69685f` | `--color-field-slate` | neutral | Muted navigation and supporting copy, including secondary explanatory text. |
| Survey Ochre | `#dc8c46` | `--color-survey-ochre` | accent | Small emphasis for selected links and technical eyebrow text, not large fills. |
| Contour Line | `#d6d4cc` | `--color-contour-line` | neutral | Fine section, navigation, and card dividers that keep the layout structured but quiet. |
| Map Marker Blue | `#2674ba` | `--color-map-marker-blue` | semantic | Blue avatar marker inside product-interface imagery; not a dominant site-brand color. |
| Interface White | `#ffffff` | `--color-interface-white` | surface | Product popovers, cards, badges, and white text on dark primary buttons. |
| Deep Olive Text | `#3a382f` | `--color-deep-olive-text` | neutral | Secondary text and footer/link details where a softer near-black is useful. |
| Marker Violet | `#7c65b0` | `--color-marker-violet` | semantic | Purple collaborator avatar inside interface mockups; illustration/interface-only color. |
| Soft Boundary | `#c1beb8` | `--color-soft-boundary` | neutral | Button outlines and fine card or navigation borders. |
| Night Map | `#101010` | `--color-night-map` | surface | Near-black inverse section surface, notably the developer feature panel. |
| Pale Terrain | `#ecebe3` | `--color-pale-terrain` | surface | Logo-cloud band and lightly differentiated cards or badges against the main canvas. |
| Rust Marker | `#b85500` | `--color-rust-marker` | semantic | Small badge or map-interface accent only; not a core page color. |
| Footer Ash | `#a2a09a` | `--color-footer-ash` | neutral | Low-emphasis footer and supporting text. |
| Footer Mist | `#c3c3c2` | `--color-footer-mist` | neutral | Subdued footer details and secondary information. |
| Parchment Gray | `#d1cfc8` | `--color-parchment-gray` | neutral | Occasional pale card or text detail; use sparingly as a low-contrast neutral. |
| Burnt Sienna | `#a7531b` | `--color-burnt-sienna` | accent | Darker orange emphasis in selected text accents and small highlighted details. |

### Semantic aliases

`--color-canvas` → `#f4f2ea` (Map Paper) · `--color-surface` → `#1c1b18` (Atlas Ink) · `--color-surface-2` → `#ffffff` (Interface White) · `--color-surface-3` → `#101010` (Night Map) · `--color-surface-4` → `#ecebe3` (Pale Terrain) · `--color-text` → `#1c1b18` (Atlas Ink) · `--color-text-muted` → `#69685f` (Field Slate) · `--color-text-subtle` → `#3a382f` (Deep Olive Text) · `--color-border` → `#d6d4cc` (Contour Line) · `--color-accent` → `#dc8c46` (Survey Ochre) · `--color-accent-2` → `#a7531b` (Burnt Sienna)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1b18` | `#f4f2ea` | 15.37:1 | AAA |
| `#1c1b18` | `#ffffff` | 17.22:1 | AAA |
| `#1c1b18` | `#101010` | 1.1:1 | fail |
| `#69685f` | `#f4f2ea` | 5:1 | AA |
| `#69685f` | `#1c1b18` | 3.07:1 | AA-large |
| `#69685f` | `#ffffff` | 5.61:1 | AA |
| `#69685f` | `#101010` | 3.39:1 | AA-large |
| `#3a382f` | `#f4f2ea` | 10.49:1 | AAA |
| `#3a382f` | `#1c1b18` | 1.47:1 | fail |
| `#3a382f` | `#ffffff` | 11.75:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Atlas Grotesk | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, buttons, links, and interface labels | Inter |
| GT Alpina | `--font-display` | webfont | 400 | Display and page-section headings | Instrument Serif |
| Publico Text | `--font-publico-text` | webfont | 400 | Serif reading text and supporting editorial content | Source Serif 4 |
| SF Mono | `--font-mono` | webfont | 400 | Technical eyebrow labels and coordinate readouts | IBM Plex Mono |

- **Atlas Grotesk:** Use restrained weights; navigation is medium, body stays regular, and case is generally natural.
- **GT Alpina:** Regular-weight editorial serif with compact tracking and close leading on large headlines.
- **Publico Text:** Use for readable serif passages where present; keep it calm and unembellished.
- **SF Mono:** Small uppercase labels use expanded tracking; coordinate/status text stays technical and compact.

### Type scale — Augmented Fourth (ratio ≈ 1.376, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 69px | 400 | 1.02 | -0.02em | — | GT Alpina | Large editorial hero or campaign headline. |
| h1 | 46px | 400 | 1.06 | -0.015em | — | GT Alpina | Primary page and major section headlines. |
| h2 | 27px | 400 | 1.26 | 0 | — | GT Alpina | Feature and content-section headings. |
| h3 | 26px | 400 | 1.3 | -0.01em | — | GT Alpina | Subsection headings, cards, and FAQ prompts. |
| h4 | 21px | 400 | 1.2 | 0 | — | GT Alpina | Compact feature and card titles. |
| body | 14px | 400 | 1.55 | 0 | — | Atlas Grotesk | Paragraphs, navigation descriptions, and explanatory copy. |
| caption | 11.5px | 400 | 1.35 | 0 | — | Atlas Grotesk | Small supporting labels and image captions. |
| nav | 13.5px | 500 | 1.3 | 0 | — | Atlas Grotesk | Primary header navigation labels. |
| link | 16px | 400 | normal | 0 | — | Atlas Grotesk | Inline feature links and calls to explore. |
| eyebrow | 11px | 400 | normal | 0.1em | uppercase | SF Mono | Small uppercase section labels above headings. |
| code | 11px | 400 | normal | 0.1em | uppercase | SF Mono | Technical labels, coordinates, and compact system-style text. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 5, 6, 7, 8, 12, 13, 14, 16, 22, 24, 26, 34, 40, 56, 72 px.
- Section rhythm 72px · element gap 2px · card padding 9px · max content width 1320px.

Use a broad centered content frame, measured at a 1320px maximum, with wide outer margins and comfortable density. The homepage is a sequence of full-width horizontal bands, usually left-aligned, with thin rules separating adjacent sections. Alternate single-column statements with two-column feature layouts and denser grids for integrations, industries, and stories. Preserve substantial breathing room around headings and product media; keep the page’s long-scroll rhythm measured rather than compressed. The final CTA is centered, while the footer switches to a dark multi-column directory.

## Shape & elevation

- Radius: button `4px` · card `6px` · badge `50%` · nav `4px` · xs `4px` · sm `6px` · md `8px` · lg `23px` · xl `32px`
- Shadow `hairline` (badge): `rgb(255, 255, 255) 0px 0px 0px 1.5px`
- Shadow `inset` (nav): `rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset, rgba(28, 27, 24, 0.45) 0px 28px 64px -30px, rgba(28, 27, 24, 0.2) 0px 6px 18px -12px`
- Shadow `hairline-2` (other): `rgb(249, 248, 251) 0px 0px 0px 1.5px`
- Shadow `sm` (other): `rgba(24, 39, 75, 0.35) 0px 1px 4px 0px`
- Shadow `xl` (card, section): `rgba(28, 27, 24, 0.4) 0px 24px 60px -30px`
- Shadow `xl-2` (card): `rgba(28, 27, 24, 0.55) 0px 24px 60px -30px`
- Motion: standard transition `0.14s ease` on interactive elements.

Most of the page is flat, with subtle gray hairlines doing more work than shadows. Use modest lift for floating interface cards, map overlays, and white product panels, keeping shadows soft and dark. Rounded corners are restrained on buttons and cards; section bands and feature content stay square-edged and editorial.

## Imagery

Treat the live map and GIS interface as the main imagery: use wide software captures, dark map views, and product mockups with crisp edges. Pair them with occasional aerial/site imagery, mobile-device screens, and softly rendered editorial illustrations. Keep imagery integrated into the layout rather than turning every section into a full-bleed photograph. White interface cards and restrained shadows can sit above the map visuals; illustration colors should remain secondary to the cream-and-ink palette.

## Components

### Primary CTA

Ink-filled button with white Atlas Grotesk text, a compact 4px radius, and a clear, high-contrast label.

### Secondary CTA

Transparent or canvas-colored button with an outlined boundary, dark text, and matching restrained corner treatment.

### Feature section

Serif heading and concise copy paired with a map, software capture, or device imagery; separated by fine rules.

### Eyebrow label

Small uppercase SF Mono label with expanded tracking above a serif section heading.

### Feature index grid

Compact multi-column GIS capability list with numbered labels, short titles, and thin top dividers.

### Product overlay card

White interface card placed over map imagery, using small sans-serif status text and subtle layered shadow.

### Footer directory

Full-width ink surface with inverse location details and grouped multi-column navigation links.

### Measured component styles

- **Primary button** (“Get started for free”): background #1c1b18 · text #ffffff · border 1px solid · radius 4px · padding 13px 23px · 500 15px Atlas Grotesk
- **Secondary button** (“Book a demo →”): transparent background · text #1c1b18 · border 1px solid #c1beb8 · radius 4px · padding 13px 23px · 400 15px Atlas Grotesk
- **Link** (“Web GIS →”): transparent background · text #1c1b18 · radius 0px · padding 0px · 400 16px Atlas Grotesk
- **Card** (“Agriculture → Verify on-farm practices a”): transparent background · text #1c1b18 · border 1px solid #c1beb8 · radius 0px · padding 14px 0px 22px 0px · 400 16px Atlas Grotesk
- **Badge** (“AM”): background #7c65b0 · text #ffffff · radius 50% · padding 0px · 500 10.92px Atlas Grotesk · shadow rgb(255, 255, 255) 0px 0px 0px 1.5px
- **Navigation item** (“LAT 37.8116° N”): transparent background · text #f4f2ea · radius 0px · padding 0px · 400 11px SF Mono

## Do

- Use Map Paper (#f4f2ea) as the dominant canvas.
- Set large headlines in an editorial serif.
- Reserve Atlas Ink (#1c1b18) for text and primary actions.
- Use SF Mono for small uppercase technical eyebrows.
- Separate long sections with quiet hairlines.
- Let maps and product screens carry the feature story.

## Don't

- Do not introduce gradients or loud decorative color fields.
- Do not use the marker blues and purples as brand-wide accents.
- Do not replace editorial headings with heavy geometric sans.
- Do not crowd the long-scroll layout with dense content.
- Do not add strong shadows to ordinary cards or sections.
- Do not make every section a rounded, floating card.

## Agent prompt

Build a new page in Felt’s calm, editorial GIS style. Use Map Paper (#f4f2ea) for the main canvas and Atlas Ink (#1c1b18) for headings, text, dark controls, and inverse panels. Set large headings in a refined regular-weight serif, with Atlas Grotesk-style sans-serif for navigation, body copy, and buttons; use a small tracked mono face for uppercase eyebrows. Organize content in a broad centered frame with left-aligned section headings, generous breathing room, and fine Contour Line (#d6d4cc) dividers. Pair concise copy with map interfaces, product captures, or field imagery. Use white interface cards sparingly and keep shadows soft. Limit Survey Ochre (#dc8c46) to small accents. Avoid gradients, saturated brand-wide color, and unnecessary rounded-card layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width cream hero with left-aligned headline and CTAs, map experience spread across the open right side. | primary and secondary CTA, map carousel indicators, collaboration overlay | serif headline, warm canvas, floating white cards, map markers |
| 2 | logo-cloud | Shallow pale band containing a centered, multi-row set of customer logos. | social proof | pale section band, logo row |
| 3 | product-showcase | Left-aligned section heading and copy above a wide, dark GIS interface capture. | product demonstration, watch full video link | serif section title, dark map canvas, wide product media |
| 4 | integrations | Two-column feature section with explanatory copy on the left and integration names in a compact grid on the right. | integration discovery | thin row dividers, small provider marks, eyebrow label |
| 5 | feature-grid | Section heading and product visual above a multi-column set of numbered GIS capabilities. | capability scanning, feature links | numbered items, hairline dividers, product screenshot |
| 6 | feature-split | Copy and field-app link on one side, paired mobile-device product screens on the other. | field workflow explanation, mobile app link | two-column split, device mockups, eyebrow label |
| 7 | feature-split | Dark inset feature panel with explanatory text on the left and a layered map-system illustration on the right. | developer information link | inverse panel, wireframe illustration, serif title |
| 8 | feature-split | Large white AI interface mockup beside a text column introducing agent and GIS workflows. | AI prompt example, MCP service link | white interface panel, serif heading, small orange action detail |
| 9 | feature-split | Introductory copy at the top followed by wide, softly illustrated collaboration imagery. | sharing explanation, Web GIS link | editorial illustration, open canvas, section rule |
| 10 | testimonials | Heading and all-stories link above three aligned testimonial cards. | customer story link, testimonial scanning | three-column cards, fine card borders, brand marks |
| 11 | category-nav | Section heading followed by a dense multi-column grid of linked industry categories and descriptions. | industry navigation, linked use cases | text-led grid, thin horizontal rules, compact descriptions |
| 12 | feature-grid | Dark inset panel with a headline and three horizontally arranged security topics. | security detail links | inverse surface, numbered columns, accent links |
| 13 | gallery | Gallery heading and link above a three-column grid of map previews and captions. | open gallery link, map browsing | map thumbnails, compact captions, grid layout |
| 14 | faq | Two-column FAQ region with a prominent heading and horizontally ruled question-and-answer rows. | question scanning, inline contextual links | numbered prompts, hairline separators, editorial typography |
| 15 | cta | Centered closing CTA with a serif headline, short supporting sentence, and paired buttons. | free-start conversion, demo booking | centered alignment, ink primary button, outlined secondary button |
| 16 | footer | Full-width dark footer with brand and coordinates on the left, grouped navigation columns on the right. | grouped site navigation, location readout | inverse surface, multi-column links, fine bottom rule |

## Source CSS custom properties (selected)

```css
--dat-gap-tight: 20px;
--dat-gap: 40px;
--dat-gap-wide: 56px;
--dat-radius-sm: 3px;
--dat-radius: 4px;
--dat-radius-lg: 6px;
--dat-shadow-lift: 0 20px 40px -24px #1c1b1866;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/felt-com