№ brunocis-co

Bruno Cisco | Senior Creative & Copywriter

Crisp, cool monochrome — bold sans serif adrift on expansive, light-filled space.

Portfolio Gridminimalism monochrome swiss portfoliolight

Bruno Cisco | Senior Creative & Copywriter - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Bruno Cisco | Senior Creative & Copywriter - full page scroll

Bruno Cisco | Senior Creative & Copywriter - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#cbf35b
OKLCHoklch(90.7% 0.181 123)
RoleDominant
find sites →
Hex#d7f583
OKLCHoklch(92.4% 0.144 121)
RoleSurface
find sites →
Hex#738734
OKLCHoklch(59.0% 0.111 121)
RoleInk
find sites →
Hex#7c7c7c
OKLCHoklch(58.6% 0.000 90)
RoleAccent
find sites →
Hex#bcbcbc
OKLCHoklch(79.5% 0.000 90)
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	Inter Tight	76px	500	1.03	-1.5296px	Aa Bb Cc
h3	Inter Tight	33px	500	1.15	-0.6656px	Aa Bb Cc
body	Inter Tight	16px	500	1.4	0	Aa Bb Cc
button	Inter Tight	16px	400	1.4	0	Aa Bb Cc

Spacing scale

44px

80px

120px

Radius scale

0px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #cbf35b;
  --color-surface: #d7f583;
  --color-ink: #738734;
  --color-accent: #7c7c7c;
  --color-detail: #bcbcbc;
}

/* CSS variables exposed by source */
:root {
  --secondary-button-font-font-weight: 500;
  --bg: #e9e9e9;
  --primary-button-font-font-style: normal;
  --secondary-button-font-font-size-value: 1;
  --primary-button-padding-y: 1.5rem;
  --backgroundOverlayColor: hsla(0,0%,100%,.17);
  --primary-button-font-font-size: 1rem;
  --primary-button-font-line-height: 1.2em;
  --ink-idle: #9a9a9a;
  --secondary-button-font-font-family: "Inter Tight";
  --color-accent-2: 217, 217, 217;
  --secondary-button-font-text-transform: none;
  --primaryButtonPadding: 1.2em;
  --color-light: 245, 245, 245;
  --primary-button-rounded-border-bottom-left-radius: 6.4px;
  --text-highlight-color-on-background: hsla(0,0%,0%,1);
  --secondary-button-rounded-border-bottom-right-radius: 500px;
  --primary-button-rounded-border-top-right-radius: 6.4px;
  --secondaryButtonBackgroundColor: hsla(0,0%,0%,1);
  --primary-button-font-font-weight: 700;
  --secondary-button-font-font-style: normal;
  --primary-button-padding-x: 2.2rem;
  --secondary-button-padding-y: .8rem;
  --color-white: 255, 255, 255;
  --primaryButtonTextColor: hsla(0,0%,100%,1);
  --secondary-button-rounded-border-bottom-left-radius: 500px;
  --primaryButtonBackgroundColor: hsla(0,0%,0%,1);
  --primary-button-font-letter-spacing: -.01em;
  --secondary-button-padding-x: 1rem;
  --accent-hsl: 0,0%,85.1%;
  --ink-hover: #000000;
  --secondary-button-font-line-height: 1.2em;
  --secondaryButtonTextColor: hsla(0,0%,100%,1);
  --primary-button-stroke: 0px;
  --primary-button-font-font-family: "Inter Tight";
  --primary-button-rounded-border-top-left-radius: 6.4px;
  --secondary-button-rounded-border-top-left-radius: 500px;
  --secondary-button-stroke: 2px;
  --color-accent: 217, 217, 217;
  --ink: #000000;
  --text-highlight-color: hsla(0,0%,96.08%,1);
  --secondary-button-font-font-size: 1rem;
  --primary-button-font-font-size-value: 1;
  --color-dark: 121, 121, 121;
  --primary-button-rounded-border-bottom-right-radius: 6.4px;
  --secondary-button-font-letter-spacing: 0em;
  --color-black: 0, 0, 0;
  --secondary-button-rounded-border-top-right-radius: 500px;
  --primary-button-font-text-transform: none;
  --tertiary-button-font-font-style: normal;
  --tweak-summary-block-background-color: hsla(0,0%,96.08%,1);
  --tweak-blog-basic-grid-list-meta-color: hsla(0,0%,0%,1);
  --course-item-lesson-name-font-letter-spacing: -.02em;
  --product-basic-item-restock-notification-wrap-layout-font-font-style: normal;
  --content-link-block-title-font-font-weight: 400;
  --portfolio-grid-overlay-title-font-font-size-value: 2;
  --menu-block-item-description-font-letter-spacing: 0em;
  --product-basic-item-title-half-layout-font-font-family: "Inter Tight";
  --quote-block-text-font-font-family: "Inter Tight";
  --quote-block-text-font-font-weight: 400;
}

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 Bruno Cisco | Senior Creative & Copywriter.
Reference design system (extracted from the live site):
- Palette: #cbf35b, #d7f583, #738734, #7c7c7c, #bcbcbc
- Typefaces: Inter Tight
- 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/brunocis-co

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter Tight

76px

500

1.03

-1.5296px

Aa Bb Cc

Inter Tight

33px

500

1.15

-0.6656px

Aa Bb Cc

body

Inter Tight

16px

500

1.4

Aa Bb Cc

button

Inter Tight

16px

400

1.4

Aa Bb Cc

:root { --color-dominant: #cbf35b; --color-surface: #d7f583; --color-ink: #738734; --color-accent: #7c7c7c; --color-detail: #bcbcbc; } /* CSS variables exposed by source */ :root { --secondary-button-font-font-weight: 500; --bg: #e9e9e9; --primary-button-font-font-style: normal; --secondary-button-font-font-size-value: 1; --primary-button-padding-y: 1.5rem; --backgroundOverlayColor: hsla(0,0%,100%,.17); --primary-button-font-font-size: 1rem; --primary-button-font-line-height: 1.2em; --ink-idle: #9a9a9a; --secondary-button-font-font-family: "Inter Tight"; --color-accent-2: 217, 217, 217; --secondary-button-font-text-transform: none; --primaryButtonPadding: 1.2em; --color-light: 245, 245, 245; --primary-button-rounded-border-bottom-left-radius: 6.4px; --text-highlight-color-on-background: hsla(0,0%,0%,1); --secondary-button-rounded-border-bottom-right-radius: 500px; --primary-button-rounded-border-top-right-radius: 6.4px; --secondaryButtonBackgroundColor: hsla(0,0%,0%,1); --primary-button-font-font-weight: 700; --secondary-button-font-font-style: normal; --primary-button-padding-x: 2.2rem; --secondary-button-padding-y: .8rem; --color-white: 255, 255, 255; --primaryButtonTextColor: hsla(0,0%,100%,1); --secondary-button-rounded-border-bottom-left-radius: 500px; --primaryButtonBackgroundColor: hsla(0,0%,0%,1); --primary-button-font-letter-spacing: -.01em; --secondary-button-padding-x: 1rem; --accent-hsl: 0,0%,85.1%; --ink-hover: #000000; --secondary-button-font-line-height: 1.2em; --secondaryButtonTextColor: hsla(0,0%,100%,1); --primary-button-stroke: 0px; --primary-button-font-font-family: "Inter Tight"; --primary-button-rounded-border-top-left-radius: 6.4px; --secondary-button-rounded-border-top-left-radius: 500px; --secondary-button-stroke: 2px; --color-accent: 217, 217, 217; --ink: #000000; --text-highlight-color: hsla(0,0%,96.08%,1); --secondary-button-font-font-size: 1rem; --primary-button-font-font-size-value: 1; --color-dark: 121, 121, 121; --primary-button-rounded-border-bottom-right-radius: 6.4px; --secondary-button-font-letter-spacing: 0em; --color-black: 0, 0, 0; --secondary-button-rounded-border-top-right-radius: 500px; --primary-button-font-text-transform: none; --tertiary-button-font-font-style: normal; --tweak-summary-block-background-color: hsla(0,0%,96.08%,1); --tweak-blog-basic-grid-list-meta-color: hsla(0,0%,0%,1); --course-item-lesson-name-font-letter-spacing: -.02em; --product-basic-item-restock-notification-wrap-layout-font-font-style: normal; --content-link-block-title-font-font-weight: 400; --portfolio-grid-overlay-title-font-font-size-value: 2; --menu-block-item-description-font-letter-spacing: 0em; --product-basic-item-title-half-layout-font-font-family: "Inter Tight"; --quote-block-text-font-font-family: "Inter Tight"; --quote-block-text-font-font-weight: 400; }

Build a landing page in the visual style of Bruno Cisco | Senior Creative & Copywriter. Reference design system (extracted from the live site): - Palette: #cbf35b, #d7f583, #738734, #7c7c7c, #bcbcbc - Typefaces: Inter Tight - 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/brunocis-co