---
name: "Sapient"
mode: "light"
---
# Sapient
## Visual theme and atmosphere
Clean, clinical, and research-driven. The page feels like a brightly lit research report: pure white canvas, dark green display type, crisp sans-serif body copy, and a saturated green used for CTAs and neural signal bars. Generous whitespace and a single dark readout section create rhythm without noise.
A white-lab neuro-marketing page: dark-green editorial headlines, a single green accent, and a dramatic dark neural-readout panel.
## Color palette and roles
- **White (#fff)**: Page canvas, light section backgrounds.
- **Black (#000)**: Body text, icons, high-contrast type.
- **Sapient Dark (#121212)**: Deep section backgrounds, footer.
- **Green Dark (#233137)**: H1 and display headline color; neural panel fill.
- **Sapient Green (#0c6826)**: Primary CTA, accent bars, success signals.
- **Mint Wash (#d1ebf2)**: Soft metric highlights, subtle tints.
- **Sage Secondary (#9aaeb5)**: Secondary surface, stat-card fills.
- **Sage Hover (#aec2c9)**: Hover state for secondary surfaces.
- **Pale Sage (#f2f5f5)**: Alternate light section background.
- **Subtle Gray (#fafafa)**: Subtle card and section background.
- **Gray Light (#7d828e)**: Muted meta text and secondary labels.
- **Gray Medium (#758084)**: Neutral mid-tones and secondary copy.
- **Gray Dark (#333e47)**: Darker secondary text and structural type.
- **Text Secondary (#515255)**: Body paragraphs and descriptions.
- **Border Base (#e8e8e8)**: Hairline rules and card borders.
- **Border Muted (#f2f2f2)**: Very light separators.
- **Signal Red (#bb3030)**: Alert and negative markers, used sparingly.
- **Signal Orange (#eb850a)**: Warm accent and warning markers.
## Typography rules
- **Display**: PP Neue Montreal, 500, 90px. Hero and section display headlines.
- **Body**: Inter, 400, 17px. Body paragraphs, descriptions, and nav.
- **Label**: PP Neue Montreal, 500, 12px. Eyebrow labels and small caps metadata.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Use #fff as the default page canvas and #233137 for H1/display headlines.
- Reserve #0c6826 for the primary CTA and neural signal bars; do not use it for large text fills.
- Set body text in Inter 17px weight 400 with #515255 on light surfaces.
- Use 8px as the base spacing unit; section padding is 96px on desktop, 64px on phone.
- Use 16px radius for cards and 8px for buttons; pills are fully rounded.
- The dark neural-readout panel uses #233137 with #d1ebf2 and #0c6826 for data signals.
- Oversized footer word is set in Denton Condensed at 18–22vw, color #233137 or #d1ebf2.
- Respect prefers-reduced-motion: disable scroll reveals and only keep hover transitions.
---
name: "Sapient"
mode: "light"
---
# Sapient
## Visual theme and atmosphere
Clean, clinical, and research-driven. The page feels like a brightly lit research report: pure white canvas, dark green display type, crisp sans-serif body copy, and a saturated green used for CTAs and neural signal bars. Generous whitespace and a single dark readout section create rhythm without noise.
A white-lab neuro-marketing page: dark-green editorial headlines, a single green accent, and a dramatic dark neural-readout panel.
## Color palette and roles
- **White (#fff)**: Page canvas, light section backgrounds.
- **Black (#000)**: Body text, icons, high-contrast type.
- **Sapient Dark (#121212)**: Deep section backgrounds, footer.
- **Green Dark (#233137)**: H1 and display headline color; neural panel fill.
- **Sapient Green (#0c6826)**: Primary CTA, accent bars, success signals.
- **Mint Wash (#d1ebf2)**: Soft metric highlights, subtle tints.
- **Sage Secondary (#9aaeb5)**: Secondary surface, stat-card fills.
- **Sage Hover (#aec2c9)**: Hover state for secondary surfaces.
- **Pale Sage (#f2f5f5)**: Alternate light section background.
- **Subtle Gray (#fafafa)**: Subtle card and section background.
- **Gray Light (#7d828e)**: Muted meta text and secondary labels.
- **Gray Medium (#758084)**: Neutral mid-tones and secondary copy.
- **Gray Dark (#333e47)**: Darker secondary text and structural type.
- **Text Secondary (#515255)**: Body paragraphs and descriptions.
- **Border Base (#e8e8e8)**: Hairline rules and card borders.
- **Border Muted (#f2f2f2)**: Very light separators.
- **Signal Red (#bb3030)**: Alert and negative markers, used sparingly.
- **Signal Orange (#eb850a)**: Warm accent and warning markers.
## Typography rules
- **Display**: PP Neue Montreal, 500, 90px. Hero and section display headlines.
- **Body**: Inter, 400, 17px. Body paragraphs, descriptions, and nav.
- **Label**: PP Neue Montreal, 500, 12px. Eyebrow labels and small caps metadata.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Use #fff as the default page canvas and #233137 for H1/display headlines.
- Reserve #0c6826 for the primary CTA and neural signal bars; do not use it for large text fills.
- Set body text in Inter 17px weight 400 with #515255 on light surfaces.
- Use 8px as the base spacing unit; section padding is 96px on desktop, 64px on phone.
- Use 16px radius for cards and 8px for buttons; pills are fully rounded.
- The dark neural-readout panel uses #233137 with #d1ebf2 and #0c6826 for data signals.
- Oversized footer word is set in Denton Condensed at 18–22vw, color #233137 or #d1ebf2.
- Respect prefers-reduced-motion: disable scroll reveals and only keep hover transitions.
---
name: "Sapient"
mode: "light"
---
# Sapient
## Visual theme and atmosphere
Clean, clinical, and research-driven. The page feels like a brightly lit research report: pure white canvas, dark green display type, crisp sans-serif body copy, and a saturated green used for CTAs and neural signal bars. Generous whitespace and a single dark readout section create rhythm without noise.
A white-lab neuro-marketing page: dark-green editorial headlines, a single green accent, and a dramatic dark neural-readout panel.
## Color palette and roles
- **White (#fff)**: Page canvas, light section backgrounds.
- **Black (#000)**: Body text, icons, high-contrast type.
- **Sapient Dark (#121212)**: Deep section backgrounds, footer.
- **Green Dark (#233137)**: H1 and display headline color; neural panel fill.
- **Sapient Green (#0c6826)**: Primary CTA, accent bars, success signals.
- **Mint Wash (#d1ebf2)**: Soft metric highlights, subtle tints.
- **Sage Secondary (#9aaeb5)**: Secondary surface, stat-card fills.
- **Sage Hover (#aec2c9)**: Hover state for secondary surfaces.
- **Pale Sage (#f2f5f5)**: Alternate light section background.
- **Subtle Gray (#fafafa)**: Subtle card and section background.
- **Gray Light (#7d828e)**: Muted meta text and secondary labels.
- **Gray Medium (#758084)**: Neutral mid-tones and secondary copy.
- **Gray Dark (#333e47)**: Darker secondary text and structural type.
- **Text Secondary (#515255)**: Body paragraphs and descriptions.
- **Border Base (#e8e8e8)**: Hairline rules and card borders.
- **Border Muted (#f2f2f2)**: Very light separators.
- **Signal Red (#bb3030)**: Alert and negative markers, used sparingly.
- **Signal Orange (#eb850a)**: Warm accent and warning markers.
## Typography rules
- **Display**: PP Neue Montreal, 500, 90px. Hero and section display headlines.
- **Body**: Inter, 400, 17px. Body paragraphs, descriptions, and nav.
- **Label**: PP Neue Montreal, 500, 12px. Eyebrow labels and small caps metadata.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Use #fff as the default page canvas and #233137 for H1/display headlines.
- Reserve #0c6826 for the primary CTA and neural signal bars; do not use it for large text fills.
- Set body text in Inter 17px weight 400 with #515255 on light surfaces.
- Use 8px as the base spacing unit; section padding is 96px on desktop, 64px on phone.
- Use 16px radius for cards and 8px for buttons; pills are fully rounded.
- The dark neural-readout panel uses #233137 with #d1ebf2 and #0c6826 for data signals.
- Oversized footer word is set in Denton Condensed at 18–22vw, color #233137 or #d1ebf2.
- Respect prefers-reduced-motion: disable scroll reveals and only keep hover transitions.
---
name: "Sapient"
mode: "light"
---
# Sapient
## Visual theme and atmosphere
Clean, clinical, and research-driven. The page feels like a brightly lit research report: pure white canvas, dark green display type, crisp sans-serif body copy, and a saturated green used for CTAs and neural signal bars. Generous whitespace and a single dark readout section create rhythm without noise.
A white-lab neuro-marketing page: dark-green editorial headlines, a single green accent, and a dramatic dark neural-readout panel.
## Color palette and roles
- **White (#fff)**: Page canvas, light section backgrounds.
- **Black (#000)**: Body text, icons, high-contrast type.
- **Sapient Dark (#121212)**: Deep section backgrounds, footer.
- **Green Dark (#233137)**: H1 and display headline color; neural panel fill.
- **Sapient Green (#0c6826)**: Primary CTA, accent bars, success signals.
- **Mint Wash (#d1ebf2)**: Soft metric highlights, subtle tints.
- **Sage Secondary (#9aaeb5)**: Secondary surface, stat-card fills.
- **Sage Hover (#aec2c9)**: Hover state for secondary surfaces.
- **Pale Sage (#f2f5f5)**: Alternate light section background.
- **Subtle Gray (#fafafa)**: Subtle card and section background.
- **Gray Light (#7d828e)**: Muted meta text and secondary labels.
- **Gray Medium (#758084)**: Neutral mid-tones and secondary copy.
- **Gray Dark (#333e47)**: Darker secondary text and structural type.
- **Text Secondary (#515255)**: Body paragraphs and descriptions.
- **Border Base (#e8e8e8)**: Hairline rules and card borders.
- **Border Muted (#f2f2f2)**: Very light separators.
- **Signal Red (#bb3030)**: Alert and negative markers, used sparingly.
- **Signal Orange (#eb850a)**: Warm accent and warning markers.
## Typography rules
- **Display**: PP Neue Montreal, 500, 90px. Hero and section display headlines.
- **Body**: Inter, 400, 17px. Body paragraphs, descriptions, and nav.
- **Label**: PP Neue Montreal, 500, 12px. Eyebrow labels and small caps metadata.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Use #fff as the default page canvas and #233137 for H1/display headlines.
- Reserve #0c6826 for the primary CTA and neural signal bars; do not use it for large text fills.
- Set body text in Inter 17px weight 400 with #515255 on light surfaces.
- Use 8px as the base spacing unit; section padding is 96px on desktop, 64px on phone.
- Use 16px radius for cards and 8px for buttons; pills are fully rounded.
- The dark neural-readout panel uses #233137 with #d1ebf2 and #0c6826 for data signals.
- Oversized footer word is set in Denton Condensed at 18–22vw, color #233137 or #d1ebf2.
- Respect prefers-reduced-motion: disable scroll reveals and only keep hover transitions.
---
name: "Sapient"
mode: "light"
---
# Sapient
## Visual theme and atmosphere
Clean, clinical, and research-driven. The page feels like a brightly lit research report: pure white canvas, dark green display type, crisp sans-serif body copy, and a saturated green used for CTAs and neural signal bars. Generous whitespace and a single dark readout section create rhythm without noise.
A white-lab neuro-marketing page: dark-green editorial headlines, a single green accent, and a dramatic dark neural-readout panel.
## Color palette and roles
- **White (#fff)**: Page canvas, light section backgrounds.
- **Black (#000)**: Body text, icons, high-contrast type.
- **Sapient Dark (#121212)**: Deep section backgrounds, footer.
- **Green Dark (#233137)**: H1 and display headline color; neural panel fill.
- **Sapient Green (#0c6826)**: Primary CTA, accent bars, success signals.
- **Mint Wash (#d1ebf2)**: Soft metric highlights, subtle tints.
- **Sage Secondary (#9aaeb5)**: Secondary surface, stat-card fills.
- **Sage Hover (#aec2c9)**: Hover state for secondary surfaces.
- **Pale Sage (#f2f5f5)**: Alternate light section background.
- **Subtle Gray (#fafafa)**: Subtle card and section background.
- **Gray Light (#7d828e)**: Muted meta text and secondary labels.
- **Gray Medium (#758084)**: Neutral mid-tones and secondary copy.
- **Gray Dark (#333e47)**: Darker secondary text and structural type.
- **Text Secondary (#515255)**: Body paragraphs and descriptions.
- **Border Base (#e8e8e8)**: Hairline rules and card borders.
- **Border Muted (#f2f2f2)**: Very light separators.
- **Signal Red (#bb3030)**: Alert and negative markers, used sparingly.
- **Signal Orange (#eb850a)**: Warm accent and warning markers.
## Typography rules
- **Display**: PP Neue Montreal, 500, 90px. Hero and section display headlines.
- **Body**: Inter, 400, 17px. Body paragraphs, descriptions, and nav.
- **Label**: PP Neue Montreal, 500, 12px. Eyebrow labels and small caps metadata.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Use #fff as the default page canvas and #233137 for H1/display headlines.
- Reserve #0c6826 for the primary CTA and neural signal bars; do not use it for large text fills.
- Set body text in Inter 17px weight 400 with #515255 on light surfaces.
- Use 8px as the base spacing unit; section padding is 96px on desktop, 64px on phone.
- Use 16px radius for cards and 8px for buttons; pills are fully rounded.
- The dark neural-readout panel uses #233137 with #d1ebf2 and #0c6826 for data signals.
- Oversized footer word is set in Denton Condensed at 18–22vw, color #233137 or #d1ebf2.
- Respect prefers-reduced-motion: disable scroll reveals and only keep hover transitions.
