Artforum
Portfolio Grid
Loading
Curiositystream — Sign up
Warm ochre and deep indigo, clean sans-serif, expansive open space, fostering thoughtful discovery.
Click any value to copy. Roles are suggestions, not gospel.
- #ecac3coklch(78.6% 0.143 77)Dominant
- #341494oklch(34.5% 0.186 282)Surface
- #864fecoklch(57.5% 0.223 294)Ink
- #8c845coklch(61.0% 0.057 98)Accent
- #c0bfc2oklch(80.6% 0.004 301)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Graphik Web | 48px | 400 | 1.25 | 0 | Aa Bb Cc |
| h2 | Graphik Web | 24px | 400 | 1.25 | 0 | Aa Bb Cc |
| h3 | Graphik Web | 36px | 600 | 1.25 | 0 | Aa Bb Cc |
| body | Graphik Web | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Graphik Web | 14px | 400 | 1 | 0 | Aa Bb Cc |
| button | Graphik Web | 14px | 600 | 1.71 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ecac3c;
--color-surface: #341494;
--color-ink: #864fec;
--color-accent: #8c845c;
--color-detail: #c0bfc2;
}
/* CSS variables exposed by source */
:root {
--color-text: #f7f7f7;
--font-family: "Graphik Web",sans-serif;
--font-size: 16px;
--tw-ring-offset-shadow: 0 0 transparent;
--header-height: 80px;
--tw-ring-shadow: 0 0 transparent;
--carousel-side-padding: 5%;
--tw-text-opacity: 1;
--tw-border-spacing-x: 0;
--footer-height: 131px;
--tw-scale-y: 1;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--image-saturation: 90%;
--tw-skew-x: 0;
--reach-dialog: 1;
--reach-accordion: 1;
--tw-shadow: 0 0 transparent;
--tw-bg-opacity: 1;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 transparent;
--gradient-brand: linear-gradient(147.14deg,#ecc334 6.95%,#eb8b4c 93.05%);
--tw-border-spacing-y: 0;
--tw-skew-y: 0;
--gradient-premium: linear-gradient(147.14deg,#2563eb 6.95%,#60c 93.05%);
--carousel-card-gap: 0.5%;
}Drop-in prompt
Build a landing page in the visual style of Curiositystream — Sign up.
Reference design system (extracted from the live site):
- Palette: #ecac3c, #341494, #864fec, #8c845c, #c0bfc2
- Typefaces: Graphik Web
- Macrostructure: Portfolio Grid
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/curiositystream-com--signup
