Buttondown Email
Marquee Hero
Bold geometric black on stark white, pops of acid lime, airy




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 | Shopify-Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| h2 | Shopify-Inter | 80px | 700 | 1.1 | -2.4px | Aa Bb Cc |
| h3 | Shopify-Inter | 18px | 450 | 1.56 | 0 | Aa Bb Cc |
| body | Shopify-Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Shopify-Inter | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Shopify-Inter | 15px | 600 | 0.95 | -0.6px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #bdc92d;
--color-surface: #ec5a57;
--color-ink: #441410;
--color-accent: #827a69;
--color-detail: #c1b8aa;
}
/* CSS variables exposed by source */
:root {
--text-t8--font-weight: 450;
--color-theme-content-input-label-disabled: #a1a1aa;
--color-component-comparison-table-row-heading-bg: #d4d4d8;
--font-component-testimonial-brand: Shopify-Inter,Helvetica,Arial,sans-serif;
--text-eyebrow-sm--font-weight: 550;
--color-orange-600: #9d6600;
--color-orange-800: #513300;
--color-component-card-base-top-divider-border: #000;
--color-component-button-primary-content-disabled: #71717a;
--color-shade-0: #fff;
--text-component-link-sm: 1rem;
--radius-theme-xl: .75rem;
--color-shade-900: #18181b;
--color-component-testimonial-brand-content: #000;
--color-component-hero-full-bleed-gradient-start: #000;
--color-purple-800: #4d0f9f;
--color-component-message-content: #0009;
--text-dsp: 9.375rem;
--spacing-hero-top: calc(4.5rem);
--color-component-input-selected-bg-hover: #3f3f46;
--color-lime: #cce600;
--color-component-section-content: #000;
--text-base--line-height: 1.5rem;
--color-theme-icon-inverse: #fff;
--color-component-grid-bg: transparent;
--color-purple-850: #3a097a;
--text-component-comparison-table-cell--letter-spacing: 0;
--color-tint-black: #141a1a;
--color-gray-300: oklch(87.2% .01 258.338);
--color-black-alpha-200: #0003;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--text-component-testimonial-author--letter-spacing: 0;
--color-component-button-interface-secondary-bg: transparent;
--color-component-button-secondary-bg: transparent;
--color-black-alpha-300: #0000004d;
--color-gray-500: oklch(55.1% .027 264.364);
--text-t1--letter-spacing: -.03em;
--color-component-input-border: #0003;
--color-component-message-icon-content-warning: #ee9d00;
--text-component-badge-base: .875rem;
--color-green-500: #138532;
--text-component-button-secondary-sm: 1rem;
--color-component-hero-full-bleed-gradient-end: #fff;
--text-component-testimonial-brand--line-height: 1.625rem;
--color-component-button-secondary-border-hover: #2d2d2d;
--color-component-comparison-table-cell-bg-hover: #e4e4e7;
--color-white: #fff;
--color-theme-border-input-selected-hover: #3f3f46;
--color-shade-600: #52525b;
--color-component-comparison-table-cell-subtext-content: #000;
--font-component-button-secondary: Shopify-Inter,Helvetica,Arial,sans-serif;
--color-black-alpha-900: #000000e6;
--color-black-alpha-1000: #000;
--color-gray-100: oklch(96.7% .003 264.542);
--text-component-heading-group-cta-disclaimer--font-weight: 400;
--color-theme-bg-input: #fff;
--color-theme-bg-table-cell-hover: #e4e4e7;
--color-purple-600: #8645f6;
--color-shade-70: #3f3f46;
--text-t7--line-height: 1.625rem;
}Drop-in prompt
Build a landing page in the visual style of Tinker.
Reference design system (extracted from the live site):
- Palette: #bdc92d, #ec5a57, #441410, #827a69, #c1b8aa
- Typefaces: Shopify-Inter
- Macrostructure: Marquee Hero
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/tinker-com