Untitled Design System

Enterprise Payment Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments.

Primary#10B981
Secondary#F87171
Tertiary#FBBF24
Neutral#050505
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

display-lgInter · 48px · Medium

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

body-mdJetBrains Mono · 12px · Regular

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

label-mdInter · 14px · Medium

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

Enterprise Payment Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Elevation & Depth

card-shadow

Do's & Don'ts

Do

Use the primary palette as the main accent for emphasis and action states.
Keep spacing aligned to the detected 4px rhythm.
Reuse the Glass surface treatment consistently across cards and controls.
Keep corner radii within the detected 6px, 16px, 40px, 9999px family.

Don't

Introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.
Mix unrelated shadow or blur recipes that break the current depth system.
Exceed the detected moderate motion intensity without a deliberate reason.
Layout

Layout follows a flex composition with reusable spacing tokens. Preserve the flex, bounded structural frame before changing ornament or component styling. Use 4px as the base rhythm and let larger gaps step up from that cadence instead of introducing unrelated spacing values.

Treat the page as a flex / bounded composition, and keep that framing stable when adding or remixing sections.

• Layout type: Flex

• Content width: Bounded

• Base unit: 4px

• Scale: 1px, 4px, 6px, 8px, 10px, 12px, 14px, 16px

• Section padding: 32px, 56px

• Card padding: 9px, 32px, 56px

• Gaps: 8px, 10px, 16px, 32px

Shapes

Shapes rely on a tight radius system anchored by 6px and scaled across cards, buttons, and supporting surfaces. Icon geometry should stay compatible with that soft-to-controlled silhouette.

Use the radius family intentionally: larger surfaces can open up, but controls and badges should stay within the same rounded DNA instead of inventing sharper or pill-only exceptions.

• Corner radii: 6px, 16px, 40px, 9999px

• Icon treatment: Linear

• Icon sets: Solar

Motion

Motion feels controlled and interface-led across text, layout, and section transitions. Timing clusters around 150ms and 500ms. Easing favors ease and cubic-bezier(0.4. Hover behavior focuses on text and grayscale changes. Scroll choreography uses GSAP ScrollTrigger and Parallax for section reveals and pacing.

Motion Level: moderate

Durations: 150ms, 500ms

Easings: ease, cubic-bezier(0.4, 0, 0.2, 1)

Hover Patterns: text, grayscale, color

Scroll Patterns: gsap-scrolltrigger, parallax
Download .md
Bruno Petrovic Bruno Petrovic @brunopetrovic
License MIT
Uploaded 1 weeks ago
Version v1
File size 7.7 KB
Downloads 6
Copies 0
dark dashboard fintech minimal saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/brunopetrovic/enterprize and implement it in my code

Don't have the MCP? Install it here