Forest Admin: the Fintech Ops Orchestration Layer for AI Teams
Feature Stack
Cool, spacious digital atelier – crisp sans serif on vast, echoing white.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | WF Visual Sans Variable | 80px | 600 | 1.04 | -0.8px | Aa Bb Cc |
| h2 | WF Visual Sans Variable | 24px | 500 | 1.3 | 0 | Aa Bb Cc |
| h3 | WF Visual Sans Variable | 20px | 600 | 1.4 | 0 | Aa Bb Cc |
| body | WF Visual Sans Variable | 16px | 400 | 1.6 | 0 | Aa Bb Cc |
| button | WF Visual Sans Variable | 24px | 400 | 1.6 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #146cf4;
--color-surface: #0c5cac;
--color-ink: #69a4fb;
--color-accent: #586c94;
--color-detail: #cba3c3;
}
/* CSS variables exposed by source */
:root {
--colors--background: white;
--colors--primary-accent-background: color-mix(in hsl,#146ef5/**/10%,transparent 90%);
--colors--secondary-background: #f0f0f0;
--colors--text: #080808;
--colors--primary-accent: #146ef5;
--colors--text-secondary: #5a5a5a;
--colors--border: #d8d8d8;
--colors--primary-accent-text: color-mix(in hsl,#146ef5/**/92%,#080808/**/8%);
--_layout---spacing--margin-xl: clamp(2.25*1rem,((2.25 - ((3 - 2.25)/(90 - 20)*20))*1rem + ((3 - 2.25)/(90 - 20))*100vw),3*1rem);
--_typography---h0--font-size: clamp(3*1rem,((3 - ((7 - 3)/(90 - 20)*20))*1rem + ((7 - 3)/(90 - 20))*100vw),7*1rem);
--_size---0-75rem<deleted|variable-51df6ead-a71c-263d-332f-348c569f6d5f>: .75rem;
--_layout---spacing--margin-xs: clamp(.375*1rem,((.375 - ((.5 - .375)/(90 - 20)*20))*1rem + ((.5 - .375)/(90 - 20))*100vw),.5*1rem);
--_typography---h5--font: "WF Visual Sans Variable",Arial,sans-serif;
--_components---button--line-height: 1.2em;
--_typography---type-paragraph-lg--font-size-md<deleted|variable-cdbe9950-9272-2284-ccf6-60cab96acd5f>: 1.25rem;
--_typography---caption--line-height: 1.2;
--_typography---fonts--primary-font: "WF Visual Sans Variable",Arial,sans-serif;
--_typography---subheading-xl--line-height: 1.3;
--_typography---caption--font-weight: 550;
--_typography---eyebrow--bottom-margin: clamp(.625*1rem,((.625 - ((1 - .625)/(90 - 20)*20))*1rem + ((1 - .625)/(90 - 20))*100vw),1*1rem);
--animation-delay-d4: 1.2s;
--_components---input-label--font-size: .9rem;
--_color---neutral--gray-600: #5a5a5a;
--animation-delay-d2: 0.45s;
--_typography---paragraph-sm--font-weight: 400;
--animation-delay-d0: 0s;
--animation-delay-d1: 0.3s;
--_components---input-label--font-weight: 500;
--_typography---subheading-lg--letter-spacing: 0em;
--_components---button--horizontal-padding: 1.5em;
--_typography---paragraph-xs--font: "WF Visual Sans Variable",Arial,sans-serif;
--_typography---paragraph-lg--bottom-margin: clamp(.625*1rem,((.625 - ((1 - .625)/(90 - 20)*20))*1rem + ((1 - .625)/(90 - 20))*100vw),1*1rem);
--_layout---section-spacing--medium: clamp(3*1rem,((3 - ((9 - 3)/(90 - 20)*20))*1rem + ((9 - 3)/(90 - 20))*100vw),9*1rem);
--_layout---grid--gap-main: clamp(1.75*1rem,((1.75 - ((2 - 1.75)/(90 - 20)*20))*1rem + ((2 - 1.75)/(90 - 20))*100vw),2*1rem);
--_layout---grid--gap-md: clamp(1.25*1rem,((1.25 - ((1.5 - 1.25)/(90 - 20)*20))*1rem + ((1.5 - 1.25)/(90 - 20))*100vw),1.5*1rem);
--_components---input--letter-spacing: 0em;
--_size---1rem<deleted|variable-461c7c57-ec3c-d23c-768b-c6de52a540e5>: 1rem;
--_typography---subheading-xxl--font: "WF Visual Sans Variable",Arial,sans-serif;
--_typography---h2--letter-spacing: 0em;
--_components---input--font: "WF Visual Sans Variable",Arial,sans-serif;
--transition-duration-7: 3150ms;
--_layout---fluid--max: 90;
--_typography---subheading-xxl--font-weight: 500;
--_components---input--font-size: 1rem;
--_typography---paragraph-body--bottom-margin: clamp(.625*1rem,((.625 - ((1 - .625)/(90 - 20)*20))*1rem + ((1 - .625)/(90 - 20))*100vw),1*1rem);
--_size---5rem<deleted|variable-ff14b77f-fe78-09a6-d1f0-e9e7c84aae7c>: 5rem;
--_layout---grid--gap-lg: clamp(2.25*1rem,((2.25 - ((3 - 2.25)/(90 - 20)*20))*1rem + ((3 - 2.25)/(90 - 20))*100vw),3*1rem);
--mkto-embed-checkbox-background: #ffffff;
--_typography---h5--line-height: 1.3;
--_typography---h5--font-weight: 600;
--_typography---subheading-xxl--bottom-margin: clamp(.625*1rem,((.625 - ((1 - .625)/(90 - 20)*20))*1rem + ((1 - .625)/(90 - 20))*100vw),1*1rem);
--_layout---fluid--min: 20;
--_typography---h1--font-size: clamp(2.75*1rem,((2.75 - ((5 - 2.75)/(90 - 20)*20))*1rem + ((5 - 2.75)/(90 - 20))*100vw),5*1rem);
--_typography---subheading-lg--font: "WF Visual Sans Variable",Arial,sans-serif;
--_typography---paragraph-xs--line-height: 1.6;
--_typography---h0--letter-spacing: 0em;
--_components---button--font-weight: 500;
--mkto-embed-color-button-hover: #0055d4;
--mkto-embed-checkbox-border: #d8d8d8;
--_color---secondary--purple: #7a3dff;
}Drop-in prompt
Build a landing page in the visual style of Webflow.
Reference design system (extracted from the live site):
- Palette: #146cf4, #0c5cac, #69a4fb, #586c94, #cba3c3
- Typefaces: WF Visual Sans Variable
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/webflow-com