Bsky
Conversational FAQ
Warm forest depths – soft, rounded sans serif on deep emerald, embracing spacious clarity.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | GT-Alpina-Condensed | 136px | 700 | 1 | 0 | Aa Bb Cc |
| h2 | GT-America-Condensed | 18px | 400 | 1.56 | 0.9px | Aa Bb Cc |
| h3 | GT-America-Standard | 18px | 700 | 1.56 | 0 | Aa Bb Cc |
| body | InterVariable | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | GT-America-Extended | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | InterVariable | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
:root {
--color-dominant: #6db454;
--color-surface: #0c542c;
--color-ink: #bcfc7b;
--color-accent: #619b68;
--color-detail: #b2d5be;
}
/* CSS variables exposed by source */
:root {
--color-purple-200: oklch(90.2% .063 306.703);
--color-fuchsia-700: oklch(51.8% .253 323.949);
--color-zinc-100: oklch(96.7% .001 286.375);
--color-zinc-200: oklch(92% .004 286.32);
--color-rose-200: oklch(89.2% .058 10.001);
--color-sky-500: oklch(68.5% .169 237.323);
--color-pink-500: oklch(65.6% .241 354.308);
--color-orange-600: oklch(64.6% .222 41.116);
--color-violet-600: oklch(54.1% .281 293.009);
--color-red-900: oklch(39.6% .141 25.723);
--color-orange-800: oklch(47% .157 37.304);
--color-blue-700: oklch(48.8% .243 264.376);
--color-orange-900: oklch(40.8% .123 38.172);
--text-base--line-height: calc(1.5 / 1);
--radius-4xl: 2rem;
--color-blue-300: oklch(80.9% .105 251.813);
--color-cyan-700: oklch(52% .105 223.128);
--color-yellow-400: oklch(85.2% .199 91.936);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-zinc-50: oklch(98.5% 0 0);
--color-green-500: oklch(72.3% .219 149.579);
--color-white: #fff;
--color-sky-600: oklch(58.8% .158 241.966);
--color-blue-400: oklch(70.7% .165 254.624);
--radius-sm: .25rem;
--color-brand-pink: #ffe3e3;
--color-yellow-300: oklch(90.5% .182 98.111);
--font-weight-bold: 700;
--color-zinc-950: oklch(14.1% .005 285.823);
--color-purple-600: oklch(55.8% .288 302.321);
--color-teal-900: oklch(38.6% .063 188.416);
--text-xs--line-height: calc(1 / .75);
--color-zinc-700: oklch(37% .013 285.805);
--color-violet-500: oklch(60.6% .25 292.717);
--color-fuchsia-600: oklch(59.1% .293 322.896);
--color-fuchsia-200: oklch(90.3% .076 319.62);
--color-green-900: oklch(39.3% .095 152.535);
--radius-2xl: 1rem;
--radius-md: .375rem;
--color-blue-800: oklch(42.4% .199 265.638);
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-blue-100: oklch(93.2% .032 255.585);
--color-green-600: oklch(62.7% .194 149.214);
--color-yellow-950: oklch(28.6% .066 53.813);
--color-violet-300: oklch(81.1% .111 293.571);
--color-zinc-900: oklch(21% .006 285.885);
--color-red-300: oklch(80.8% .114 19.571);
--color-sky-300: oklch(82.8% .111 230.318);
--color-cyan-500: oklch(71.5% .143 215.221);
--color-orange-500: oklch(70.5% .213 47.604);
--color-emerald-900: oklch(37.8% .077 168.94);
--text-2xl--line-height: calc(2 / 1.5);
--spacing: .25rem;
--color-pink-600: oklch(59.2% .249 .584);
--color-pink-200: oklch(89.9% .061 343.231);
--color-rose-900: oklch(41% .159 10.272);
--text-xl--line-height: calc(1.75 / 1.25);
--text-sm: .875rem;
--font-sans--font-feature-settings: "cv11";
}Drop-in prompt
Build a landing page in the visual style of Savvycal.
Reference design system (extracted from the live site):
- Palette: #6db454, #0c542c, #bcfc7b, #619b68, #b2d5be
- Typefaces: GT-Alpina-Condensed, GT-America-Condensed, InterVariable
- Macrostructure: Conversational FAQ
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/savvycal-com