№ mixpotion-co

Potion

Grainy neon alchemy, bold white serifs floating on deep velvet purple

Marquee Heroplayful vintage dark mode food beverage ecommercedark

High-energy composition featuring a grainy purple gradient background and a bold, high-contrast serif headline. The product photography is centered and vibrant, creating a modern alchemy aesthetic. · vibrant ecommerce hero, grainy gradient background, bold serif typography, supplement landing page, saturated purple design

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: saturated · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#d25c25
OKLCHoklch(61.5% 0.163 43)
RoleDominant
find sites →
Hex#cd5f5b
OKLCHoklch(62.0% 0.141 24)
RoleSurface
find sites →
Hex#8ca404
OKLCHoklch(67.6% 0.159 120)
RoleInk
find sites →
Hex#6c4494
OKLCHoklch(47.0% 0.130 305)
RoleAccent
find sites →
Hex#c6b7c7
OKLCHoklch(79.7% 0.028 324)
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
h1	GT Alpina Condensed	150px	100	0.86	-3px	Aa Bb Cc
h2	Neue Montreal	16px	400	1.3	0.6px	Aa Bb Cc
h3	Neue Montreal	20px	400	1.15	0.4px	Aa Bb Cc
body	Neue Montreal	16px	400	1.5	0	Aa Bb Cc
caption	Neue Montreal	13px	400	1.5	0.4px	Aa Bb Cc
button	GT Alpina	16px	400	1.2	-0.5px	Aa Bb Cc

Spacing scale

5px

6px

8px

10px

16px

18px

20px

22px

28px

36px

40px

44px

56px

Radius scale

0px

6px

8px

14px

20px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #d25c25;
  --color-surface: #cd5f5b;
  --color-ink: #8ca404;
  --color-accent: #6c4494;
  --color-detail: #c6b7c7;
}

/* CSS variables exposed by source */
:root {
  --text-boxes-shadow-visible: 0;
  --font-heading-style: normal;
  --spacing-sections-desktop: 0px;
  --color-badge-foreground: 18,18,18;
  --font-body-family: 'Neue Montreal', sans-serif;
  --color-background: 0,0,0;
  --color-badge-background: 0,0,0;
  --color-button-text: 255,255,255;
  --spacing-sections-mobile: 0px;
  --color-button: 18,18,18;
  --font-body-weight-bold: 700;
  --color-secondary-button: 0,0,0;
  --font-heading-scale: 1.0;
  --text-boxes-border-width: 0px;
  --color-shadow: 18,18,18;
  --color-background-contrast: 128,128,128;
  --text-boxes-shadow-blur-radius: 5px;
  --text-boxes-radius: 0px;
  --rounded: 2rem;
  --font-body-style: normal;
  --color-secondary-button-text: 18,18,18;
  --font-body-weight: 400;
  --text-boxes-shadow-horizontal-offset: 0px;
  --text-boxes-shadow-vertical-offset: 4px;
  --font-heading-family: 'Neue Montreal', sans-serif;
  --color-foreground: 18,18,18;
  --font-body-scale: 1.0;
  --text-boxes-shadow-opacity: 0.0;
  --font-heading-weight: 500;
  --text-boxes-border-opacity: 0.1;
  --color-link: 18,18,18;
  --color-badge-border: 18,18,18;
  --inputs-shadow-opacity: 0.0;
  --header-height: 90px;
  --tw-ring-shadow: 0 0 #0000;
  --buttons-shadow-horizontal-offset: 0px;
  --collection-card-shadow-opacity: 0.0;
  --focused-base-box-shadow: 0 0 0 .3rem rgb(0,0,0), 0 0 .5rem .4rem rgba(18,18,18, .3);
  --drawer-shadow-opacity: 0.0;
  --blog-card-border-opacity: 0.1;
  --top-h: 220px;
  --drawer-shadow-blur-radius: 5px;
  --alpha-link: .85;
  --media-border-width: 1px;
  --sparkle: url(./sparkle.gif);
  --variant-pills-border-width: 1px;
  --blog-card-shadow-visible: 0;
  --blog-card-corner-radius: 0.0rem;
  --tw-border-spacing-x: 0;
  --collection-card-border-opacity: 0.1;
  --buttons-border-opacity: 1.0;
  --duration-long: .5s;
  --page-width-margin: 0rem;
  --buttons-radius-outset: 0px;
  --jdgm-secondary-color: rgba(146,127,181,0.1);
  --tw-ring-color: rgb(59 130 246 / .5);
  --inputs-border-width: 1px;
  --variant-pills-shadow-vertical-offset: 4px;
  --inputs-border-opacity: 0.55;
  --grid-mobile-vertical-spacing: 2px;
}

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 Potion.
Reference design system (extracted from the live site):
- Palette: #d25c25, #cd5f5b, #8ca404, #6c4494, #c6b7c7
- Typefaces: GT Alpina Condensed, Neue Montreal
- Macrostructure: Marquee Hero
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/mixpotion-co

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

GT Alpina Condensed

150px

100

0.86

-3px

Aa Bb Cc

Neue Montreal

16px

400

1.3

0.6px

Aa Bb Cc

Neue Montreal

20px

400

1.15

0.4px

Aa Bb Cc

body

Neue Montreal

16px

400

1.5

Aa Bb Cc

caption

Neue Montreal

13px

400

1.5

0.4px

Aa Bb Cc

button

GT Alpina

16px

400

1.2

-0.5px

Aa Bb Cc

:root { --color-dominant: #d25c25; --color-surface: #cd5f5b; --color-ink: #8ca404; --color-accent: #6c4494; --color-detail: #c6b7c7; } /* CSS variables exposed by source */ :root { --text-boxes-shadow-visible: 0; --font-heading-style: normal; --spacing-sections-desktop: 0px; --color-badge-foreground: 18,18,18; --font-body-family: 'Neue Montreal', sans-serif; --color-background: 0,0,0; --color-badge-background: 0,0,0; --color-button-text: 255,255,255; --spacing-sections-mobile: 0px; --color-button: 18,18,18; --font-body-weight-bold: 700; --color-secondary-button: 0,0,0; --font-heading-scale: 1.0; --text-boxes-border-width: 0px; --color-shadow: 18,18,18; --color-background-contrast: 128,128,128; --text-boxes-shadow-blur-radius: 5px; --text-boxes-radius: 0px; --rounded: 2rem; --font-body-style: normal; --color-secondary-button-text: 18,18,18; --font-body-weight: 400; --text-boxes-shadow-horizontal-offset: 0px; --text-boxes-shadow-vertical-offset: 4px; --font-heading-family: 'Neue Montreal', sans-serif; --color-foreground: 18,18,18; --font-body-scale: 1.0; --text-boxes-shadow-opacity: 0.0; --font-heading-weight: 500; --text-boxes-border-opacity: 0.1; --color-link: 18,18,18; --color-badge-border: 18,18,18; --inputs-shadow-opacity: 0.0; --header-height: 90px; --tw-ring-shadow: 0 0 #0000; --buttons-shadow-horizontal-offset: 0px; --collection-card-shadow-opacity: 0.0; --focused-base-box-shadow: 0 0 0 .3rem rgb(0,0,0), 0 0 .5rem .4rem rgba(18,18,18, .3); --drawer-shadow-opacity: 0.0; --blog-card-border-opacity: 0.1; --top-h: 220px; --drawer-shadow-blur-radius: 5px; --alpha-link: .85; --media-border-width: 1px; --sparkle: url(./sparkle.gif); --variant-pills-border-width: 1px; --blog-card-shadow-visible: 0; --blog-card-corner-radius: 0.0rem; --tw-border-spacing-x: 0; --collection-card-border-opacity: 0.1; --buttons-border-opacity: 1.0; --duration-long: .5s; --page-width-margin: 0rem; --buttons-radius-outset: 0px; --jdgm-secondary-color: rgba(146,127,181,0.1); --tw-ring-color: rgb(59 130 246 / .5); --inputs-border-width: 1px; --variant-pills-shadow-vertical-offset: 4px; --inputs-border-opacity: 0.55; --grid-mobile-vertical-spacing: 2px; }

Build a landing page in the visual style of Potion. Reference design system (extracted from the live site): - Palette: #d25c25, #cd5f5b, #8ca404, #6c4494, #c6b7c7 - Typefaces: GT Alpina Condensed, Neue Montreal - Macrostructure: Marquee Hero 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/mixpotion-co