Saro design system

---
version: alpha
name: Saro
description: "Light monochrome interface measured from sarofinance.framer.website: Switzer type, tonal surfaces and 100px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#141414"
  on-background: "#141414"
  on-surface-variant: "#707070"
  surface-container-low: "#F0F0F0"
  overlay: "#FFFFFFD6"
  outline: "#EBEBEB"
  primary: "#141414"
  on-primary: "#FFFFFF"
  secondary: "#0066FF"
typography:
  headline-display:
    fontFamily: Switzer
    fontSize: 88px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Switzer
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Switzer
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.035em
  headline-sm:
    fontFamily: Switzer
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.03em
  title-lg:
    fontFamily: Switzer
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.02em
  body-md:
    fontFamily: Switzer
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.005em
  body-sm:
    fontFamily: Switzer
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
  label-lg:
    fontFamily: Switzer
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.01em
  label-md:
    fontFamily: Switzer
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.03em
  label-sm:
    fontFamily: Switzer
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.01em
  code:
    fontFamily: Geist Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-display-mobile:
    fontFamily: Switzer
    fontSize: 42px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.04em
  title-lg-mobile:
    fontFamily: Switzer
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.02em
rounded:
  sm: 28px
  md: 100px
spacing:
  xs: 4px
  sm: 8px
  md: 14px
  lg: 32px
  xl: 64px
  gutter: 14px
  section: 128px
  margin: 32px
  container: 1136px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 10px 16px
    height: 39px
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 14px 22px
    height: 47px
  button-outline-hover:
    backgroundColor: "#E8E8E8"
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.primary}"
---

# Saro Design System

## Overview

Saro describes itself as: “Saro is a fintech Framer template for finance SaaS, banking and payments startups. 17 responsive pages, CMS blog and case studies, working pricing toggle.” The interface is light, built on **White (#FFFFFF)** with **Charcoal (#141414)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Switzer**, with **Geist Mono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 100px.

Measured from [sarofinance.framer.website](https://sarofinance.framer.website/) on November 6, 2026 at 1440×900 and 390×844 from 279 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **White (#FFFFFF):** Page background, seen 16 times. Token `background`.
- **Charcoal (#141414):** Primary text and headings, seen 80 times. Token `on-surface`.
- **Slate (#707070):** Secondary text, seen 21 times. Token `on-surface-variant`.
- **Mist (#F0F0F0):** Raised areas one step from the page, seen 2 times. Token `surface-container-low`.
- **White 84% (#FFFFFFD6):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Mist (#EBEBEB):** Borders and dividers, seen 1 time. Token `outline`.
- **Charcoal (#141414):** Primary buttons and calls to action, seen 84 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Blue (#0066FF):** Accent in text, fills and borders, seen 2 times. Token `secondary`.

## Typography

**Switzer** and **Geist Mono** (monospace) share the interface. Fallback stack: `Switzer, Switzer Placeholder, sans-serif`. Other loaded fonts: Inter Display.

- **headline-display:** Switzer 88px at weight 600, line height 1, tracking -0.04em (42px on mobile). Page title (h1).
- **headline-lg:** Switzer 56px at weight 500, line height 1.1, tracking -0.035em. Section headings (h2).
- **headline-md:** Switzer 40px at weight 600, line height 1.1, tracking -0.035em. Sub-section headings.
- **headline-sm:** Switzer 28px at weight 500, line height 1.15, tracking -0.03em. Card and feature titles.
- **title-lg:** Switzer 20px at weight 500, line height 1.25, tracking -0.02em (18px on mobile). Small titles.
- **body-md:** Switzer 16px at weight 400, line height 1.5, tracking -0.005em. Body text.
- **body-sm:** Switzer 14px at weight 400, line height 1.45. Secondary and small text.
- **label-lg:** Switzer 16px at weight 500, line height 1.3, tracking -0.01em. Large buttons and tabs.
- **label-md:** Switzer 15px at weight 600, line height 1, tracking -0.03em. Buttons, navigation and labels.
- **label-sm:** Switzer 14px at weight 500, line height 1.3, tracking -0.01em. Small labels and badges.
- **code:** Geist Mono 12px at weight 500, line height 1.3, tracking 0.04em. Code and technical values.

## Layout

Spacing is mostly on a 4px grid (73% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 14px, lg 32px, xl 64px.
- **Sections:** 128px vertical padding between major sections.
- **Gaps:** 14px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1136px.
- **Page margin:** 32px on each side of full-width sections.
- **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1199.98px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(20, 20, 20, 0.28) 0px 16px 40px -20px, rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset`

## Shapes

Most elements use 100px corners. Measured radii, most used first:

- **md (100px):** 24 elements.
- **sm (28px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Get started Get started”):** #141414 fill, #FFFFFF text, 12px/400, 100px radius, padding 10px 16px.
- **button-outline (“Book a demo Book a demo”):** #F0F0F0 fill, #141414 text, 12px/400, 100px radius, padding 14px 22px.
- **button-outline-hover:** background #E8E8E8, text #141414 on hover.
- **input-field (“you@company.com”):** transparent fill, #141414 text, 14px/400, padding 0px.
- **link:** transparent fill, #141414 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #F0F0F0.
- Do keep text in 2 levels: #141414, #707070.
- Do let contrast carry emphasis; primary actions use #141414 on #FFFFFF.
- Do set headlines in Switzer with tight tracking (-0.04em).
- Do reuse the measured spacing steps (8px, 14px, 32px).
- Do use 100px corners on most elements; larger surfaces also use 28px.
- Don't introduce new font families beyond Switzer and Geist Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.

Generated by [Sitepeel](https://sitepeel.dev/design-md/sarofinance.framer.website/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).