Overview
Platform: Framer | Date: 2026-03-08
Clean, nature-inspired SaaS design built around deep greens, golden yellows, and generous whitespace. The overall aesthetic is professional yet warm, using organic color brushworks and smooth, rounded shapes throughout.
Font note: Coachmark uses the proprietary Matter font family (by Displaay). This reference substitutes Inter (loaded from Google Fonts) as the closest publicly available match. Inter shares Matter's humanist proportions, tabular figures, and clean x-height.
Colors
Primary Green
Accent Yellow
Success Green
Teal
Orange
Neutrals
Typography
All specimens rendered with Inter as a substitute for Matter.
| Tag | h1 |
| Size | 60px |
| Line-height | 66px |
| Letter-spacing | -1.8px |
| Weight | 400 (Matter Medium) |
| Tag | h2 |
| Size | 52px |
| Line-height | 52px |
| Letter-spacing | -1.56px |
| Weight | 500 |
| Tag | h2-alt |
| Size | 36px |
| Line-height | 39.6px |
| Letter-spacing | -1.44px |
| Weight | 500 |
| Tag | h3 |
| Size | 28px |
| Line-height | 33.6px |
| Letter-spacing | -0.84px |
| Weight | 400 |
| Tag | h4 |
| Size | 24px |
| Line-height | 26.4px |
| Letter-spacing | -0.72px |
| Weight | 400 |
| Style | Body large |
| Size | 19px |
| Line-height | 24.7px |
| Letter-spacing | -0.38px |
| Weight | 400 |
| Style | Body default |
| Size | 15px |
| Line-height | 19.5px |
| Letter-spacing | -0.01em |
| Weight | 400 |
| Style | Body small |
| Size | 12px |
| Line-height | 15px |
| Weight | 400 |
| Style | Caption |
| Size | 12px |
| Transform | uppercase |
| Letter-spacing | 0.89px |
| Weight | 500 |
Spacing
Scale
Section Gaps
Borders & Shadows
Border Radius
Shadows
Cards
Text Card
A standard content card with white background, 24px border-radius, card shadow, and 40px padding.
Inputs
Input fields with search icon, rounded corners, and yellow focus ring.
bg: #fff, radius: 16px, padding: 12px 12px 12px 48px, font: 16px, placeholder: rgba(14,34,14,0.4), focus-border: 1px solid #f6d045
Layout
Container Widths
Breakpoints
Section Rhythm
88px vertical padding per section, 72px gaps between content blocks within sections.
Motion & Interaction
Hover Transitions
All interactive elements use transition: all 0.2s ease. Buttons brighten on hover; cards lift with enhanced shadow.
Opacity Scale
Interactive elements use transition: background, box-shadow 0.2s ease for state changes.
Tailwind Mapping
The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.
// tailwind.config.js
import designSystem from './design-system.json';
export default {
theme: {
extend: designSystem.tailwind.theme.extend,
},
};
// Also reuse designSystem.tailwind.componentRecipes for common surfaces.
| Scope | Primary | Body Font | Radius | Shadow | Breakpoint |
|---|---|---|---|---|---|
| Design System | — | — | 36px | — | {'max': '375px'} |
| Scope | Recipe | Class Pattern | Notes |
|---|---|---|---|
| Design System | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-pill bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| Design System | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| Design System | inputField | rounded-sm border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |