Freelance Designer & Growth Partner

The design aesthetic is high-contrast and authoritative, built upon a "Neon on Noir" core. The mood is premium and industrial, characterized by a vibrant neon-yellow accent against a deep, matte-black background. Composition relies on extreme vertical scale and negative space, anchored by a full-bleed, nested-frame structure that creates a "monitor-within-a-monitor" focus.

Primary Accent#CCFF00
Secondary/Interactive#7B61FF
Surfaces#111111
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

display-lgBlinkMacSystemFont · 64px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-mdBlinkMacSystemFont · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-mdJetBrains Mono · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

The design aesthetic is high-contrast and authoritative, built upon a "Neon on Noir" core. The mood is premium and industrial, characterized by a vibrant neon-yellow accent against a deep, matte-black background. Composition relies on extreme vertical scale and negative space, anchored by a full-bleed, nested-frame structure that creates a "monitor-within-a-monitor" focus.

Components

Buttons

Nav Link

Default

Cards

Card Title

Sample body text for the card component.

Do's & Don'ts

Do

Prioritize massive, tight-leading headlines to maintain the editorial, "poster" style.
Keep background imagery at low opacity (approx. 60%) with luminosty blend mode to ensure text remains legible.

Don't

Drift from the primary color palette; only use purple for CTA components.
Use standard drop shadows; leverage gradient mask method for premium edge-lit aesthetic.
Layout

• Frame: The viewport acts as a secondary border, with padding (p-3 to p-8) defining a structural "gutter" that separates content from the edge.

• Container: A central flex-column architecture utilizes flex-grow to ensure content spans the full available height.

• Rhythm: Spacing is non-linear; the top of the container uses heavy vertical padding (12-24 units) to force the headline to the center-top, while the base employs auto-margins to anchor footer content to the bottom edge.

Shapes

• Radius Hierarchy: Rounded-2xl to rounded-[2rem] is used for the primary container to soften the industrial black box.

• Geometry: Iconography and UI elements (buttons/chips) follow a strict pill-shape (full-radius).

• Identity: The logo mark utilizes a 2x2 grid system with 1px/2px corner radii, maintaining a pixel-perfect, modular design language.

Motion

• Entrance: Hero text utilizes a vertical mask-reveal (y: 100% to 0%) with power4.out easing, staggered by 0.1s.

• Sequence: Content elements at the base of the design (location, secondary links) employ a fade-in/slide-up reveal with a power3.out curve.

• Ambient: All hero imagery must include a long-duration (10s) slow-zoom effect (scale 1.05 to 1.0) to provide a subtle "living" quality without causing distraction.
Download .md
Bruno Petrovic Bruno Petrovic @brunopetrovic
License MIT
Uploaded 1 weeks ago
Version v1
File size 5.1 KB
Downloads 22
Copies 8
clean dark minimal premium saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/brunopetrovic/freelance-designer-growth-partner and implement it in my code

Don't have the MCP? Install it here