.webp)
Forest Admin
Forest Admin — Design System Overview
Source & Stack
\- URL:
Typography \- Primary typeface: Inter (inferred from Framer default stack + B2B SaaS norm; no custom font link detected in HTML) \- Fallback stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif \- Heading style: ALL-CAPS labels for section tags (e.g. "WHERE YOUR OPS LIVE"), mixed-case for H1/H2 \- Type scale: Large hero H1 (~56–72px), section H2 (~36–48px), card H4 (~18–20px), body (~15–16px) \- Font weights: 400 body, 500 medium labels, 600–700 headings
Color Philosophy \- Dark neutral primary: rgb(31, 34, 35) — near-black used for text, borders, logo outlines \- Olive/khaki accent: rgb(92, 92, 73) — warm secondary used in icon fills and decorative elements \- Background: Off-white / warm white (light mode dominant on marketing site) \- CTA buttons: Dark fill (near-black) with white text for primary; ghost/outline for secondary \- Palette is restrained and professional — earthy neutrals signal trust and compliance focus \- No bright accent colors; brand identity leans into muted, institutional tones
Spacing \- Generous section padding: ~80–120px vertical between sections \- Card internal padding: ~24–32px \- Component gaps: 8px base unit, multiples of 4/8/16/24/32/48/64px
Border Radius \- Cards and containers: ~8–12px \- Buttons: ~6–8px (slightly rounded, not pill-shaped) \- Tags/badges: ~4px
Shadows \- Subtle card shadows: soft drop shadow, low spread \- No heavy elevation; flat-first with minimal depth cues
Layout \- Max content width: ~1200–1280px centered \- Navigation: sticky top bar with logo left, nav center, CTAs right \- Hero: full-width, centered text + dual CTA buttons \- Sections: alternating text+visual, full-width feature strips \- Pricing: 2-column card grid (Scale / Control) \- Footer: multi-column link grid
Dark / Light Mode \- Marketing site: light mode only (no dark mode toggle detected) \- App UI may support dark mode independently
/ Forest Admin — CSS Custom Properties /
/ Derived from Framer-built marketing site + SVG color extractions /
/ Source:
:root { / ── Brand Colors ── / --color-primary: rgb(31, 34, 35); / Near-black: text, borders, primary CTA bg / --color-secondary: rgb(92, 92, 73); / Olive/khaki: icon fills, decorative elements / --color-accent-olive: #5c5c49; / Hex equivalent of secondary /
/ ── Neutrals ── / --color-bg: #f9f8f5; / Warm off-white background / --color-bg-section: #ffffff; / Pure white for cards/panels / --color-bg-muted: #f2f1ed; / Subtle section backgrounds / --color-surface: #ffffff; --color-border: #e5e3de; / Warm grey border / --color-border-strong: #c8c5be;
/ ── Text ── / --color-text-primary: rgb(31, 34, 35); / Primary body + headings / --color-text-secondary: #6b6960; / Subdued / muted text / --color-text-tertiary: #9c9a93; / Placeholder / disabled / --color-text-inverse: #ffffff; / On dark backgrounds /
/ ── Interactive ── / --color-btn-primary-bg: rgb(31, 34, 35); --color-btn-primary-text: #ffffff; --color-btn-primary-hover:#000000; --color-btn-ghost-border: rgb(31, 34, 35); --color-btn-ghost-text: rgb(31, 34, 35); --color-link: rgb(31, 34, 35); --color-link-hover: rgb(92, 92, 73);
/ ── Status / Semantic ── / --color-success: #2d7d46; --color-warning: #b45309; --color-error: #b91c1c; --color-info: #1d4ed8;
/ ── Typography ── / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 56px; --font-size-hero: 72px;
--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.35; --line-height-base: 1.5; --line-height-relaxed: 1.65;
--letter-spacing-tight: -0.02em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.05em; --letter-spacing-caps: 0.08em; / ALL-CAPS section labels /
/ ── 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: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
/ ── Shadows ── / --shadow-sm: 0 1px 2px rgba(31, 34, 35, 0.06); --shadow-md: 0 2px 8px rgba(31, 34, 35, 0.08), 0 1px 2px rgba(31, 34, 35, 0.04); --shadow-lg: 0 8px 24px rgba(31, 34, 35, 0.10), 0 2px 6px rgba(31, 34, 35, 0.04); --shadow-xl: 0 16px 48px rgba(31, 34, 35, 0.12);
/ ── Layout ── / --max-width-content: 1200px; --max-width-prose: 680px; --nav-height: 64px; --container-padding: 24px; --section-padding-y: 96px; }
/ Dark mode — not detected on marketing site; provided for app completeness / @media (prefers-color-scheme: dark) { :root { --color-bg: #1a1c1d; --color-bg-section: #222425; --color-bg-muted: #2a2c2d; --color-surface: #252728; --color-border: #383a3b; --color-border-strong: #4a4c4d; --color-text-primary: #f0ede8; --color-text-secondary: #a8a59e; --color-text-tertiary: #6e6c66; --color-text-inverse: rgb(31, 34, 35); --color-btn-primary-bg: #f0ede8; --color-btn-primary-text: rgb(31, 34, 35); --color-link: #f0ede8; } }
Forest Admin — Design Token Reference
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --color-primary | rgb(31, 34, 35) | Text, CTA bg, borders, logo |
| --color-secondary | rgb(92, 92, 73) | Icon fills, decorative olive |
| --color-bg | #f9f8f5 | Page background (warm off-white) |
| --color-bg-section | #ffffff | Cards, panels |
| --color-bg-muted | #f2f1ed | Alternate section bg |
| --color-border | #e5e3de | Default border |
| --color-border-strong | #c8c5be | Emphasized border |
| --color-text-primary | rgb(31, 34, 35) | Body text, headings |
| --color-text-secondary | #6b6960 | Subdued text |
| --color-text-tertiary | #9c9a93 | Placeholder / disabled |
| --color-text-inverse | #ffffff | On dark surfaces |
| --color-btn-primary-bg | rgb(31, 34, 35) | Primary button fill |
| --color-success | #2d7d46 | Positive status |
| --color-warning | #b45309 | Caution status |
| --color-error | #b91c1c | Error / destructive |
| --color-info | #1d4ed8 | Informational |
Spacing Tokens
| Token | Value | Usage |
|---|---|---|
| --space-1 | 4px | Micro gap |
| --space-2 | 8px | Base unit / tight gap |
| --space-3 | 12px | Small gap |
| --space-4 | 16px | Default component padding |
| --space-6 | 24px | Card padding / section item gap |
| --space-8 | 32px | Section sub-spacing |
| --space-12 | 48px | Medium section gap |
| --space-16 | 64px | Large section gap |
| --space-20 | 80px | Section padding vertical |
| --space-24 | 96px | Hero / page section padding |
| --space-32 | 128px | Maximum section separation |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| --font-family-base | 'Inter', system-ui, sans-serif | All body and UI text |
| --font-size-xs | 12px | Caption, label tags |
| --font-size-sm | 13px | Small secondary text |
| --font-size-base | 15px | Body default |
| --font-size-md | 16px | Standard readable size |
| --font-size-lg | 18px | Sub-headings |
| --font-size-xl | 20px | Card titles |
| --font-size-2xl | 24px | H4/feature title |
| --font-size-3xl | 32px | H3 section heading |
| --font-size-4xl | 40px | H2 |
| --font-size-5xl | 56px | H1 |
| --font-size-hero | 72px | Large hero headline |
| --font-weight-regular | 400 | Body |
| --font-weight-medium | 500 | Labels, nav items |
| --font-weight-semibold | 600 | Subheadings |
| --font-weight-bold | 700 | Headings |
| --letter-spacing-caps | 0.08em | ALL-CAPS section labels |
| --line-height-base | 1.5 | Body text |
| --line-height-tight | 1.2 | Display headings |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 4px | Badges, tags, chips |
| --radius-md | 6px | Buttons |
| --radius-lg | 8px | Cards, inputs |
| --radius-xl | 12px | Large panels |
| --radius-2xl | 16px | Modal dialogs |
| --radius-full | 9999px | Pill buttons / avatars |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 2px rgba(31,34,35,0.06) | Subtle lift |
| --shadow-md | 0 2px 8px rgba(31,34,35,0.08), 0 1px 2px rgba(31,34,35,0.04) | Card default |
| --shadow-lg | 0 8px 24px rgba(31,34,35,0.10), 0 2px 6px rgba(31,34,35,0.04) | Dropdown / modal |
| --shadow-xl | 0 16px 48px rgba(31,34,35,0.12) | Elevated panel |
Note: Shadows use the brand primary color (rgb(31,34,35)) as shadow tint for visual cohesion.
Forest Admin — Design Notes
Framework \- Site builder: Framer (confirmed via meta-generator: Framer 448a859) \- Design agency: Alasta (design) + Reiya Studio (Framer build) — credited in footer \- Product app: Separate React application at app.forestadmin.com \- New brand: forestadmin.com is transitioning to forest.app (features page already redirects to forest.app)
Theme Support \- Marketing site: Light mode only — no prefers-color-scheme switching detected, no toggle UI \- App UI: Likely supports dark mode independently (standard for B2B admin tools), but not confirmed from marketing site alone \- Dark mode tokens provided in CSS block are inferred/extrapolated, not directly observed
Data Source Confidence \- High confidence: Color values rgb(31, 34, 35) and rgb(92, 92, 73) extracted directly from SVG fill attributes embedded in HTML \- High confidence: Framer framework, site structure, layout patterns, pricing ($60/user/month Scale; custom Control plan) \- Medium confidence: Font family (Inter inferred — Framer's default; no tag to Google Fonts or similar was captured in the text render) \- Medium confidence: Exact spacing values (8px base unit is standard for Framer/Tailwind sites; not explicitly measured) \- Inferred: Border radius, shadow values (typical for the aesthetic observed; not directly extracted from CSS)
Notable Patterns \- ALL-CAPS section labels: Short uppercase tags (e.g. "WHERE YOUR OPS LIVE", "OPS MATURITY") used consistently as section pre-titles — requires letter-spacing: 0.08em \- Earthy neutral palette: Brand deliberately avoids bright primary colors; olive + near-black palette signals institutional trust and compliance-grade positioning \- Two-tone CTA pattern: Primary button (dark fill) + secondary ghost button always paired in hero and section CTAs \- Stat callouts: Bold large numbers ("3x", "-50%", "100%") used as visual proof points in a consistent pattern \- Card-heavy layout: Feature areas use bordered/shadowed cards with tight internal structure \- Logo mark: Custom geometric grid icon rendered as inline SVG with primary dark fill \- Typography hierarchy: Section labels in CAPS → H2 in mixed case → body in regular weight; consistent three-level hierarchy across all sections \- Pricing structure: 2 tiers only (Scale at $60/user/mo; Control at custom pricing, 50-user minimum)
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.