Savvycal

# Savvycal — Style Reference
> Organic Green Engine. A lush, vibrant green landscape where every element functions with precision.
Theme: light

SavvyCal feels like a playful, yet precise, garden of productivity. The dominant use of organic greens and a vibrant lime accent creates an energetic atmosphere, grounded by a warm, almost parchment-like off-white background. The interplay between the structured, almost architectural feel of GT-America typefaces and the more expressive, flowing display type of GT-Alpina gives the system its distinctive voice: serious about function, but delivered with a light, engaging touch. Small, unexpected flourishes like the 'new' badge and the subtle orange accent line add personality without sacrificing clarity.

## Colors
| Name | Value | Role |
|------|-------|------|
| SavvyGreen | `#0d542b` | Primary brand color, background for hero sections and key promotional blocks. Deep and grounded, providing a rich base for brighter accents. |
| LimeAccent | `#b9ff78` | Primary interactive accent for buttons and links. This vivid lime is the most active color, signaling interactivity and success. |
| BurntOrange | `#f54320` | Secondary accent for 'new' badges, decorative elements, and occasional highlights. Its warmth contrasts sharply with the greens, drawing immediate attention. |
| Parchment | `#fcf7ed` | Main page background, providing a soft, warm canvas for content. It's a key distinguishing factor, avoiding stark white. |
| Coal | `#1c1917` | Primary text color for most body copy and headings. Provides strong contrast against Parchment. |
| ForestGreen | `#008236` | Secondary brand green, used for internal iconography, borders, and some text elements. Visually similar to SavvyGreen but used for details. |
| SubtleGreenTint | `#dcfce7` | Subtle background tint for highlighting specific content blocks or sections. |
| Slate | `#44403b` | Secondary text color for less prominent body copy, descriptions, and metadata. |
| LightBorder | `#e5e7eb` | Subtle borders and dividers for UI elements. |
| CrimsonPattern | `#ffe3e3` | Background for decorative patterns and illustrations, providing a soft red counterpart to the BurntOrange. |

## Typography
| Family | Role |
|--------|------|
| GT-Alpina-Condensed | Display headlines; the 96px and 136px sizes grab attention with bold weight and condensed elegance, creating a distinct editorial feel. |
| GT-America-Condensed | Sub-display headings and emphasized phrases, leveraging the condensed form to create impact while conserving horizontal space. |
| GT-America-Standard | Workhorse text for structural elements like navigation, subheadings, and lead paragraphs. Its slightly condensed nature at these sizes gives a modern, efficient feel with a slight edge. |
| GT-America-Extended | Labels, captions, and buttons. This extended variant provides a contrast to the standard and condensed forms, offering visual variety at smaller sizes. |
| InterVariable | Used for standard body text and detailed paragraphs, ensuring high readability at functional sizes while complementing the GT-America family. |