CRED

CRED's design system, NeoPOP, is a fusion of Neomorphism and Pop Art. It is a luxury-first, high-contrast environment designed to make financial management f…

High Quality

Join 0+ developers using this skill

skill

Designs

intermediate

0 installs

4/5 quality

View Source

Last updated: June 19, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Install Command

Source: https://github.com/whyashthakker/design-md-templates-skills?ref=explainx

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

Design System: CRED (NeoPOP)

Overview

CRED's design system, NeoPOP, is a fusion of Neomorphism and Pop Art. It is a luxury-first, high-contrast environment designed to make financial management feel like a high-stakes game.

Design Philosophy

The Art of Finance: Rejects the "boring" look of traditional banking for a retro-futuristic, pop-art aesthetic.
Hard Geometry: Intentionally avoids border-radius (0px) to create a sense of rigid, "engineered" precision.
High Elevation: Uses hard, non-blurred shadows to create 3D depth, making components feel like physical "blocks" on a screen.
Vibrant Voltage: Uses neon-like "voltage" colors (Purple, Green, Orange) against a deep black canvas to create visual "pop."

Colors

Neo Paccha (#E5FE40): A vibrant, neon-green used for primary status indicators and brand energy.
Poli Purple (#6A35FF): A deep, saturated purple used for primary actions and CTA highlights.
Pop Black (#0D0D0D): The signature "pure" background that provides the foundation for the high-contrast elements.

Typography

Gilroy: A geometric sans-serif that provides a clean, premium, and confident voice.
Extreme Contrast: Uses Heavy/Black weights for numbers and headers to create a "monumental" feel.

Components

The Neomorphic Card: Hard-edged blocks with distinct "light" and "shadow" sides to simulate physical depth.
Credit Score Meter: A signature, multi-colored arc with hard shadows and vibrant gradients.
Action Buttons: Large, rectangular blocks with solid color fills and zero rounding.

Visual Effects

Hard Shadows: Uses 4px 4px 0px #000000 or similar hard shadows rather than soft blurs.
Mesh Gradients: Backgrounds often feature slow-moving, dark mesh gradients to add depth to the black canvas.
Tactile Feedback: Every interaction is accompanied by a fast, precise animation and haptic-like visual response.

CRED

AI Skill Market Insights

Quick Start

Install Command

TEAR & SHARE

Tags

Raycast

Be Part of the 0+ Developer Community

Design System: CRED (NeoPOP)

Overview

Design Philosophy

Colors

Typography

Components

Visual Effects

License

MongoDB

NVIDIA

Mintlify

Spotify

Channels

Learn

Compare

Company

Agents