---
version: alpha
name: SavvyCal landing-page reference
description: A distinctive scheduling page with enormous condensed serif lime headlines
  on deep green, a swirling background motif, cream/pink/charcoal product chapters
  and framed calendar screenshots.
colors:
  primary: '#B9FF78'
  surface: '#FAF7ED'
  on-surface: '#19191C'
  secondary: '#FFE3E3'
  accent: '#F54320'
typography:
  headline-sample:
    fontFamily: GT-Alpina-Condensed
    fontSize: 136px
    fontWeight: 700
    lineHeight: 136px
  secondary-sample:
    fontFamily: GT-America-Condensed
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0.9px
  mobile-heading-sample:
    fontFamily: GT-Alpina-Condensed
    fontSize: 64px
    fontWeight: 700
    lineHeight: 64px
  paragraph-sample:
    fontFamily: GT-America-Standard
    fontSize: 24px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.208px
---

# SavvyCal landing-page reference

## Overview

Observed at https://savvycal.com/ on 2026-09-19 at 1440px desktop and 390px mobile widths. A distinctive scheduling page with enormous condensed serif lime headlines on deep green, a swirling background motif, cream/pink/charcoal product chapters and framed calendar screenshots. This is an independent visual reference, not an official brand specification.

## Colors

The lime, pink and orange values are measured RGB conversions. Cream and near-black tokens are visual approximations. The deep-green hero was measured as oklch(0.393 0.095 152.535); retain that CSS value when reproducing it.

## Typography

The first measured headline sample uses GT-Alpina-Condensed at 136px, weight 700, line height 136px and tracking normal. The YAML records this sample, a secondary heading, a mobile heading and a substantial paragraph where available. These are observed elements, not an invented universal scale. Font-family declarations are measured; exact glyph rendering depends on font availability and licensed assets.

## Layout

Fill the opening region with a green swirling motif, a huge centered two-line serif headline, a short supporting paragraph and lime action. Switch to cream for the scheduling experience, pale pink for focus time and near-black for collaboration. Each chapter pairs a centered headline with a framed wide calendar image, three explanatory columns and a portrait testimonial. Finish with a seal-like illustration, orange upgrade action and illustrated footer.

Keep the white wordmark and a right menu icon on green. The headline becomes 64px/64px within a 342px block with 24px gutters. Supporting copy reduces to 18px/27px, and the single lime action remains centered. The cream chapter begins just below the opening screen. No horizontal document overflow was detected at either inspected width. Intermediate breakpoints and full mobile scroll behavior were not visually reviewed. Section spacing and component arrangements are visual observations rather than an exhaustive measured spacing scale.

## Elevation & Depth

Use thin double/framed borders and desktop-window imagery to create depth, rather than large shadows across the page. The green background motif is tonal artwork, not a foreground panel. Exact shadow values were not measured.

## Shapes

Combine slightly rounded action rectangles, framed screenshot panels, circular seals and hand-drawn squiggle accents. The serif headline provides most of the character. Radius descriptions are visual estimates.

## Components

Keep the high-contrast lime-on-green hero and the alternating chapter colors. Do not shrink the serif headline into ordinary SaaS body type or use the orange closing-action color for every primary button. The desktop overview supplies the section ordering; the mobile evidence supplies only the inspected opening composition. Video previews and animation frames are static captured states, not a specification for playback.

## Do's and Don'ts

- Do preserve the reference-specific hierarchy, imagery and responsive ordering described above.
- Do maintain legibility when adapting the palette or replacing fonts.
- Don't infer hover, focus, open-menu or form-validation states: those interactions were not exercised.
- Don't treat a single capture as a complete animation or carousel specification.