Daniel Do
Specimen




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 |
|---|---|---|---|---|---|---|
| h2 | futura-pt | 12px | 700 | 2.5 | 4.8px | Aa Bb Cc |
| body | Times New Roman | 18px | 400 | 1.8 | 0 | Aa Bb Cc |
| caption | Times New Roman | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | futura-pt | 12px | 600 | 2 | 3px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f4f30c;
--color-surface: #6b4c15;
--color-ink: #cbb589;
--color-accent: #8e7a6c;
--color-detail: #d3cdbd;
}
/* CSS variables exposed by source */
:root {
--brand-yellow: #ff0;
--brand-pink: #ffcfd3;
--brand-green: #dbf4eb;
--cky-btn-reject-border: 2px solid #000;
--cky-btn-weight: 400;
--cky-brand-link: #000;
--cky-table-th-color: #fff;
--cky-table-td-padding: 26px;
--grey-dark: #333;
--grey-medium: #666;
--cky-brand-heading: #000;
--cky-brand-text: #000;
--cky-btn-pref-border: 2px solid #000;
--cky-font-semibold: "Times New Roman",Times,serif;
--cky-btn-reject-color: #000;
--cky-brand-background: #ff0;
--overlay: 100%;
--cky-btn-customize-bg: transparent;
--cky-title-size: 20px;
--cky-brand-success: #000;
--cky-padding-box: 30px;
--cky-table-th-bg: #000;
--reflex-grid-spacing: 15px;
--cky-checkbox-bg: #000;
--cky-table-th-size: 16px;
--reflex-columns: 12;
--cky-table-th-border: none;
--cky-btn-customize-color: #000;
--cky-title-font: "futura-pt",sans-serif;
--ff-times-new-roman: "Times New Roman",Times,serif;
--cky-table-td-size-xl: 18px;
--cky-table-td-border: none;
--cky-checkbox-border: 1px solid #000;
--cky-btn-accept-color: #fff;
--cky-table-td-size-xxl: 20px;
--grey-light: #ececec;
--cky-btn-reject-bg: transparent;
--cky-paragraph-size: 16px;
--cky-checkbox-checked-bg: #000;
--ff-futura: "futura-pt",sans-serif;
--cky-btn-accept-bg: #000;
--cky-paragraph-lh: 24px;
--artOverlay: 100%;
--cky-table-td-color: #000;
--cky-btn-customize-border: 2px solid #000;
--cky-title-size-mob: 16px;
--cky-border-radius-box: 0;
--cky-table-td-size-sm: 16px;
--cky-table-bg-even: transparent;
--cky-revisit-bg: #000;
--cky-btn-pref-color: #000;
--cky-padding-box-mob: 30px 0;
--speakerOverlay: 100%;
--cky-btn-accept-border: 2px solid #000;
--cky-table-bg-odd: transparent;
--cky-brand-warning: #999;
--cky-table-th-padding: 20px 20px 17px;
--booksOverlay: 100%;
--cky-font-italic: "Times New Roman",Times,serif;
--cky-font-base: "Times New Roman",Times,serif;
}Drop-in prompt
Build a landing page in the visual style of Oliverjeffers.
Reference design system (extracted from the live site):
- Palette: #f4f30c, #6b4c15, #cbb589, #8e7a6c, #d3cdbd
- Typefaces: futura-pt, Times New Roman
- 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/oliverjeffers-com--art