№ kidzfrmnowhere-com

Kidzfrmnowhere

Electric lime sharpness cuts through layered concrete and deep, shadowy depths.

Bento Gridminimalism editorial dark mode playful agency portfoliodark

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.

SwatchHexOKLCHSuggested roleCopy

Hex#0cca0c
OKLCHoklch(72.8% 0.245 143)
RoleDominant
find sites →
Hex#3cf03c
OKLCHoklch(83.5% 0.258 143)
RoleSurface
find sites →
Hex#058507
OKLCHoklch(53.5% 0.179 143)
RoleInk
find sites →
Hex#9e7869
OKLCHoklch(60.6% 0.053 43)
RoleAccent
find sites →
Hex#abc1cd
OKLCHoklch(79.8% 0.029 232)
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
h3	neue-haas-grotesk	12px	400	1.33	0	Aa Bb Cc
body	neue-haas-grotesk	16px	400	1.5	0	Aa Bb Cc

Export

:root {
  --color-dominant: #0cca0c;
  --color-surface: #3cf03c;
  --color-ink: #058507;
  --color-accent: #9e7869;
  --color-detail: #abc1cd;
}

/* CSS variables exposed by source */
:root {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --green: #0ac90a;
  --tw-skew-x: 0;
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --tw-scroll-snap-strictness: proximity;
  --tw-border-spacing-x: 0;
  --tw-scale-x: 1;
  --tw-shadow-colored: 0 0 #0000;
  --tw-border-spacing-y: 0;
  --tw-scale-y: 1;
  --tw-skew-y: 0;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-ring-offset-color: #fff;
}

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 Kidzfrmnowhere.
Reference design system (extracted from the live site):
- Palette: #0cca0c, #3cf03c, #058507, #9e7869, #abc1cd
- Typefaces: neue-haas-grotesk
- Macrostructure: Bento 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/kidzfrmnowhere-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

neue-haas-grotesk

12px

400

1.33

Aa Bb Cc

body

neue-haas-grotesk

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #0cca0c; --color-surface: #3cf03c; --color-ink: #058507; --color-accent: #9e7869; --color-detail: #abc1cd; } /* CSS variables exposed by source */ :root { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --green: #0ac90a; --tw-skew-x: 0; --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-ring-offset-width: 0px; --tw-scroll-snap-strictness: proximity; --tw-border-spacing-x: 0; --tw-scale-x: 1; --tw-shadow-colored: 0 0 #0000; --tw-border-spacing-y: 0; --tw-scale-y: 1; --tw-skew-y: 0; --tw-ring-color: rgb(59 130 246 / .5); --tw-translate-y: 0; --tw-rotate: 0; --tw-ring-offset-color: #fff; }

Build a landing page in the visual style of Kidzfrmnowhere. Reference design system (extracted from the live site): - Palette: #0cca0c, #3cf03c, #058507, #9e7869, #abc1cd - Typefaces: neue-haas-grotesk - Macrostructure: Bento 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/kidzfrmnowhere-com