---
name: Felt
description: "Worth including for its successful blend of professional, earthy colors with a modern, serif-forward typographic system."
version: alpha

colors:
  background: "#3D521E"
  primary: "#333333"
  secondary: "#FFFFFF"
  tertiary: "#DC8C46"
  neutral: "#333333"
  bg-soft: "#64754B"
  bg-quiet: "#EEE"
  muted-soft: "#EEE"
  line: "rgba(51,51,51,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 101px
    lineHeight: 0.88
    fontWeight: 300
    letterSpacing: "-2.88px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A cloud-native GIS platform that makes maps, apps, and dashboards easy to create.

*Google Docs for maps*

## Colors

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

- **Background (`#3D521E`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#FFFFFF`)** — uses `ink-soft` token
- **Accent (`#DC8C46`)** — uses `accent` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(51,51,51,1)`)** — uses `line` token

## Typography

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

- 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

## Layout

Centered content columns with generous whitespace

*Rhythm:* 8px baseline grid

## Elevation & Depth

- 0px 2px 5px 0px rgba(0,0,0,0.2)
- Borders: 1px solid #333333

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded rectangle with accent background or bordered style
- **card:** Clean bordered containers for interface screenshots
- **chip:** Used for tag or status labels
- **input:** Standard text input fields with subtle borders
- **hero:** Large scale typography over a solid color block with product showcase

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```