Artforum
Portfolio Grid
Deep charcoal expanse, softly glowing sans-serif, spacious and serene.




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 | Roboto | 15px | 700 | 1.4 | 0 | Aa Bb Cc |
| h3 | Roboto | 12px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | Roboto | 10px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Arial | 13px | 400 | 0 | 0 | Aa Bb Cc |
Max content width 480px
:root {
--color-dominant: #f6a604;
--color-surface: #0935a3;
--color-ink: #eacf97;
--color-accent: #aa8a5b;
--color-detail: #a6a4c9;
}
/* CSS variables exposed by source */
:root {
--paper-spinner-layer-4-color: #aaa;
--paper-input-container-focus-color: #fff;
--paper-checkbox-checked-color: #fff;
--paper-menu-color: #fff;
--paper-tooltip-delay-in: 1ms;
--paper-toggle-button-checked-ink-color: #3ea6ff;
--paper-checkbox-unchecked-color: #fff;
--paper-input-container-input-color: #fff;
--paper-toggle-button-unchecked-bar-color: #fff;
--paper-checkbox-label-color: #fff;
--paper-radio-button-label-color: #fff;
--paper-checkbox-label-spacing: 16px;
--font-family: Roboto;
--paper-toggle-button-checked-button-color: #3ea6ff;
--paper-tooltip-duration-in: 150ms;
--paper-radio-button-checked-ink-color: #fff;
--paper-radio-button-size: 20px;
--paper-menu-background-color: #212121;
--paper-toggle-button-checked-bar-color: #3ea6ff;
--paper-toggle-button-unchecked-button-color: #909090;
--paper-tab-content-focused-font-weight: 500;
--paper-spinner-layer-1-color: #aaa;
--paper-toggle-button-unchecked-ink-color: #909090;
--paper-toggle-button-checked-bar-opacity: 0.3;
--paper-radio-button-unchecked-color: #fff;
--paper-checkbox-checkmark-color: #030303;
--paper-checkbox-checked-ink-color: #fff;
--paper-radio-button-label-spacing: 16px;
--paper-listbox-background-color: #212121;
--paper-input-container-invalid-color: #f57;
--paper-spinner-layer-2-color: #aaa;
--paper-menu-disabled-color: #fff;
--paper-spinner-color: #aaa;
--paper-checkbox-unchecked-ink-color: #fff;
--paper-radio-button-checked-color: #fff;
--primary-color: #3f51b5;
--primary-background-color: #fff;
--paper-tooltip-duration-out: 75ms;
--paper-listbox-color: #fff;
--paper-checkbox-size: 20px;
--accent-color: #ff4081;
--font-family-narrow: Roboto;
--secondary-text-color: #737373;
--paper-tooltip-delay-out: 0;
--paper-dialog-background-color: #212121;
--paper-toggle-button-unchecked-bar-opacity: 0.3;
--text-primary-color: #fff;
--primary-text-color: #212121;
--paper-spinner-layer-3-color: #aaa;
--paper-radio-button-unchecked-ink-color: #fff;
--yt-deprecated-white-opacity-lighten-1: hsla(0,0%,100%,0.8);
--yt-live-chat-disabled-button-text-color: rgba(255,255,255,0.7);
--ytmusic-carousel-padding: 0px;
--yt-live-chat-slider-markers-color: #fff;
--action-xl-size: 1.8rem;
--weight-black-narrow: 900;
--yt-deprecated-general-background-b: #0f0f0f;
--yt-live-chat-legacy-paid-message-color: #fff;
--body-l-size-narrow: 1.6rem;
--ytd-neg-margin-10x: -40px;
}Drop-in prompt
Build a landing page in the visual style of Music Youtube.
Reference design system (extracted from the live site):
- Palette: #f6a604, #0935a3, #eacf97, #aa8a5b, #a6a4c9
- Typefaces: Roboto, Arial
- 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/music-youtube-com