NeoPOP Master — CRED's 4th Generation Design Language

1. PHILOSOPHY

• Democratises "high art" by making premium aesthetic accessible via UI.
• Elevates everyday objects — a button is not a rectangle; it is a three-dimensional object in space.
• Refuses skeuomorphism in the traditional sense, yet re-introduces physicality through constructed geometry.
• Is affirmative, not neutral. Every element asserts its presence. There is no quiet UI.

• "Art belongs to everyone."
• "Bring art to life — perceptible every time they open the app, touch a button, move a slider."
• "Every feature, every little piece of design, looks just like it did on a designer's screen."

2. COLOR SYSTEM

Foundation palette

Color mechanics (critical)

• The center surface (face) has a base color.
• The right shadow surface = a darker, more saturated horizontal shift of the base.
• The bottom shadow surface = a darker, slightly cooler vertical shift of the base.
• The top surface = computed from the parentColor (the container behind the button).
• The left surface = computed from grandparentColor (the container's container).

Neon on dark

3. SURFACE MODEL — The 5-Surface System

        ┌──────────────────────┐
       /          TOP          /|
      /______________________/ |
      |                      | |
      |       CENTER         | RIGHT
      |      (face)          | |
      |                      |/
      └──────────────────────┘
             BOTTOM

Button positions

• Position.fullBottom — right and bottom surfaces visible. Most common. Button sits on its "floor".
• Position.center — all surfaces computed relative to parent and grandparent colors. Use for nested buttons.
• Position.fullTop — top and right surfaces visible. Button "hangs from the ceiling".
• Position.topLeft / topRight / bottomLeft / bottomRight — corner positions with two surfaces visible.

4. COMPONENT VOCABULARY

NeoPopButton

• Elevated — depth surfaces visible (right + bottom). Looks physically raised from the surface.
• Flat — Position.center, no visible depth surfaces. Appears embedded in the background.
• Elevated + Stroke — elevated with a border around the face; used for secondary actions.
• Flat + Stroke — flat with a colored border; the border IS the affordance.

• depth — pixel distance of the side surfaces (default 3dp). Controls how "tall" the 3D effect appears.
• animationDuration — how fast the button presses (default 50ms). Very fast = tactile, physical.
• onTapDown + onTapUp — always pair with HapticFeedback.vibrate(). The press is felt, not just seen.
• enabled → disabledColor — disabled state is a visual dimming, not a layout change.

• Use Position.fullBottom for all buttons in the group.
• The shared edge between buttons creates a visual "groove" — the depth surfaces of adjacent buttons form a continuous line.
• Vary colors (e.g., primary yellow + secondary dark) rather than sizes.

NeoPopTiltedButton

• isFloating: true — enables the continuous up-down floating animation (1500ms cycle, 750ms delay between cycles).
• plunkColor — the color of the "plunk" — the thick extruded side that gives the tilted button its sense of weight. This is NOT a shadow. It is a physical slab.
• shadowColor — the soft shadow cast beneath the floating button. Unlike normal NeoPOP depth, the floating button DOES cast a blurred shadow below it.
• buttonDepth: 8.0 — default depth of the extruded side on tilted buttons.
• showShimmer — shimmer animation passes across the face surface, signaling interactability.

NeoPopShimmer

• Signal loading states (skeleton shimmer).
• Add life to otherwise static elements.
• Draw attention to a CTA without motion (shimmer instead of pulsing).

NeoPopQuadFrameLayout (Android)

5. TYPOGRAPHY

• Titles in Cirka feel like editorial statements, not UI labels. They have weight and authority.
• Body in Gilroy keeps legibility without competing with Cirka's personality.
• Overpass Mono for any numeric value — payment amounts, card numbers, transaction IDs. The mono grid reinforces data precision.
• No rounded, playful sans-serifs. No Inter, no Poppins, no Nunito. NeoPOP is not friendly-startup — it is premium-retro.
• Color on type: on dark backgrounds, white for primary text. Yellow/gold for accent values (amounts, rewards). Green for success/confirmation.

6. LAYOUT & GRID

• Corners are sharp. Zero border radius in the NeoPOP language. Every element is a hard rectangle or polygon. Rounded corners signal a different design era.
• Dark theme first. The entire system defaults to near-black backgrounds. Light mode exists but is secondary.
• High information density. NeoPOP screens are not minimal. They use the full spatial dimension — cards overlap, buttons float, headers dominate.
• Isometric spatial logic. When elements have depth, they follow a consistent 3D viewing angle: camera from upper-left, depth extending lower-right. Never mix depth directions on one screen.
• Margin: 24dp standard horizontal padding. Content goes edge-to-edge only for hero banners.

7. MOTION & INTERACTION

Button press

• Duration: 50ms forward, 50ms reverse. Instant. The button physically depresses and springs back.
• The right and bottom surfaces compress — they don't disappear, they narrow.
• Always paired with haptic feedback. The visual and tactile happen simultaneously.

Floating animation (NeoPopTiltedButton)

• Cycle: 1500ms up-and-down. 750ms pause. Then repeat.
• Amplitude: controlled by yPosFactor: 5 — gentle, not dramatic.
• Shadow tracks the button: when button rises, shadow spreads and lightens; when button descends, shadow tightens and darkens.

Shimmer

• Sweeps left to right across the face surface.
• Color: typically white or yellow, 60% opacity.
• Width: wide (24–36dp). Not a thin highlight — a bold sweep.
• Duration: 2–5 seconds per pass, with delay between passes.

Screen transitions

• NeoPOP does not use slide or fade transitions in the conventional sense.
• Elements enter from below (cards rising into frame) or scale from a tap point (detail view expanding).
• No ease-in-out curves borrowed from iOS defaults. Custom bezier curves that feel snappy (fast in, gentle overshoot, settle).

8. DESIGN LANGUAGE — VISUAL DECISIONS

When designing in NeoPOP, always ask:

1. Is this element physically grounded? Can I explain which surface it sits on and what color its depth planes would be?
2. Is the depth consistent with the camera angle? Bottom-right depth for full-bottom positioned elements. Never mix.
3. Does the accent color earn its place? Yellow CTAs are reserved for primary actions. Green for secondary/confirmation. White for structural hierarchy. Never use accent colors decoratively.
4. Are borders structural or decorative? In NeoPOP, a border is a structural edge — it defines the face plane of a surface. Borders should be 1–2px, sharp, and color-matched to the accent of the depth plane.
5. Is the shimmer saying something? Shimmer = interactable + premium. Don't shimmer static text. Don't shimmer disabled states.

What NeoPOP is NOT:

• Not glassmorphism — no transparency blur. Depth is solid geometry, not frosted glass.
• Not neumorphism — no inner shadows, no extruded-from-background illusions.
• Not flat design — every interactive element has a physical model.
• Not gradient-heavy — color is solid. Gradients are reserved for ambient backgrounds and very specific reward-tier indicators.
• Not rounded — zero border-radius. If something has rounded corners, it is not NeoPOP.
• Not white-primary — the system lives in dark. Light elements are intentional high-contrast moments.

9. COLOR PALETTE — IMPLEMENTATION TOKENS

/* NeoPOP Core Tokens */
--neopop-black:        #0D0D0D;
--neopop-near-black:   #1C1C1C;
--neopop-white:        #FFFFFF;
--neopop-yellow:       #FFEB34;
--neopop-yellow-plunk: #C9AB00;   /* depth surface for yellow buttons */
--neopop-green:        #8DD04A;
--neopop-green-plunk:  #3F6915;   /* depth surface for green buttons */
--neopop-green-shadow: #2A4A0F;   /* bottom shadow for green elevated */
--neopop-border-white: rgba(255,255,255,0.6);
--neopop-border-green: #8DD04A;
--neopop-shimmer:      rgba(255,255,255,0.6);

/* Typography */
--neopop-font-display: 'Cirka', Georgia, serif;
--neopop-font-body:    'Gilroy', 'Inter', sans-serif;
--neopop-font-mono:    'Overpass Mono', 'Courier New', monospace;

/* Depth */
--neopop-depth-sm:     3px;
--neopop-depth-md:     5px;
--neopop-depth-lg:     8px;   /* tilted buttons */

/* Animation */
--neopop-press-duration:   50ms;
--neopop-float-duration:   1500ms;
--neopop-float-delay:      750ms;
--neopop-shimmer-duration: 2000ms;

10. SVG / HTML IMPLEMENTATION RULES

For buttons:

• Draw the face rectangle at a slight Y offset (depth-md upward from bottom).
• Draw the right surface as a parallelogram: rightmost edge of face → same edge + depth offset diagonally down-right.
• Draw the bottom surface as a parallelogram: bottom edge of face → same edge + depth offset diagonally down-right.
• Use --neopop-yellow-plunk or --neopop-green-plunk for side surfaces. Never use the same color as the face.
• For elevated+stroke, add a 1px rectangle stroke in border color on the face only.

For tilted buttons:

• Apply transform: skew(-10deg, 0deg) or rotate(-8deg) depending on the direction.
• Extrude the "plunk" as a visible thick edge on the lower-left side.
• Add a box-shadow: 0 20px 40px rgba(0,0,0,0.6) below — the only time blur shadow is allowed.

For cards:

• Sharp corners only.
• Face color: #1C1C1C or #FFFFFF depending on hierarchy.
• Depth: 3–5px bottom-right surfaces in a darker shade.
• Borders: 1px --neopop-border-white or --neopop-border-green.

For shimmer:

• Use a CSS linear-gradient animation (@keyframes shimmer) sweeping left to right.
• Gradient: transparent → rgba(255,255,255,0.5) → transparent.
• Width: 40% of the element. Speed: 1.5–2s.

11. COMPONENT PATTERNS FOR PRODUCTION

Primary CTA (Yellow Elevated)

Face:         #FFEB34  (Yellow)
Right:        #C9AB00  (Yellow-plunk)
Bottom:       #C9AB00  (Yellow-plunk)
Border:       none
Text:         #0D0D0D  (Black — high contrast on yellow)
Depth:        5px
Press:        50ms

Secondary CTA (Dark Elevated + Green Stroke)

Face:         #1C1C1C  (Dark)
Right:        #2A4A0F  (Dark green shadow)
Bottom:       #2A4A0F  (Dark green shadow)
Border:       1px #8DD04A
Text:         #FFFFFF  (White)
Depth:        5px
Press:        50ms

Flat Button (Black + White Stroke)

Face:         #0D0D0D
Right:        none (flat — no depth surfaces)
Bottom:       none
Border:       1px rgba(255,255,255,0.6)
Text:         #FFFFFF
Depth:        0

Hero Tilted Button (Floating Yellow)

Face:         #FFEB34
Plunk:        #C9AB00
Shadow:       rgba(36,36,36,1) — at 20px distance
Shimmer:      white, 2s, showShimmer: true
isFloating:   true
buttonDepth:  8px

Card / Frame

Background:   #1C1C1C
Border:       1px rgba(255,255,255,0.12)
Right surface: #111111
Bottom surface: #111111
Corner radius: 0px (ALWAYS zero)

12. ADJACENT BUTTON GROUPS

• Both buttons use Position.fullBottom.
• Top button has no bottom shadow (visually shared edge).
• Bottom button carries the full depth.
• Colors contrast: one yellow, one dark/green.

• Both in a Row, each Expanded.
• Same depth value so the bottom surfaces align perfectly.
• The shared vertical edge between them forms a seamless groove.
• Never use different border thicknesses between adjacent buttons.

13. CHECKLIST — BEFORE OUTPUT

• Zero border-radius everywhere
• Background is dark (#0D0D0D or #1C1C1C) unless explicitly a light-mode design
• Depth surfaces are geometrically consistent (bottom-right camera angle)
• Side surface colors are darker/more saturated than face — never brighter
• Primary CTA is yellow; secondary is dark+green stroke or white
• Typography: Cirka for display, Gilroy for body, Overpass Mono for numbers
• No blurred drop shadows except beneath floating tilted buttons
• Shimmer only on interactive or premium elements
• Haptic feedback paired with every button press in code
• No gradients on buttons; no glassmorphism; no rounded corners
• If adjacent buttons: shared edge logic applied

14. ANTI-PATTERNS (NEVER DO THESE IN NEOPOP)

15. QUICK REFERENCE — SURFACE COMPUTATION FORMULA

rightShadowColor  = darken(faceColor, 25%) + shift_hue(faceColor, -10deg)
bottomShadowColor = darken(faceColor, 30%) + shift_saturation(faceColor, +5%)
topSurfaceColor   = parentColor (direct container background)
leftSurfaceColor  = grandparentColor (parent's container background)

• White button on black → right: #999, bottom: #808080, top: #000, left: #000
• Yellow button on black → right: #C9AB00, bottom: #C9AB00, top: #000, left: #000
• Green-stroked button on black → right: #2A4A0F, bottom: #2A4A0F, top: #000, left: #000