№ moshimoshimusic-com

Moshimoshimusic

Deep indigo expanse, stark sans-serif clarity, spacious, contemplative, powerfully understated.

Portfolio Gridminimalism editorial brutalism dark mode musicdark

The page presents a grid of artist portraits, each a stark, full-bleed image against a dark backdrop. Typography is minimal, emphasizing the artist names in a clean sans-serif. The overall feel is sophisticated and understated. · artist grid, music agency, portfolio grid, minimal portrait, dark website, editorial design, creative agency, modern portfolio, music label, studio website

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#19a5e5
OKLCHoklch(68.4% 0.142 236)
RoleDominant
find sites →
Hex#062736
OKLCHoklch(25.7% 0.047 232)
RoleSurface
find sites →
Hex#87d0f1
OKLCHoklch(82.1% 0.086 228)
RoleInk
find sites →
Hex#947c7c
OKLCHoklch(60.9% 0.030 18)
RoleAccent
find sites →
Hex#bcc4c4
OKLCHoklch(81.4% 0.009 197)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h2	Libre Baskerville	20px	400	1.68	-0.4064px	Aa Bb Cc
body	sans-serif	16px	400	1.4	0	Aa Bb Cc
button	aktiv-grotesk	16px	400	1.4	0	Aa Bb Cc

Spacing scale

101px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #19a5e5;
  --color-surface: #062736;
  --color-ink: #87d0f1;
  --color-accent: #947c7c;
  --color-detail: #bcc4c4;
}

/* CSS variables exposed by source */
:root {
  --secondary-button-font-font-weight: 400;
  --primary-button-font-font-style: normal;
  --secondary-button-font-font-size-value: 1;
  --primary-button-padding-y: 1.3rem;
  --backgroundOverlayColor: hsla(45,20%,96.08%,1);
  --primary-button-font-font-size: 1rem;
  --primary-button-font-line-height: 1.2em;
  --secondary-button-font-font-family: "Almarai";
  --secondary-button-font-text-transform: none;
  --primaryButtonPadding: 1.3rem;
  --primary-button-rounded-border-bottom-left-radius: 5.6px;
  --text-highlight-color-on-background: hsla(9.19,100%,40.98%,1);
  --secondary-button-rounded-border-bottom-right-radius: 5.6px;
  --primary-button-rounded-border-top-right-radius: 5.6px;
  --secondaryButtonBackgroundColor: hsla(9.19,100%,40.98%,1);
  --primary-button-font-font-weight: 400;
  --secondary-button-font-font-style: normal;
  --secondary-button-padding-y: 1.3rem;
  --primary-button-padding-x: 2.171rem;
  --primaryButtonTextColor: hsla(0,0%,100%,1);
  --secondary-button-rounded-border-bottom-left-radius: 5.6px;
  --primaryButtonBackgroundColor: hsla(9.19,100%,40.98%,1);
  --primary-button-font-letter-spacing: 0em;
  --secondary-button-padding-x: 2.171rem;
  --accent-hsl: 9.19,100%,40.98%;
  --secondary-button-font-line-height: 1.2em;
  --secondaryButtonTextColor: hsla(0,0%,100%,1);
  --primary-button-stroke: 2px;
  --primary-button-font-font-family: "Almarai";
  --primary-button-rounded-border-top-left-radius: 5.6px;
  --secondary-button-rounded-border-top-left-radius: 5.6px;
  --secondary-button-stroke: 2px;
  --text-highlight-color: hsla(9.19,100%,40.98%,1);
  --secondary-button-font-font-size: 1rem;
  --primary-button-font-font-size-value: 1;
  --primary-button-rounded-border-bottom-right-radius: 5.6px;
  --secondary-button-font-letter-spacing: 0em;
  --secondary-button-rounded-border-top-right-radius: 5.6px;
  --primary-button-font-text-transform: none;
  --tertiary-button-font-font-style: normal;
  --tweak-summary-block-background-color: hsla(50.5,100%,72.75%,1);
  --tweak-blog-basic-grid-list-meta-color: hsla(0,0%,0%,1);
  --course-item-lesson-name-font-letter-spacing: -.02em;
  --content-link-block-title-font-font-weight: 700;
  --product-basic-item-restock-notification-wrap-layout-font-font-style: normal;
  --portfolio-grid-overlay-title-font-font-size-value: .9;
  --menu-block-item-description-font-letter-spacing: -1px;
  --product-basic-item-title-half-layout-font-font-family: "Libre Baskerville";
  --quote-block-text-font-font-family: "aktiv-grotesk";
  --quote-block-text-font-font-weight: 700;
  --product-basic-item-add-ons-title-half-layout-font-font-weight: 700;
  --tweak-blog-item-title-color: hsla(0,0%,0%,1);
  --portfolio-item-pagination-font-font-size-value: .9;
  --portfolio-hover-static-title-color: hsla(0,0%,0%,1);
  --portfolio-item-pagination-font-font-size: .9rem;
  --portfolio-index-background-title-font-letter-spacing: -.02em;
  --course-list-grid-layout-chapter-meta-font-font-style: normal;
  --product-basic-item-description-font-line-height: 1.5em;
  --product-basic-item-restock-notification-wrap-layout-font-text-transform: none;
  --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,0%,1);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Moshimoshimusic.
Reference design system (extracted from the live site):
- Palette: #19a5e5, #062736, #87d0f1, #947c7c, #bcc4c4
- Typefaces: Libre Baskerville, sans-serif, aktiv-grotesk
- 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/moshimoshimusic-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Libre Baskerville

20px

400

1.68

-0.4064px

Aa Bb Cc

body

sans-serif

16px

400

1.4

Aa Bb Cc

button

aktiv-grotesk

16px

400

1.4

Aa Bb Cc

:root { --color-dominant: #19a5e5; --color-surface: #062736; --color-ink: #87d0f1; --color-accent: #947c7c; --color-detail: #bcc4c4; } /* CSS variables exposed by source */ :root { --secondary-button-font-font-weight: 400; --primary-button-font-font-style: normal; --secondary-button-font-font-size-value: 1; --primary-button-padding-y: 1.3rem; --backgroundOverlayColor: hsla(45,20%,96.08%,1); --primary-button-font-font-size: 1rem; --primary-button-font-line-height: 1.2em; --secondary-button-font-font-family: "Almarai"; --secondary-button-font-text-transform: none; --primaryButtonPadding: 1.3rem; --primary-button-rounded-border-bottom-left-radius: 5.6px; --text-highlight-color-on-background: hsla(9.19,100%,40.98%,1); --secondary-button-rounded-border-bottom-right-radius: 5.6px; --primary-button-rounded-border-top-right-radius: 5.6px; --secondaryButtonBackgroundColor: hsla(9.19,100%,40.98%,1); --primary-button-font-font-weight: 400; --secondary-button-font-font-style: normal; --secondary-button-padding-y: 1.3rem; --primary-button-padding-x: 2.171rem; --primaryButtonTextColor: hsla(0,0%,100%,1); --secondary-button-rounded-border-bottom-left-radius: 5.6px; --primaryButtonBackgroundColor: hsla(9.19,100%,40.98%,1); --primary-button-font-letter-spacing: 0em; --secondary-button-padding-x: 2.171rem; --accent-hsl: 9.19,100%,40.98%; --secondary-button-font-line-height: 1.2em; --secondaryButtonTextColor: hsla(0,0%,100%,1); --primary-button-stroke: 2px; --primary-button-font-font-family: "Almarai"; --primary-button-rounded-border-top-left-radius: 5.6px; --secondary-button-rounded-border-top-left-radius: 5.6px; --secondary-button-stroke: 2px; --text-highlight-color: hsla(9.19,100%,40.98%,1); --secondary-button-font-font-size: 1rem; --primary-button-font-font-size-value: 1; --primary-button-rounded-border-bottom-right-radius: 5.6px; --secondary-button-font-letter-spacing: 0em; --secondary-button-rounded-border-top-right-radius: 5.6px; --primary-button-font-text-transform: none; --tertiary-button-font-font-style: normal; --tweak-summary-block-background-color: hsla(50.5,100%,72.75%,1); --tweak-blog-basic-grid-list-meta-color: hsla(0,0%,0%,1); --course-item-lesson-name-font-letter-spacing: -.02em; --content-link-block-title-font-font-weight: 700; --product-basic-item-restock-notification-wrap-layout-font-font-style: normal; --portfolio-grid-overlay-title-font-font-size-value: .9; --menu-block-item-description-font-letter-spacing: -1px; --product-basic-item-title-half-layout-font-font-family: "Libre Baskerville"; --quote-block-text-font-font-family: "aktiv-grotesk"; --quote-block-text-font-font-weight: 700; --product-basic-item-add-ons-title-half-layout-font-font-weight: 700; --tweak-blog-item-title-color: hsla(0,0%,0%,1); --portfolio-item-pagination-font-font-size-value: .9; --portfolio-hover-static-title-color: hsla(0,0%,0%,1); --portfolio-item-pagination-font-font-size: .9rem; --portfolio-index-background-title-font-letter-spacing: -.02em; --course-list-grid-layout-chapter-meta-font-font-style: normal; --product-basic-item-description-font-line-height: 1.5em; --product-basic-item-restock-notification-wrap-layout-font-text-transform: none; --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,0%,1); }

Build a landing page in the visual style of Moshimoshimusic. Reference design system (extracted from the live site): - Palette: #19a5e5, #062736, #87d0f1, #947c7c, #bcc4c4 - Typefaces: Libre Baskerville, sans-serif, aktiv-grotesk - 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/moshimoshimusic-com