Bluebottlecoffee
Specimen
Dusty rose ceramics and warm wood, set against a spacious, softly lit, neutral backdrop.




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 | Fellow Solar | 48px | 500 | 1.1 | 0 | Aa Bb Cc |
| h2 | Fellow Solar | 24px | 400 | 1.2 | 0 | Aa Bb Cc |
| h3 | Sohne | 18px | 400 | 1.2 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Sohne | 12px | 400 | 1.22 | 0 | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #82563c;
--color-surface: #5a3c29;
--color-ink: #d5b6a4;
--color-accent: #996f51;
--color-detail: #c4aca1;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--color-disabled-inverse: #717171;
--color-grey-200: #fef6eb;
--color-foreground-secondary-inverse: #f6ede0;
--color-grey-100: #f6ede0;
--color-grey-600: #2b2727;
--color-foreground-secondary: #767474;
--color-border-02: #e0e0dd;
--text-base--line-height: 1.5;
--color-text-secondary: #767474;
--color-gray-300: oklch(87.2% .01 258.338);
--color-border-01-inverse: #717171;
--color-border-01: #a7a5a5;
--color-gray-50: oklch(98.5% .002 247.839);
--font-family-primary: "Fellow Solar";
--color-orange: #ab4824;
--color-white: #fff;
--color-gray-400: oklch(70.7% .022 261.325);
--color-grey-500: #717171;
--color-disabled: #e0e0dd;
--color-accent-01-inverse: #ab4824;
--color-accent-03: #f5f5f5;
--font-weight-bold: 700;
--color-background: #ffffff;
--color-background-tertiary: #fef6eb;
--text-xs--line-height: calc(1/.75);
--font-family-secondary: "Sohne";
--color-green: #005e16;
--color-blue: #3b52e8;
--color-danger: #dc2525;
--color-accent-02: #9d523a;
--color-accent-02-inverse: #ab4824;
--color-background-secondary-inverse: #b3b2b1;
--color-link-inverse: #fff;
--text-2xl--line-height: calc(2/1.5);
--color-border-02-inverse: #717171;
--spacing: .25rem;
--color-focus: #4b3dc4;
--color-grey-300: #b3b2b1;
--color-yellow: #ffe7b6;
--font-weight-semibold: 600;
--text-sm: .875rem;
--color-gray-900: oklch(21% .034 264.665);
--color-foreground-inverse: #fff;
--color-gray-600: oklch(44.6% .03 256.802);
--color-background-inverse: #2b2727;
--color-grey-400: #717171;
--color-light-blue: #d2eefc;
--text-sm--line-height: calc(1.25/.875);
--color-gray-200: oklch(92.8% .006 264.531);
--color-black: #000;
--text-xs: .75rem;
--font-weight-medium: 500;
--color-foreground: #1e1e1f;
--radius-xs: .125rem;
--color-accent-01: #88acc3;
--color-background-secondary: #f5f5f5;
--text-base: 1rem;
--color-link: #767474;
--button-primary-inverse-hover-color: #000;
}Drop-in prompt
Build a landing page in the visual style of Fellowproducts.
Reference design system (extracted from the live site):
- Palette: #82563c, #5a3c29, #d5b6a4, #996f51, #c4aca1
- Typefaces: Fellow Solar, ui-sans-serif, Arial
- Macrostructure: Specimen
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/fellowproducts-com--products-meaza