Freelance Designer & Growth PartnerDESIGN.md alpha

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#CCFF00
secondary#7B61FF
background#111111
surface#18181B
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.

Corner Radius

8px
9999px

Spacing

Base: 8px
8px
16px
24px
80px

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.
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 3 weeks ago
Version v1
File size 5.1 KB
Downloads 25
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