Figma file available
.webp)
Forest Admin
Turn your database into an AI-native Backoffice
No items found.
No items found.
Visual identity
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)