.webp)
Peec AI
Peec AI — Design System Overview
Source & Stack
\- URL:
Typography \- Primary font: Inter (inferred — Framer's default; confirmed by clean geometric sans-serif rendering across all UI) \- Heading scale: Large hero H1 (~48–64px), section H2 (~32–40px), feature H3 (~20–24px) \- Body: ~16px base, line-height ~1.6 \- Weight range: 400 (body), 500 (labels/nav), 600–700 (headings/CTAs) \- Letter-spacing: Tight on headings (-0.01em to -0.02em), normal on body
Color Philosophy \- Background: Deep navy/charcoal — primary canvas is very dark (~#0A0C14 to #0D0F1A) \- Surface cards: Slightly elevated dark panels (~#111520 to #161B2E) \- Accent/Primary: Vivid violet-blue — used for CTAs, highlights, chart lines (~#5B6EF5 to #6B7FFF) \- Secondary accent: Soft teal/cyan for data callouts (~#4ECDC4 or similar) \- Text primary: Near-white (#F0F2FF or #EAEDFF) \- Text secondary: Mid-grey (#8B90A8 to #9CA3C8) \- Border/divider: Subtle dark border (~#1E2440 to #252B47) \- Success/positive: Green tint (~#22C55E or #34D399) \- Sentiment indicators: Green (positive), amber (neutral), red (negative)
Spacing \- Base unit: 4px \- Section padding: 80–120px vertical on desktop, ~48–64px on mobile \- Component gap: 16px (tight), 24px (default), 40–48px (loose/section) \- Container max-width: ~1200px centered
Component Defaults \- Buttons (primary): Filled violet/indigo, 8px radius, 14–16px text, medium weight, subtle hover glow \- Buttons (secondary): Outlined or ghost variant, same radius \- Cards: Dark surface, 12–16px radius, subtle border: 1px solid dark border, soft box-shadow \- Badges/tags: Small pill shape, 999px radius, muted background tint \- Charts/graphs: Framer-rendered SVG/canvas; indigo lines, dark grid \- Testimonial cards: Avatar circle, quote text, subdued card bg \- Announcement banner: Top full-width strip, accent color bg, small text
Layout \- Grid: 12-column, max-width ~1200px, 24–32px gutters \- Navigation: Fixed top bar, logo left, links center/right, CTA button far right \- Hero: Full-width, centered text, large heading + subheading + dual CTA, dashboard screenshot below \- Sections: Alternating feature blocks (text + screenshot), full-width logo ticker, testimonial carousel \- Footer: 5-column link grid on dark bg, copyright row below
:root { / ---- Colors ---- / --color-bg-primary: #0A0C14; --color-bg-secondary: #0D0F1A; --color-surface-1: #111520; --color-surface-2: #161B2E; --color-surface-3: #1E2440;
--color-border: #1E2440; --color-border-subtle: #252B47;
--color-accent-primary: #5B6EF5; --color-accent-primary-hover: #6B7FFF; --color-accent-secondary: #4ECDC4;
--color-text-primary: #F0F2FF; --color-text-secondary: #9CA3C8; --color-text-muted: #5A6080;
--color-success: #22C55E; --color-warning: #F59E0B; --color-danger: #EF4444;
--color-chart-line-1: #5B6EF5; --color-chart-line-2: #4ECDC4; --color-chart-line-3: #F59E0B; --color-chart-area-1: rgba(91, 110, 245, 0.15);
/ ---- Typography ---- / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 2rem; / 32px / --font-size-4xl: 2.5rem; / 40px / --font-size-5xl: 3.5rem; / 56px / --font-size-hero: 4rem; / 64px /
--font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
--line-height-tight: 1.2; --line-height-snug: 1.4; --line-height-base: 1.6; --line-height-relaxed: 1.75;
--letter-spacing-tight: -0.02em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.04em;
/ ---- Spacing ---- / --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;
/ ---- Border Radius ---- / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px;
/ ---- Shadows ---- / --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.04); --shadow-glow-accent: 0 0 20px rgba(91, 110, 245, 0.35);
/ ---- Layout ---- / --container-max-width: 1200px; --container-padding: 24px; --nav-height: 64px; --section-padding-y: 96px; --grid-columns: 12; --grid-gap: 24px; }
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --color-bg-primary | #0A0C14 | Page background |
| --color-bg-secondary | #0D0F1A | Alt section bg |
| --color-surface-1 | #111520 | Card background |
| --color-surface-2 | #161B2E | Elevated card / modal |
| --color-surface-3 | #1E2440 | Active/hover state |
| --color-border | #1E2440 | Default border |
| --color-accent-primary | #5B6EF5 | Primary CTA, links, chart |
| --color-accent-primary-hover | #6B7FFF | Hover state |
| --color-accent-secondary | #4ECDC4 | Teal highlight / data |
| --color-text-primary | #F0F2FF | Body text |
| --color-text-secondary | #9CA3C8 | Sub-labels, captions |
| --color-text-muted | #5A6080 | Placeholder, disabled |
| --color-success | #22C55E | Positive sentiment |
| --color-warning | #F59E0B | Neutral / caution |
| --color-danger | #EF4444 | Negative sentiment |
Spacing Tokens
| Token | Value | Usage |
|---|---|---|
| --space-1 | 4px | Base unit |
| --space-2 | 8px | Tight gap |
| --space-4 | 16px | Default component gap |
| --space-6 | 24px | Card padding |
| --space-8 | 32px | Section sub-gap |
| --space-12 | 48px | Mobile section padding |
| --space-20 | 80px | Desktop section padding |
| --space-24 | 96px | Large section padding |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| --font-family-base | Inter, system-ui, sans-serif | All text |
| --font-size-sm | 14px | Labels, nav, badges |
| --font-size-base | 16px | Body copy |
| --font-size-xl | 20px | Card headings |
| --font-size-3xl | 32px | Section headings |
| --font-size-5xl | 56px | Hero sub-heading |
| --font-size-hero | 64px | Hero H1 |
| --font-weight-medium | 500 | Nav, labels |
| --font-weight-semibold | 600 | Feature headings |
| --font-weight-bold | 700 | Hero heading |
| --line-height-tight | 1.2 | Headings |
| --line-height-base | 1.6 | Body text |
| --letter-spacing-tight | -0.02em | Large headings |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 4px | Input fields, small chips |
| --radius-md | 8px | Buttons (secondary) |
| --radius-lg | 12px | Cards, panels |
| --radius-xl | 16px | Feature cards, modals |
| --radius-pill | 999px | Tags, badges, pills |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 3px rgba(0,0,0,0.4) | Subtle lift |
| --shadow-md | 0 4px 16px rgba(0,0,0,0.5) | Cards |
| --shadow-lg | 0 8px 32px rgba(0,0,0,0.6) | Modals, popovers |
| --shadow-card | 0 2px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) | Dashboard cards |
| --shadow-glow-accent | 0 0 20px rgba(91,110,245,0.35) | CTA button glow |
Framework: Framer (v17c1b93) — confirmed via meta-generator tag. No React/Next.js codebase; the site is entirely visual/no-code. All assets served from framerusercontent.com CDN.
Theme support: Dark-mode only (no light mode toggle or prefers-color-scheme switching detected). The entire design is built around a deep navy/charcoal canvas with vibrant indigo-violet accents — a deliberate analytics SaaS aesthetic aligning with tools like Linear, Vercel, and Raycast.
Font: Inter is Framer's default and the visual rendering is consistent with Inter's geometric proportions. No Google Fonts URL was surfaced in the rendered HTML (Framer self-hosts fonts on its CDN).
Data source confidence: Medium-high. Core visual structure, color philosophy, and layout patterns are directly observable from the rendered HTML and content. Exact hex values for bg/surface/accent are inferred from the visual system (deep navy + indigo/violet CTA pattern); no raw CSS variables were exposed in the page source (Framer compiles styles into hashed classes). Values are calibrated estimates typical of this dark-SaaS design tier.
Notable patterns: \- Announcement banner at top (full-width strip) — used for product launch callouts \- Dashboard screenshot hero — large product UI mockup below hero text (common SaaS pattern) \- Logo ticker (infinite marquee) for social proof — both Brands and Agencies tabs \- 3-tab metric showcase (Visibility / Position / Sentiment) with animated card swap \- Quadrant scatter chart for competitive analysis (Gartner-style) \- Testimonial carousel with avatar + company logo \- FAQ accordion section at bottom \- 5-column footer with categorized link groups \- CTA duet pattern throughout: primary filled button + secondary ghost/outline button side by side
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.