# Fs-poster Design System

> A clean, high-contrast SaaS interface balancing deep plum typography against a warm bone canvas, punctuated by high-energy pink primary actions.

**Source:** [https://fs-poster.com](https://fs-poster.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Fs-poster utilizes a "monochrome-plus" system where the interface is primarily defined by a warm off-white background (`#fefdfc`) and deep achromatic or near-black text (`#18181b`, `#242424`). The brand's energy is concentrated in a single high-saturation pink (`#f63d68`) used exclusively for primary conversion points and critical UI markers. Typography is anchored by **Poppins**, a geometric sans-serif that provides a modern, accessible feel across a wide scale from 40px display headers to 12px captions. Layouts are spacious, utilizing a 30px card radius and subtle shadows to create soft depth without heavy borders.

## Signature DNA
1. **The High-Contrast Pink Pulse:** The use of `#f63d68` as a surgical strike color against the neutral canvas. It is reserved for "Get FS Poster" and "Buy Now" actions, ensuring zero competition for the user's eye.
2. **Geometric Softness:** A consistent application of `30px` corner radii on primary content cards and `6px` to `10px` on interactive controls, creating a friendly, non-industrial SaaS aesthetic.
3. **Plum-Tinged Foundation:** While the system appears monochrome, the primary "ink" color is actually a very deep plum (`#2f1d49`), which adds a subtle warmth and premium feel compared to pure black.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#fefdfc` | Primary page background and surface | 62 | 0.8 | Computed Style |
| `{color.ink.primary}` | `#2f1d49` | Primary brand text and deep accents | 158 | 0.8 | Computed Style |
| `{color.ink.dark}` | `#18181b` | High-contrast body and heading text | 153 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#4f4f4f` | Secondary body and descriptive text | 59 | 0.8 | Computed Style |
| `{color.border.light}` | `#f1f0ef` | Subtle dividers and panel outlines | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.action.primary}` | `#f63d68` | Primary CTA background | 6 | 0.6 | Computed Style |
| `{color.link.blue}` | `#0000ee` | Standard inline text links | 48 | 0.8 | Computed Style |
| `{color.accent.cool}` | `#7d89b0` | Decorative UI elements / icons | 28 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| **Poppins** | 400, 500, 600, 700 | Heading & UI | Poppins (Google Fonts) | OFL |
| **Arial** | 400 | Fallback / Body | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 40px | 46px | normal | 600 | Hero H1 | `h1` |
| `{type.heading.lg}` | 32px | 40px | normal | 600 | Section Headers | `h2` |
| `{type.heading.md}` | 26px | 30px | normal | 600 | Sub-sections | `h2` |
| `{type.heading.sm}` | 20px | 24px | normal | 600 | Card Titles | `h6` |
| `{type.body.lg}` | 18px | 24px | normal | 600 | Feature Intros | `h4` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard Prose | `p` |
| `{type.body.sm}` | 14px | 20px | normal | 500 | UI Labels / Nav | `div.main` |
| `{type.caption}` | 12px | 18px | normal | 400 | Small Buttons | `button.btn.btn__sm` |

### Principles
1. **Semibold Dominance:** All headings from 18px to 40px utilize weight 600 (Semibold) to maintain brand authority.
2. **Vertical Breathing:** Line heights are generous, typically 1.2x to 1.5x the font size, preventing text density issues on long feature lists.
3. **Achromatic Hierarchy:** Color is never used for hierarchy in text; weight and size do the work, while color remains strictly for links or brand moments.

## Spacing
**Base unit:** 8px (derived from high frequency of 8, 16, 32px values)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 334 |
| `{space.sm}` | 16px | 63 |
| `{space.md}` | 32px | 18 |
| `{space.lg}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Page sections / Footers | 777 occurrences |
| `{radius.sm}` | 6px | Input fields / Small buttons | 15 occurrences |
| `{radius.md}` | 10px | Primary buttons | 6 occurrences |
| `{radius.lg}` | 30px | Main feature cards | 17 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.06) 0px 14px 22px 0px` | Feature cards on white canvas | 16 occurrences |
| `{shadow.subtle}` | `rgba(195, 195, 195, 0.35) 0px 0.967px 7.737px 0px` | Pricing tier cards | 2 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (e.g., "Get FS Poster")
**Pages observed:** [Home, Pricing]
**Spec:** Background `{color.action.primary}` (#f63d68) / Text `{color.canvas}` (#fefdfc) / Radius `{radius.md}` (10px) / Padding 14px 20px / Typography `{type.body.sm}` (14px/600)
**States observed:** Default | Hover: Captured (darker shade) | Active: Captured

#### Ghost Button
**Role:** Secondary actions (e.g., "Try Demo")
**Pages observed:** [Home, Pricing]
**Spec:** Background transparent / Text `{color.ink.dark}` (#18181b) / Border 1px `{color.ink.dark}` (#18181b) / Radius `{radius.md}` (10px) / Padding 14px 20px
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** [Home]
**Spec:** Background #ffffff / Radius `{radius.lg}` (30px) / Padding 30px / Shadow `{shadow.card}`
**States observed:** Default | Hover: Not captured

#### Pricing Card
**Role:** Tiered product options
**Pages observed:** [Pricing]
**Spec:** Background #ffffff / Border 1px `#eaec60` / Radius 20px / Shadow `{shadow.subtle}`
**States observed:** Default | Active (Featured): Captured

### Tier 3: Surface-specific

#### Global Footer
**Role:** Site-wide navigation and legal
**Pages observed:** [Home, Pricing]
**Spec:** Background `{color.canvas}` (#fefdfc) / Text `{color.ink.muted}` (#4f4f4f) / Typography `{type.body.sm}` (14px)
**States observed:** Default

#### Navigation Bar
**Role:** Primary site header
**Pages observed:** [Home, Pricing]
**Spec:** Background transparent or #ffffff / Text `{color.ink.primary}` (#2f1d49) / Height 80px (approx)
**States observed:** Default | Sticky: Captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Padding | 100px (vertical) |
| Column Gap | 30px |

## Do's
- Use `#f63d68` only for the primary "Get Started" or "Buy" actions.
- Apply `{radius.lg}` (30px) to all main content containers to maintain the "soft" brand feel.
- Set body text to `#4f4f4f` for long-form reading to reduce eye strain against the off-white canvas.
- Ensure all headings use **Poppins** at weight 600.
- Use `{space.lg}` (100px) between major landing page sections.

## Don'ts
- Do not use pure black (#000000) for large blocks of text; use `{color.ink.dark}` (#18181b).
- Do not use sharp corners (0px) for interactive elements like buttons or inputs.
- Do not use the primary pink (#f63d68) for non-interactive decorative elements.
- **Wrong:** Using a sub-brand blue for a primary CTA. **Right:** Use `#f63d68`. **Reason:** The parent brand identity relies on the pink/plum contrast for conversion.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --fs-canvas: #fefdfc;
  --fs-ink-primary: #2f1d49;
  --fs-action-primary: #f63d68;
  --fs-radius-card: 30px;
  --fs-shadow-card: 0px 14px 22px 0px rgba(0, 0, 0, 0.06);
  --fs-font-main: 'Poppins', sans-serif;
}
```

## Known gaps
- Hover and Active states for secondary navigation items were not fully captured in the automated trace.
- Mobile-specific menu transition timings were not recorded.
- Error and Success semantic colors were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://fs-poster.com | 1440px | 2026-06-06 |
| Pricing | https://fs-poster.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://fs-poster.com | 390px | 2026-06-06 |