№ jhey-dev

Jhey

Soft, muted grays and blush, precise sans-serif, open grid breathes quiet clarity.

Specimenminimalism editorial swiss portfoliolight

The page prioritizes a clean, typographic presentation with a focus on showcasing a personal project. The limited color palette and ample whitespace contribute to a sense of clarity and intentionality. · personal portfolio, design engineer, minimalist website, typography focused, signature hero, developer portfolio, clean layout, jhey tompkins, shopify designer, editorial 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: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#f5090f
OKLCHoklch(61.1% 0.248 29)
RoleDominant
find sites →
Hex#7f0407
OKLCHoklch(37.7% 0.151 28)
RoleSurface
find sites →
Hex#fcaeb0
OKLCHoklch(82.6% 0.092 18)
RoleInk
find sites →
Hex#6c6c6c
OKLCHoklch(53.1% 0.000 90)
RoleAccent
find sites →
Hex#c0bcbc
OKLCHoklch(79.8% 0.005 17)
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	Sample
h1	Doto-bb558af012af430a	14px	600	1.43	Aa Bb Cc
body	Inter-280267e3536fdc11	16px	300	1.5	Aa Bb Cc
caption	Doto-bb558af012af430a	14px	600	1.43	Aa Bb Cc

Spacing scale

8px

24px

Radius scale

6px

Container

Max content width 600px

Export

:root {
  --color-dominant: #f5090f;
  --color-surface: #7f0407;
  --color-ink: #fcaeb0;
  --color-accent: #6c6c6c;
  --color-detail: #c0bcbc;
}

/* CSS variables exposed by source */
:root {
  --text-lg: 1.125rem;
  --color-bg: light-dark(#fff,#000);
  --color-neutral-300: oklch(87% 0 0);
  --text-base--line-height: 1.5;
  --spacing: .25rem;
  --spacing-content: 600px;
  --font-size-max: 20;
  --font-mono: Doto-bb558af012af430a,"Doto-bb558af012af430a fallback: Arial",sans-serif;
  --font-ratio-min: 1.2;
  --font-weight-semibold: 600;
  --text-sm: .875rem;
  --font-width-min: 375;
  --text-lg--line-height: calc(1.75/1.125);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-white: #fff;
  --spacing-gutter: 1.5rem;
  --font-sans: Inter-280267e3536fdc11,"Inter-280267e3536fdc11 fallback: Arial",sans-serif;
  --text-4xl: 2.25rem;
  --font-weight-bold: 700;
  --color-red-500: oklch(63.7% .237 25.331);
  --text-sm--line-height: calc(1.25/.875);
  --color-black: #000;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1/.75);
  --font-weight-medium: 500;
  --color-neutral-700: oklch(37.1% 0 0);
  --font-serif: "DM Serif Text-06c75f9b58f80d38","DM Serif Text-06c75f9b58f80d38 fallback: Arial",sans-serif;
  --font-size-min: 14;
  --radius-md: .375rem;
  --spacing-max-content: calc(100vw - (2*1.5rem));
  --font-width-max: 1500;
  --text-4xl--line-height: calc(2.5/2.25);
  --radius-lg: .5rem;
  --font-ratio-max: 1.33;
  --text-base: 1rem;
  --container-md: 28rem;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-inset-shadow-alpha: 100%;
  --header-height: 80px;
  --tw-ring-shadow: 0 0 #0000;
  --leading-relaxed: 1.625;
  --tw-drop-shadow-alpha: 100%;
  --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
  --animate-marquee: marquee 8s linear infinite;
  --tw-outline-style: solid;
  --ease-in: cubic-bezier(.4,0,1,1);
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-translate-z: 0;
  --tw-translate-y: 0;
  --ease-out: cubic-bezier(0,0,.2,1);
  --animate-spin: spin 1s linear infinite;
  --tw-inset-shadow: 0 0 #0000;
  --tw-ring-offset-color: #fff;
  --tw-content: "";
  --tw-shadow-alpha: 100%;
  --tw-border-style: solid;
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --tree-row-h: 1.75rem;
}

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 Jhey.
Reference design system (extracted from the live site):
- Palette: #f5090f, #7f0407, #fcaeb0, #6c6c6c, #c0bcbc
- Typefaces: Doto-bb558af012af430a, Inter-280267e3536fdc11
- Macrostructure: Specimen
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/jhey-dev

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Doto-bb558af012af430a

14px

600

1.43

Aa Bb Cc

body

Inter-280267e3536fdc11

16px

300

1.5

Aa Bb Cc

caption

Doto-bb558af012af430a

14px

600

1.43

Aa Bb Cc

:root { --color-dominant: #f5090f; --color-surface: #7f0407; --color-ink: #fcaeb0; --color-accent: #6c6c6c; --color-detail: #c0bcbc; } /* CSS variables exposed by source */ :root { --text-lg: 1.125rem; --color-bg: light-dark(#fff,#000); --color-neutral-300: oklch(87% 0 0); --text-base--line-height: 1.5; --spacing: .25rem; --spacing-content: 600px; --font-size-max: 20; --font-mono: Doto-bb558af012af430a,"Doto-bb558af012af430a fallback: Arial",sans-serif; --font-ratio-min: 1.2; --font-weight-semibold: 600; --text-sm: .875rem; --font-width-min: 375; --text-lg--line-height: calc(1.75/1.125); --color-red-400: oklch(70.4% .191 22.216); --color-white: #fff; --spacing-gutter: 1.5rem; --font-sans: Inter-280267e3536fdc11,"Inter-280267e3536fdc11 fallback: Arial",sans-serif; --text-4xl: 2.25rem; --font-weight-bold: 700; --color-red-500: oklch(63.7% .237 25.331); --text-sm--line-height: calc(1.25/.875); --color-black: #000; --text-xs: .75rem; --text-xs--line-height: calc(1/.75); --font-weight-medium: 500; --color-neutral-700: oklch(37.1% 0 0); --font-serif: "DM Serif Text-06c75f9b58f80d38","DM Serif Text-06c75f9b58f80d38 fallback: Arial",sans-serif; --font-size-min: 14; --radius-md: .375rem; --spacing-max-content: calc(100vw - (2*1.5rem)); --font-width-max: 1500; --text-4xl--line-height: calc(2.5/2.25); --radius-lg: .5rem; --font-ratio-max: 1.33; --text-base: 1rem; --container-md: 28rem; --tw-ring-offset-shadow: 0 0 #0000; --tw-inset-shadow-alpha: 100%; --header-height: 80px; --tw-ring-shadow: 0 0 #0000; --leading-relaxed: 1.625; --tw-drop-shadow-alpha: 100%; --default-transition-timing-function: cubic-bezier(.4,0,.2,1); --animate-marquee: marquee 8s linear infinite; --tw-outline-style: solid; --ease-in: cubic-bezier(.4,0,1,1); --tw-inset-ring-shadow: 0 0 #0000; --tw-translate-z: 0; --tw-translate-y: 0; --ease-out: cubic-bezier(0,0,.2,1); --animate-spin: spin 1s linear infinite; --tw-inset-shadow: 0 0 #0000; --tw-ring-offset-color: #fff; --tw-content: ""; --tw-shadow-alpha: 100%; --tw-border-style: solid; --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-ring-offset-width: 0px; --tree-row-h: 1.75rem; }

Build a landing page in the visual style of Jhey. Reference design system (extracted from the live site): - Palette: #f5090f, #7f0407, #fcaeb0, #6c6c6c, #c0bcbc - Typefaces: Doto-bb558af012af430a, Inter-280267e3536fdc11 - Macrostructure: Specimen 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/jhey-dev