Confluent — About
Feature Stack
Loading
Go — Blog
Cool, deep ocean blue, clean geometric type, expansive, uncluttered digital architecture.
Click any value to copy. Roles are suggestions, not gospel.
- #fad904oklch(88.6% 0.183 98)Dominant
- #047c9coklch(54.5% 0.102 224)Surface
- #7bd3fboklch(82.6% 0.102 229)Ink
- #63a45boklch(65.7% 0.124 142)Accent
- #d3cd9foklch(84.2% 0.061 101)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | -apple-system | 39px | 500 | 1.4 | 0 | Aa Bb Cc |
| h2 | -apple-system | 36px | 500 | 1.17 | 0 | Aa Bb Cc |
| h3 | -apple-system | 18px | 500 | 1.4 | 0 | Aa Bb Cc |
| body | -apple-system | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | -apple-system | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fad904;
--color-surface: #047c9c;
--color-ink: #7bd3fb;
--color-accent: #63a45b;
--color-detail: #d3cd9f;
}
/* CSS variables exposed by source */
:root {
--border: 0.0625rem solid #c6c8ca;
--border-card: 0.0625rem solid #c6c8ca;
--color-button-inverted-disabled: #fff;
--color-background-info: #f0f1f2;
--color-brand-primary: #007d9c;
--color-background-card-footer: #f8f8f8;
--color-input-text: #202224;
--color-button-accented-disabled: #f0f1f2;
--color-button-disabled: #f0f1f2;
--color-diff-new: #e0ffe0;
--color-background-alert: #fdecf1;
--color-button-accented-text-disabled: #555759;
--color-background-banner: #007d9c;
--color-text-subtle: #6e7072;
--color-background-logo: rgba(248, 248, 248, 0.9);
--color-text-inverted: #fff;
--color-background-code: #f8f8f8;
--color-background-carousel-button: #fff;
--color-code-comment: #3a6e11;
--color-background-accented: #f8f8f8;
--color-text-link: #007d9c;
--color-background-testimonial: #007f9f;
--color-diff-old: #ffe0e0;
--color-button-inverted-text: #007d9c;
--color-button-inverted-text-disabled: #6e7072;
--color-bright-text-link: #00769c;
--color-button-accented: #fddd00;
--color-text: #202224;
--color-background: #fff;
--color-button-accented-text: #202224;
--color-input: #fff;
--color-border: #c6c8ca;
--color-button-text: #fff;
--color-background-playground-input: #ffffdd;
--color-background-warning: #fff8cc;
--color-text-alert: #aa536c;
--color-background-inverted: #253443;
--color-background-highlighted-link: #f2fafd;
--color-button-text-disabled: #555759;
--color-button: #007d9c;
--color-button-inverted: #fff;
--border-code: 0.0625rem solid #c6c8ca;
--color-background-highlighted: #bfeaf4;
--abbey: #3f4042;
--yellow: #fddd00;
--slate: #253443;
--shark: #2b2d2f;
--green-light: #5fda64;
--pink: #c85e7a;
--gray-8: #dcdee0;
--gray-1: #202224;
--black-2: #111111;
--gray-7: #c6c8ca;
--white: #fff;
--gray-4: #6e7072;
--gray-2: #2d2d2d;
--blue: #bfeaf4;
--gray-3: #555759;
--pink-light: #fdecf1;
--gray-5: #848688;
}Drop-in prompt
Build a landing page in the visual style of Go — Blog.
Reference design system (extracted from the live site):
- Palette: #fad904, #047c9c, #7bd3fb, #63a45b, #d3cd9f
- Typefaces: -apple-system
- Macrostructure: Feature Stack
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/go-dev--blog
