Monogram — Design Reference
porcelain phone on warm linen
Source: https://www.monogram.ai
Theme: light
Category: AI
Mood: light, minimal, warm, precise, airy, monochrome
Captured: 2026-10-25
Overview
Monogram feels like a quiet product launch shot in a white studio. A single white panel floats on a warm off-white ground, and a tall rounded phone mockup sits in it, rendering a recipe like a page from a glossy cookbook. The interface is the hero. The marketing chrome stays tiny: one logo, one tight headline, one black pill button and a muted demo link.
The whole system rests on Inter at 400/500/600. Display headings are set at 60px/66px with an aggressive -3px tracking, so they read dense and engineered. Colour is almost entirely monochrome: #ffffff panels on #f5f4f0 linen, #1f1f1f headlines, #4a4a4a body copy, #6e6a62 warm-grey meta text and #000000 CTAs. Everything interactive is a full pill (99px/9999px). Depth comes from long, soft, warm-tinted shadows (rgba(42,37,32,…)) on the device and layered low-opacity drop shadows on chips, never from borders or colour.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Linen Ground |
#f5f4f0 |
--color-surface |
Outer page ground and announcement bar. The white hero panel floats on top of it. |
| Porcelain |
#ffffff |
--color-background |
Main content panel, nav, phone screen, secondary pill buttons and chips |
| Ink Black |
#000000 |
--color-primary |
Primary CTA pill fill ('Download the app'), mic button, nav link text |
| Graphite |
#1f1f1f |
--color-foreground |
Headlines (h1 60px) and the main heading colour |
| Smoke |
#4a4a4a |
--color-text-body |
Long-form body copy and article paragraphs, plus the 'Watch the demo' link |
| Taupe Grey |
#6e6a62 |
--color-text-muted |
Warm muted meta text: cookie settings, footer, bylines |
| Espresso |
#2c2a26 |
--color-text-warm |
Warm near-black for the announcement bar link and small emphasis text |
| Hairline |
#dddddd |
--color-border |
1px border on the secondary 'Get the app' pill and the menu toggle circle |
| Link Blue |
#006fd6 |
--color-link |
Rare inline link colour inside article and embed content |
| Shadow Umber |
#2a2520 |
--color-shadow |
Tint base for warm shadows on the device mockup (used as rgba 0.12–0.30) |
Semantic roles
| Role |
Value |
| background |
#f5f4f0 |
| surface |
#ffffff |
| surface raised |
#ffffff |
| border |
#dddddd |
| text |
#1f1f1f |
| text muted |
#6e6a62 |
| primary |
#000000 |
| primary text |
#ffffff |
| accent |
#006fd6 |
Tokens — Typography
- Display: Inter (600) — fallbacks: Inter Tight, -apple-system, Helvetica Neue, Arial, sans-serif. Variable Inter at 600 with heavy negative tracking (-3px at 60px, about -0.05em). This is what makes the headlines feel tight.
- Body: Inter (400, 500, 600) — fallbacks: -apple-system, system-ui, Helvetica Neue, Arial, sans-serif. 18px/1.5 for article body and 16px for UI. Labels use 600 with slight negative tracking (-0.32px to -0.45px).
| Role |
Size |
Line height |
Weight |
Letter spacing |
Family |
| Display / H1 |
60px |
66px |
600 |
-3px |
display |
| Lead / Article body |
18px |
1.5 |
400 |
normal |
body |
| Link title / CTA label |
18px |
1.56 |
600 |
-0.45px |
body |
| Body |
16px |
1.5 |
400 |
normal |
body |
| UI label / Chip |
16px |
1.38 |
600 |
-0.32px |
body |
| Small |
14px |
1.43 |
400 |
normal |
body |
| Footer meta |
14px |
1.43 |
500 |
normal |
body |
| Caption |
11px |
1.5 |
400 |
normal |
body |
Tokens — Spacing & Layout
- Base unit: 4px
- Density: spacious
- Container max width: 1000px
- Section gap: 120px
- Card padding: 24px
- Scale: 2px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 120px
Tokens — Radius
| Element |
Value |
| Buttons, chips, nav toggles |
99px |
| Phone device frame |
48px |
| Bottom corners of the hero panel |
27px |
| In-app cards and embed frames |
12px |
| Small inline elements |
4px |
Tokens — Shadows
| Name |
Value |
Usage |
| Device float |
rgba(42, 37, 32, 0.26) 0px 60px 140px -22px, rgba(42, 37, 32, 0.125) 0px 32px 44px -6px, rgba(255, 255, 255, 0.39) 0px 1.5px 1px -0.5px inset, rgba(0, 0, 0, 0.067) 0px -1.5px 1px -0.5px inset |
Hero phone mockup: a long warm drop shadow with a glassy inner bevel |
| Chip lift |
rgba(0, 0, 0, 0.05) 0px 12px 16px 0px, rgba(0, 0, 0, 0.06) 0px 6px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1.5px 0px |
Prompt chips ('Cookie recipe'), in-app cards and the floating white pills |
| Panel drop |
rgba(0, 0, 0, 0.13) 0px 16px 28px -10px |
The white hero panel's edge where it meets the linen ground |
| Bevel ring |
rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(255, 255, 255, 0.85) 0px 1px 0.5px 0px inset, rgba(42, 37, 32, 0.3) 0px -1px 0.5px 0px inset, rgba(42, 37, 32, 0.12) 0px 0px 1.5px 0px |
Tactile icon buttons inside the device (plus, keyboard) |
| Hairline ring |
rgba(0, 0, 0, 0.02) 0px 0px 0px 1px |
Barely-there outline on white surfaces |
Components
Primary pill button (button)
| Property |
Value |
| background |
#000000 |
| color |
#ffffff |
| border |
none |
| radius |
99px |
| padding |
12px 20px |
| font size |
18px |
| font weight |
600 |
| shadow |
none |
| hover |
background #1f1f1f, slight opacity 0.9 |
52px tall with a leading Apple glyph and a 6px gap. Used for 'Download the app', centred under the hero headline.
Secondary outline pill (button)
| Property |
Value |
| background |
#ffffff |
| color |
#000000 |
| border |
1px solid #dddddd |
| radius |
9999px |
| padding |
0px 12px |
| font size |
16px |
| font weight |
600 |
| shadow |
none |
| hover |
background #f5f4f0 |
36px tall 'Get the app' in the nav. Paired with a matching 36px circular menu toggle that has the same border.
Ghost demo link (link)
| Property |
Value |
| background |
transparent |
| color |
#4a4a4a |
| border |
none |
| radius |
0px |
| padding |
0px |
| font size |
16px |
| font weight |
600 |
| shadow |
none |
| hover |
color #1f1f1f |
'Watch the demo' with a small filled play triangle and -0.32px tracking. Sits about 16px below the primary pill.
Prompt chip (badge)
| Property |
Value |
| background |
#ffffff |
| color |
#1f1f1f |
| border |
none |
| radius |
99px |
| padding |
8px 16px |
| font size |
16px |
| font weight |
600 |
| shadow |
rgba(0,0,0,0.05) 0px 12px 16px 0px, rgba(0,0,0,0.06) 0px 6px 8px 0px, rgba(0,0,0,0.06) 0px 1px 1.5px 0px |
| hover |
full opacity. Inactive chips fade to about 40% at the carousel edges. |
Emoji plus label in a horizontal carousel under the device ('Cookie recipe'). Edge chips are masked out with a fade.
Top nav (nav)
| Property |
Value |
| background |
#ffffff |
| color |
#000000 |
| border |
none |
| radius |
0px |
| padding |
0px 32px |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
| hover |
none |
76px tall. Monogram ⋈ mark plus wordmark on the left; on the right, the outline 'Get the app' pill and a circular hamburger. The home page hides the nav and centres the logo above the H1.
Announcement bar (other)
| Property |
Value |
| background |
#f5f4f0 |
| color |
#2c2a26 |
| border |
none |
| radius |
0px |
| padding |
12px 16px |
| font size |
16px |
| font weight |
600 |
| shadow |
none |
| hover |
underline stays, colour to #000000 |
Full-width strip with centred, underlined text and a → arrow ('Announcing our $40M seed round').
Floating hero panel (card)
| Property |
Value |
| background |
#ffffff |
| color |
#1f1f1f |
| border |
none |
| radius |
0 0 27px 27px |
| padding |
64px 32px |
| font size |
16px |
| font weight |
400 |
| shadow |
rgba(0,0,0,0.13) 0px 16px 28px -10px |
| hover |
none |
A white sheet holding the split hero (copy left, device right). It ends on the #f5f4f0 linen ground with softly rounded bottom corners.
Embed frame (card)
| Property |
Value |
| background |
#ffffff |
| color |
#0f1419 |
| border |
1px solid #cfd9de |
| radius |
12px |
| padding |
12px 16px |
| font size |
20px |
| font weight |
400 |
| shadow |
none |
| hover |
border #dddddd |
Third-party tweet card in articles. It keeps its own system-font styling inside the 1000px column.
Layout
Centred column with a 1000px max width on a white panel. The home page is a two-column split hero: on the left, a centred logo, a two-line 60px H1, the black pill CTA and the demo link; on the right, a tall rounded phone mockup that bleeds its shadow into the white, with a prompt-chip carousel below it. Below the panel, the page drops to the #f5f4f0 linen ground. Articles use a narrow reading column (about 460–500px of text) with a left-aligned 60px H1, a 16px byline in #4a4a4a with underlined author names, then 18px/1.5 body copy.
Imagery
No photography or illustration on the marketing layer. The only imagery is the product itself: a white iOS-style device showing generated UI with soft 3D-rendered ingredient objects (butter, flour sack, baking soda tin) on light grey tiles. Icons are thin 1.5px line icons. The logo is a bowtie-shaped ⋈ monogram glyph.
Motion
Calm and product-driven. The device content scrolls and swaps through generated interfaces, and the prompt chips slide horizontally with faded edges. Buttons use quick opacity/background transitions (about 150–200ms ease). No parallax or flashy entrances.
Responsive
On phones the split hero stacks. The H1 drops to one line at about 40px, sits centred above the device, and the device fills almost the full width (about 20px side margins) while keeping its 48px rounded corners and warm shadow. The announcement bar stays at the top with larger, wrapping-safe text. The nav becomes logo on the left with the 'Get the app' outline pill and a circular hamburger on the right. Tapping it opens a full-width dropdown sheet (the hamburger turns into an × in the same circle) listing large 24px/600 links: Introducing Monogram, Manifesto, We're hiring, Press, Terms, Privacy, Trust Center. Below a hairline divider come X and LinkedIn icons and a black 'Download the app' pill. The page behind stays visible below the sheet.
Do
- Set every headline in Inter 600 with tight negative tracking (-3px at 60px, about -0.05em). Scale the tracking with size.
- Float white #ffffff panels on the warm #f5f4f0 ground. Never use pure grey for the page ground.
- Make every button, chip and toggle a full pill (99px). Primary is solid #000000 with white 600 text.
- Let the product UI be the hero image: a white rounded device with a long warm shadow (rgba(42,37,32,…)).
- Use warm greys (#6e6a62, #2c2a26) for meta and small text so the monochrome palette stays soft.
- Keep the CTA cluster minimal: one black pill plus one ghost link with an icon, stacked and centred.
Don't
- Don't introduce a brand colour or gradients. Blue (#006fd6) only appears inside embedded or article links.
- Don't use visible borders on cards. Separate surfaces with surface colour and soft layered shadows.
- Don't use square or small-radius buttons. Anything clickable is a pill or a circle.
- Don't set headlines at 700+ or with default tracking. They will look generic.
- Don't use cool blue-black shadows on hero objects. Shadows are warm umber and very diffuse.
- Don't crowd the hero with feature grids or badges. Keep it to logo, H1, CTA and device.
Agent prompt
Build in a quiet, warm-monochrome product-launch style: Inter (variable) throughout at weights 400/500/600, headlines 60px/66px weight 600 with -3px letter-spacing in #1f1f1f, body 18px/1.5 in #4a4a4a, meta 14px in warm grey #6e6a62. Page ground is linen #f5f4f0 with a white #ffffff content panel (max-width 1000px, bottom radius about 27px, shadow rgba(0,0,0,0.13) 0 16px 28px -10px) above a thin #f5f4f0 announcement bar with underlined centred text and →. Primary CTA is a solid #000000 pill (radius 99px, padding 12px 20px, 18px/600 white, optional Apple glyph); the secondary is a white pill with a 1px #dddddd border, 36px tall, 16px/600; the tertiary is a ghost link with a play icon. The hero is a split layout: centred ⋈ logo + H1 + CTA on the left, and on the right a tall white phone mockup (radius 48px) with a warm diffuse shadow rgba(42,37,32,0.26) 0 60px 140px -22px plus a subtle inset bevel, showing generated UI with soft 3D object renders, and a carousel of white pill prompt chips with layered soft shadows below. No brand colour, no gradients, no card borders, thin line icons, spacious 4px-based spacing (6/8/12/16/24/32/64/120), and calm motion only.
CSS custom properties
/* Monogram — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-surface: #f5f4f0; /* Outer page ground and announcement bar. The white hero panel floats on top of it. */
--color-background: #ffffff; /* Main content panel, nav, phone screen, secondary pill buttons and chips */
--color-primary: #000000; /* Primary CTA pill fill ('Download the app'), mic button, nav link text */
--color-foreground: #1f1f1f; /* Headlines (h1 60px) and the main heading colour */
--color-text-body: #4a4a4a; /* Long-form body copy and article paragraphs, plus the 'Watch the demo' link */
--color-text-muted: #6e6a62; /* Warm muted meta text: cookie settings, footer, bylines */
--color-text-warm: #2c2a26; /* Warm near-black for the announcement bar link and small emphasis text */
--color-border: #dddddd; /* 1px border on the secondary 'Get the app' pill and the menu toggle circle */
--color-link: #006fd6; /* Rare inline link colour inside article and embed content */
--color-shadow: #2a2520; /* Tint base for warm shadows on the device mockup (used as rgba 0.12–0.30) */
/* Semantic roles */
--background: #f5f4f0;
--surface: #ffffff;
--surface-raised: #ffffff;
--border: #dddddd;
--text: #1f1f1f;
--text-muted: #6e6a62;
--primary: #000000;
--primary-text: #ffffff;
--accent: #006fd6;
/* Typography */
--font-display: Inter, 'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-body: Inter, -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
--text-display-h1: 60px;
--text-display-h1--line-height: 66px;
--text-display-h1--letter-spacing: -3px;
--text-display-h1--font-weight: 600;
--text-lead-article-body: 18px;
--text-lead-article-body--line-height: 1.5;
--text-lead-article-body--letter-spacing: normal;
--text-lead-article-body--font-weight: 400;
--text-link-title-cta-label: 18px;
--text-link-title-cta-label--line-height: 1.56;
--text-link-title-cta-label--letter-spacing: -0.45px;
--text-link-title-cta-label--font-weight: 600;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-ui-label-chip: 16px;
--text-ui-label-chip--line-height: 1.38;
--text-ui-label-chip--letter-spacing: -0.32px;
--text-ui-label-chip--font-weight: 600;
--text-small: 14px;
--text-small--line-height: 1.43;
--text-small--letter-spacing: normal;
--text-small--font-weight: 400;
--text-footer-meta: 14px;
--text-footer-meta--line-height: 1.43;
--text-footer-meta--letter-spacing: normal;
--text-footer-meta--font-weight: 500;
--text-caption: 11px;
--text-caption--line-height: 1.5;
--text-caption--letter-spacing: normal;
--text-caption--font-weight: 400;
/* Spacing */
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 12px;
--space-6: 16px;
--space-7: 20px;
--space-8: 24px;
--space-9: 32px;
--space-10: 48px;
--space-11: 64px;
--space-12: 120px;
--container: 1000px;
--section-gap: 120px;
/* Radius */
--radius-buttons-chips-nav-toggles: 99px;
--radius-phone-device-frame: 48px;
--radius-bottom-corners-of-the-hero-panel: 27px;
--radius-in-app-cards-and-embed-frames: 12px;
--radius-small-inline-elements: 4px;
/* Shadows */
--shadow-device-float: rgba(42, 37, 32, 0.26) 0px 60px 140px -22px, rgba(42, 37, 32, 0.125) 0px 32px 44px -6px, rgba(255, 255, 255, 0.39) 0px 1.5px 1px -0.5px inset, rgba(0, 0, 0, 0.067) 0px -1.5px 1px -0.5px inset;
--shadow-chip-lift: rgba(0, 0, 0, 0.05) 0px 12px 16px 0px, rgba(0, 0, 0, 0.06) 0px 6px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1.5px 0px;
--shadow-panel-drop: rgba(0, 0, 0, 0.13) 0px 16px 28px -10px;
--shadow-bevel-ring: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(255, 255, 255, 0.85) 0px 1px 0.5px 0px inset, rgba(42, 37, 32, 0.3) 0px -1px 0.5px 0px inset, rgba(42, 37, 32, 0.12) 0px 0px 1.5px 0px;
--shadow-hairline-ring: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
}
Tailwind v4 theme
/* Monogram — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
--color-surface: #f5f4f0;
--color-background: #ffffff;
--color-primary: #000000;
--color-foreground: #1f1f1f;
--color-text-body: #4a4a4a;
--color-text-muted: #6e6a62;
--color-text-warm: #2c2a26;
--color-border: #dddddd;
--color-link: #006fd6;
--color-shadow: #2a2520;
--color-background: #f5f4f0;
--color-surface: #ffffff;
--color-surface-raised: #ffffff;
--color-border: #dddddd;
--color-text: #1f1f1f;
--color-text-muted: #6e6a62;
--color-primary: #000000;
--color-primary-text: #ffffff;
--color-accent: #006fd6;
--font-display: Inter, 'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-body: Inter, -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
--text-display-h1: 60px;
--text-display-h1--line-height: 66px;
--text-display-h1--letter-spacing: -3px;
--text-display-h1--font-weight: 600;
--text-lead-article-body: 18px;
--text-lead-article-body--line-height: 1.5;
--text-lead-article-body--letter-spacing: normal;
--text-lead-article-body--font-weight: 400;
--text-link-title-cta-label: 18px;
--text-link-title-cta-label--line-height: 1.56;
--text-link-title-cta-label--letter-spacing: -0.45px;
--text-link-title-cta-label--font-weight: 600;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-ui-label-chip: 16px;
--text-ui-label-chip--line-height: 1.38;
--text-ui-label-chip--letter-spacing: -0.32px;
--text-ui-label-chip--font-weight: 600;
--text-small: 14px;
--text-small--line-height: 1.43;
--text-small--letter-spacing: normal;
--text-small--font-weight: 400;
--text-footer-meta: 14px;
--text-footer-meta--line-height: 1.43;
--text-footer-meta--letter-spacing: normal;
--text-footer-meta--font-weight: 500;
--text-caption: 11px;
--text-caption--line-height: 1.5;
--text-caption--letter-spacing: normal;
--text-caption--font-weight: 400;
--radius-buttons-chips-nav-toggles: 99px;
--radius-phone-device-frame: 48px;
--radius-bottom-corners-of-the-hero-panel: 27px;
--radius-in-app-cards-and-embed-frames: 12px;
--radius-small-inline-elements: 4px;
--shadow-device-float: rgba(42, 37, 32, 0.26) 0px 60px 140px -22px, rgba(42, 37, 32, 0.125) 0px 32px 44px -6px, rgba(255, 255, 255, 0.39) 0px 1.5px 1px -0.5px inset, rgba(0, 0, 0, 0.067) 0px -1.5px 1px -0.5px inset;
--shadow-chip-lift: rgba(0, 0, 0, 0.05) 0px 12px 16px 0px, rgba(0, 0, 0, 0.06) 0px 6px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1.5px 0px;
--shadow-panel-drop: rgba(0, 0, 0, 0.13) 0px 16px 28px -10px;
--shadow-bevel-ring: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(255, 255, 255, 0.85) 0px 1px 0.5px 0px inset, rgba(42, 37, 32, 0.3) 0px -1px 0.5px 0px inset, rgba(42, 37, 32, 0.12) 0px 0px 1.5px 0px;
--shadow-hairline-ring: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
--container-site: 1000px;
}
Theme tokens — light + dark
The shadcn-named layer DevDojo Sites speaks (bg-background, text-foreground, bg-primary, rounded-medium…). Paste into site.css after @import "tailwindcss" to restyle any site in this look.
/* Monogram — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: estimated — the site has no dark scheme, so the .dark half is a plausible twin of its palette. */
@custom-variant dark (&:where(.dark, .dark *));
:root {
color-scheme: light;
--background: #ffffff;
--foreground: #1f1f1f;
--card: #ffffff;
--card-foreground: #1f1f1f;
--popover: #ffffff; /* estimated */
--popover-foreground: #1f1f1f; /* estimated */
--primary: #000000;
--primary-foreground: #ffffff;
--secondary: #f5f4f0;
--secondary-foreground: #2c2a26;
--muted: #f5f4f0;
--muted-foreground: #6e6a62;
--accent: #f5f4f0; /* estimated */
--accent-foreground: #1f1f1f; /* estimated */
--destructive: #d93025; /* estimated */
--destructive-foreground: #ffffff; /* estimated */
--border: #dddddd;
--input: #dddddd; /* estimated */
--ring: #000000; /* estimated */
--radius-small: 4px;
--radius-medium: 12px;
--radius-large: 27px;
--radius: var(--radius-medium);
--font-display: Inter, 'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-body: Inter, -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
}
.dark {
color-scheme: dark;
/* estimated from the light palette */
--background: #1f1f1f;
--foreground: #f5f4f0;
--card: #2c2a26;
--card-foreground: #f5f4f0;
--popover: #2c2a26;
--popover-foreground: #f5f4f0;
--primary: #ffffff;
--primary-foreground: #000000;
--secondary: #2c2a26;
--secondary-foreground: #f5f4f0;
--muted: #2c2a26;
--muted-foreground: #a8a39a;
--accent: #4a4a4a;
--accent-foreground: #ffffff;
--destructive: #f2554a;
--destructive-foreground: #ffffff;
--border: rgba(255, 255, 255, 0.12);
--input: rgba(255, 255, 255, 0.16);
--ring: #ffffff;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-small: var(--radius-small);
--radius-medium: var(--radius-medium);
--radius-large: var(--radius-large);
--font-display: var(--font-display);
--font-body: var(--font-body);
}
Monogram — Style Reference
porcelain phone on warm linen
Theme: light · Mood: light, minimal, warm, precise, airy, monochrome
Monogram feels like a quiet product launch shot in a white studio. A single white panel floats on a warm off-white ground, and a tall rounded phone mockup sits in it, rendering a recipe like a page from a glossy cookbook. The interface is the hero. The marketing chrome stays tiny: one logo, one tight headline, one black pill button and a muted demo link.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Linen Ground |
#f5f4f0 |
--surface |
Outer page ground and announcement bar. The white hero panel floats on top of it. |
| Porcelain |
#ffffff |
--background |
Main content panel, nav, phone screen, secondary pill buttons and chips |
| Ink Black |
#000000 |
--primary |
Primary CTA pill fill ('Download the app'), mic button, nav link text |
| Graphite |
#1f1f1f |
--foreground |
Headlines (h1 60px) and the main heading colour |
| Smoke |
#4a4a4a |
--text-body |
Long-form body copy and article paragraphs, plus the 'Watch the demo' link |
| Taupe Grey |
#6e6a62 |
--text-muted |
Warm muted meta text: cookie settings, footer, bylines |
| Espresso |
#2c2a26 |
--text-warm |
Warm near-black for the announcement bar link and small emphasis text |
| Hairline |
#dddddd |
--border |
1px border on the secondary 'Get the app' pill and the menu toggle circle |
| Link Blue |
#006fd6 |
--link |
Rare inline link colour inside article and embed content |
| Shadow Umber |
#2a2520 |
--shadow |
Tint base for warm shadows on the device mockup (used as rgba 0.12–0.30) |
Tokens — Typography
- Display: Inter (Inter Tight, -apple-system, Helvetica Neue, Arial, sans-serif) — weights 600
- Body: Inter (-apple-system, system-ui, Helvetica Neue, Arial, sans-serif) — weights 400/500/600
Tokens — Radius
| Element |
Value |
| Buttons, chips, nav toggles |
99px |
| Phone device frame |
48px |
| Bottom corners of the hero panel |
27px |
| In-app cards and embed frames |
12px |
| Small inline elements |
4px |
Do
- Set every headline in Inter 600 with tight negative tracking (-3px at 60px, about -0.05em). Scale the tracking with size.
- Float white #ffffff panels on the warm #f5f4f0 ground. Never use pure grey for the page ground.
- Make every button, chip and toggle a full pill (99px). Primary is solid #000000 with white 600 text.
- Let the product UI be the hero image: a white rounded device with a long warm shadow (rgba(42,37,32,…)).
- Use warm greys (#6e6a62, #2c2a26) for meta and small text so the monochrome palette stays soft.
- Keep the CTA cluster minimal: one black pill plus one ghost link with an icon, stacked and centred.
Don't
- Don't introduce a brand colour or gradients. Blue (#006fd6) only appears inside embedded or article links.
- Don't use visible borders on cards. Separate surfaces with surface colour and soft layered shadows.
- Don't use square or small-radius buttons. Anything clickable is a pill or a circle.
- Don't set headlines at 700+ or with default tracking. They will look generic.
- Don't use cool blue-black shadows on hero objects. Shadows are warm umber and very diffuse.
- Don't crowd the hero with feature grids or badges. Keep it to logo, H1, CTA and device.
/* Monogram — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-surface: #f5f4f0; /* Outer page ground and announcement bar. The white hero panel floats on top of it. */
--color-background: #ffffff; /* Main content panel, nav, phone screen, secondary pill buttons and chips */
--color-primary: #000000; /* Primary CTA pill fill ('Download the app'), mic button, nav link text */
--color-foreground: #1f1f1f; /* Headlines (h1 60px) and the main heading colour */
--color-text-body: #4a4a4a; /* Long-form body copy and article paragraphs, plus the 'Watch the demo' link */
--color-text-muted: #6e6a62; /* Warm muted meta text: cookie settings, footer, bylines */
--color-text-warm: #2c2a26; /* Warm near-black for the announcement bar link and small emphasis text */
--color-border: #dddddd; /* 1px border on the secondary 'Get the app' pill and the menu toggle circle */
--color-link: #006fd6; /* Rare inline link colour inside article and embed content */
--color-shadow: #2a2520; /* Tint base for warm shadows on the device mockup (used as rgba 0.12–0.30) */
/* Semantic roles */
--background: #f5f4f0;
--surface: #ffffff;
--surface-raised: #ffffff;
--border: #dddddd;
--text: #1f1f1f;
--text-muted: #6e6a62;
--primary: #000000;
--primary-text: #ffffff;
--accent: #006fd6;
/* Typography */
--font-display: Inter, 'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-body: Inter, -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
--text-display-h1: 60px;
--text-display-h1--line-height: 66px;
--text-display-h1--letter-spacing: -3px;
--text-display-h1--font-weight: 600;
--text-lead-article-body: 18px;
--text-lead-article-body--line-height: 1.5;
--text-lead-article-body--letter-spacing: normal;
--text-lead-article-body--font-weight: 400;
--text-link-title-cta-label: 18px;
--text-link-title-cta-label--line-height: 1.56;
--text-link-title-cta-label--letter-spacing: -0.45px;
--text-link-title-cta-label--font-weight: 600;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-ui-label-chip: 16px;
--text-ui-label-chip--line-height: 1.38;
--text-ui-label-chip--letter-spacing: -0.32px;
--text-ui-label-chip--font-weight: 600;
--text-small: 14px;
--text-small--line-height: 1.43;
--text-small--letter-spacing: normal;
--text-small--font-weight: 400;
--text-footer-meta: 14px;
--text-footer-meta--line-height: 1.43;
--text-footer-meta--letter-spacing: normal;
--text-footer-meta--font-weight: 500;
--text-caption: 11px;
--text-caption--line-height: 1.5;
--text-caption--letter-spacing: normal;
--text-caption--font-weight: 400;
/* Spacing */
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 12px;
--space-6: 16px;
--space-7: 20px;
--space-8: 24px;
--space-9: 32px;
--space-10: 48px;
--space-11: 64px;
--space-12: 120px;
--container: 1000px;
--section-gap: 120px;
/* Radius */
--radius-buttons-chips-nav-toggles: 99px;
--radius-phone-device-frame: 48px;
--radius-bottom-corners-of-the-hero-panel: 27px;
--radius-in-app-cards-and-embed-frames: 12px;
--radius-small-inline-elements: 4px;
/* Shadows */
--shadow-device-float: rgba(42, 37, 32, 0.26) 0px 60px 140px -22px, rgba(42, 37, 32, 0.125) 0px 32px 44px -6px, rgba(255, 255, 255, 0.39) 0px 1.5px 1px -0.5px inset, rgba(0, 0, 0, 0.067) 0px -1.5px 1px -0.5px inset;
--shadow-chip-lift: rgba(0, 0, 0, 0.05) 0px 12px 16px 0px, rgba(0, 0, 0, 0.06) 0px 6px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1.5px 0px;
--shadow-panel-drop: rgba(0, 0, 0, 0.13) 0px 16px 28px -10px;
--shadow-bevel-ring: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(255, 255, 255, 0.85) 0px 1px 0.5px 0px inset, rgba(42, 37, 32, 0.3) 0px -1px 0.5px 0px inset, rgba(42, 37, 32, 0.12) 0px 0px 1.5px 0px;
--shadow-hairline-ring: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
}
{
"$name": "Monogram",
"$source": "https://www.monogram.ai",
"$theme": "light",
"$generated": "inspiration library",
"color": {
"surface": {
"$type": "color",
"$value": "#f5f4f0",
"$description": "Outer page ground and announcement bar. The white hero panel floats on top of it."
},
"background": {
"$type": "color",
"$value": "#ffffff",
"$description": "Main content panel, nav, phone screen, secondary pill buttons and chips"
},
"primary": {
"$type": "color",
"$value": "#000000",
"$description": "Primary CTA pill fill ('Download the app'), mic button, nav link text"
},
"foreground": {
"$type": "color",
"$value": "#1f1f1f",
"$description": "Headlines (h1 60px) and the main heading colour"
},
"text-body": {
"$type": "color",
"$value": "#4a4a4a",
"$description": "Long-form body copy and article paragraphs, plus the 'Watch the demo' link"
},
"text-muted": {
"$type": "color",
"$value": "#6e6a62",
"$description": "Warm muted meta text: cookie settings, footer, bylines"
},
"text-warm": {
"$type": "color",
"$value": "#2c2a26",
"$description": "Warm near-black for the announcement bar link and small emphasis text"
},
"border": {
"$type": "color",
"$value": "#dddddd",
"$description": "1px border on the secondary 'Get the app' pill and the menu toggle circle"
},
"link": {
"$type": "color",
"$value": "#006fd6",
"$description": "Rare inline link colour inside article and embed content"
},
"shadow": {
"$type": "color",
"$value": "#2a2520",
"$description": "Tint base for warm shadows on the device mockup (used as rgba 0.12–0.30)"
}
},
"role": {
"background": {
"$type": "color",
"$value": "#f5f4f0"
},
"surface": {
"$type": "color",
"$value": "#ffffff"
},
"surface_raised": {
"$type": "color",
"$value": "#ffffff"
},
"border": {
"$type": "color",
"$value": "#dddddd"
},
"text": {
"$type": "color",
"$value": "#1f1f1f"
},
"text_muted": {
"$type": "color",
"$value": "#6e6a62"
},
"primary": {
"$type": "color",
"$value": "#000000"
},
"primary_text": {
"$type": "color",
"$value": "#ffffff"
},
"accent": {
"$type": "color",
"$value": "#006fd6"
}
},
"fontFamily": {
"display": {
"$type": "fontFamily",
"$value": [
"Inter",
"Inter Tight",
"-apple-system",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"$description": "Variable Inter at 600 with heavy negative tracking (-3px at 60px, about -0.05em). This is what makes the headlines feel tight."
},
"body": {
"$type": "fontFamily",
"$value": [
"Inter",
"-apple-system",
"system-ui",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"$description": "18px/1.5 for article body and 16px for UI. Labels use 600 with slight negative tracking (-0.32px to -0.45px)."
}
},
"typography": {
"display-h1": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "60px",
"lineHeight": "66px",
"fontWeight": 600,
"letterSpacing": "-3px"
}
},
"lead-article-body": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "18px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"link-title-cta-label": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "18px",
"lineHeight": "1.56",
"fontWeight": 600,
"letterSpacing": "-0.45px"
}
},
"body": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"ui-label-chip": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.38",
"fontWeight": 600,
"letterSpacing": "-0.32px"
}
},
"small": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "14px",
"lineHeight": "1.43",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"footer-meta": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "14px",
"lineHeight": "1.43",
"fontWeight": 500,
"letterSpacing": "normal"
}
},
"caption": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "11px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "2px"
},
"2": {
"$type": "dimension",
"$value": "4px"
},
"3": {
"$type": "dimension",
"$value": "6px"
},
"4": {
"$type": "dimension",
"$value": "8px"
},
"5": {
"$type": "dimension",
"$value": "12px"
},
"6": {
"$type": "dimension",
"$value": "16px"
},
"7": {
"$type": "dimension",
"$value": "20px"
},
"8": {
"$type": "dimension",
"$value": "24px"
},
"9": {
"$type": "dimension",
"$value": "32px"
},
"10": {
"$type": "dimension",
"$value": "48px"
},
"11": {
"$type": "dimension",
"$value": "64px"
},
"12": {
"$type": "dimension",
"$value": "120px"
}
},
"radius": {
"buttons-chips-nav-toggles": {
"$type": "dimension",
"$value": "99px"
},
"phone-device-frame": {
"$type": "dimension",
"$value": "48px"
},
"bottom-corners-of-the-hero-panel": {
"$type": "dimension",
"$value": "27px"
},
"in-app-cards-and-embed-frames": {
"$type": "dimension",
"$value": "12px"
},
"small-inline-elements": {
"$type": "dimension",
"$value": "4px"
}
},
"shadow": {
"device-float": {
"$type": "shadow",
"$value": "rgba(42, 37, 32, 0.26) 0px 60px 140px -22px, rgba(42, 37, 32, 0.125) 0px 32px 44px -6px, rgba(255, 255, 255, 0.39) 0px 1.5px 1px -0.5px inset, rgba(0, 0, 0, 0.067) 0px -1.5px 1px -0.5px inset",
"$description": "Hero phone mockup: a long warm drop shadow with a glassy inner bevel"
},
"chip-lift": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.05) 0px 12px 16px 0px, rgba(0, 0, 0, 0.06) 0px 6px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1.5px 0px",
"$description": "Prompt chips ('Cookie recipe'), in-app cards and the floating white pills"
},
"panel-drop": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.13) 0px 16px 28px -10px",
"$description": "The white hero panel's edge where it meets the linen ground"
},
"bevel-ring": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(255, 255, 255, 0.85) 0px 1px 0.5px 0px inset, rgba(42, 37, 32, 0.3) 0px -1px 0.5px 0px inset, rgba(42, 37, 32, 0.12) 0px 0px 1.5px 0px",
"$description": "Tactile icon buttons inside the device (plus, keyboard)"
},
"hairline-ring": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.02) 0px 0px 0px 1px",
"$description": "Barely-there outline on white surfaces"
}
},
"component": {
"primary-pill-button": {
"kind": "button",
"background": "#000000",
"color": "#ffffff",
"border": "none",
"radius": "99px",
"padding": "12px 20px",
"font_size": "18px",
"font_weight": 600,
"shadow": "none",
"hover": "background #1f1f1f, slight opacity 0.9",
"notes": "52px tall with a leading Apple glyph and a 6px gap. Used for 'Download the app', centred under the hero headline."
},
"secondary-outline-pill": {
"kind": "button",
"background": "#ffffff",
"color": "#000000",
"border": "1px solid #dddddd",
"radius": "9999px",
"padding": "0px 12px",
"font_size": "16px",
"font_weight": 600,
"shadow": "none",
"hover": "background #f5f4f0",
"notes": "36px tall 'Get the app' in the nav. Paired with a matching 36px circular menu toggle that has the same border."
},
"ghost-demo-link": {
"kind": "link",
"background": "transparent",
"color": "#4a4a4a",
"border": "none",
"radius": "0px",
"padding": "0px",
"font_size": "16px",
"font_weight": 600,
"shadow": "none",
"hover": "color #1f1f1f",
"notes": "'Watch the demo' with a small filled play triangle and -0.32px tracking. Sits about 16px below the primary pill."
},
"prompt-chip": {
"kind": "badge",
"background": "#ffffff",
"color": "#1f1f1f",
"border": "none",
"radius": "99px",
"padding": "8px 16px",
"font_size": "16px",
"font_weight": 600,
"shadow": "rgba(0,0,0,0.05) 0px 12px 16px 0px, rgba(0,0,0,0.06) 0px 6px 8px 0px, rgba(0,0,0,0.06) 0px 1px 1.5px 0px",
"hover": "full opacity. Inactive chips fade to about 40% at the carousel edges.",
"notes": "Emoji plus label in a horizontal carousel under the device ('Cookie recipe'). Edge chips are masked out with a fade."
},
"top-nav": {
"kind": "nav",
"background": "#ffffff",
"color": "#000000",
"border": "none",
"radius": "0px",
"padding": "0px 32px",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"hover": "none",
"notes": "76px tall. Monogram ⋈ mark plus wordmark on the left; on the right, the outline 'Get the app' pill and a circular hamburger. The home page hides the nav and centres the logo above the H1."
},
"announcement-bar": {
"kind": "other",
"background": "#f5f4f0",
"color": "#2c2a26",
"border": "none",
"radius": "0px",
"padding": "12px 16px",
"font_size": "16px",
"font_weight": 600,
"shadow": "none",
"hover": "underline stays, colour to #000000",
"notes": "Full-width strip with centred, underlined text and a → arrow ('Announcing our $40M seed round')."
},
"floating-hero-panel": {
"kind": "card",
"background": "#ffffff",
"color": "#1f1f1f",
"border": "none",
"radius": "0 0 27px 27px",
"padding": "64px 32px",
"font_size": "16px",
"font_weight": 400,
"shadow": "rgba(0,0,0,0.13) 0px 16px 28px -10px",
"hover": "none",
"notes": "A white sheet holding the split hero (copy left, device right). It ends on the #f5f4f0 linen ground with softly rounded bottom corners."
},
"embed-frame": {
"kind": "card",
"background": "#ffffff",
"color": "#0f1419",
"border": "1px solid #cfd9de",
"radius": "12px",
"padding": "12px 16px",
"font_size": "20px",
"font_weight": 400,
"shadow": "none",
"hover": "border #dddddd",
"notes": "Third-party tweet card in articles. It keeps its own system-font styling inside the 1000px column."
}
}
}
New
