Skip to content

Instantly share code, notes, and snippets.

@eonist

eonist/crowdfunding.md

Created May 30, 2025 05:26
Show Gist options
  • Save eonist/fd4face6f0de1d0439de46bab46b7ff5 to your computer and use it in GitHub Desktop.
Save eonist/fd4face6f0de1d0439de46bab46b7ff5 to your computer and use it in GitHub Desktop.
Download ZIP
crowdfunding UI
Raw
crowdfunding.md

This crowdfunding UI design can be broken down into several key components that can be recreated in Figma using frames, auto-layout, and proper styling. Here's a comprehensive breakdown:

Main Container Frame

  • Frame: Main container with vertical auto-layout
  • Background: Dark gray/black (#1A1A1A or similar)
  • Padding: 24px all sides
  • Corner radius: 16px
  • Spacing between children: 20px

Progress Section Frame

  • Frame: Horizontal auto-layout container
  • Background: Transparent
  • Padding: 16px all sides
  • Corner radius: 12px
  • Border: 1px solid gray (#333333)

Progress Bar Component

  • Container frame: Width 100%, height 24px
  • Background bars:
    • Active bars (left): Bright yellow/lime (#CCFF00), width 4px each
    • Inactive bars (right): Dark gray (#404040), width 4px each
  • Spacing: 2px between bars
  • Total bars: ~25 bars
  • Progress indicators: Text labels "0", "25", "50", "75", "100" positioned above

Amount Display

  • Frame: Vertical auto-layout
  • Main amount:
    • Font: Bold, 48px
    • Color: White (#FFFFFF)
    • Text: "€ 2,565"
  • Subtitle:
    • Font: Regular, 14px
    • Color: Light gray (#CCCCCC)
    • Text: "pledged of €5,000 goal"

Stats Grid Frame

  • Frame: Horizontal auto-layout with 3 equal columns
  • Spacing: 12px between items
  • Distribution: Fill container equally

Individual Stat Cards (3x)

  • Frame: Vertical auto-layout
  • Background: Dark gray (#2A2A2A)
  • Padding: 20px
  • Corner radius: 12px
  • Border: 1px solid #333333

Card Content Structure:

  • Number:
    • Font: Bold, 36px
    • Color: White (#FFFFFF)
    • Alignment: Center
  • Label:
    • Font: Regular, 12px
    • Color: Light gray (#CCCCCC)
    • Alignment: Center
    • Margin top: 8px

Card 1: "54" / "backers" Card 2: "52" / "% complete"
Card 3: "15" / "days to go"

Description Text

  • Frame: Auto-layout container
  • Text: "All or nothing. This project will only be funded if it reaches its goal by Fri 15 December."
  • Font: Regular, 14px
  • Color: Medium gray (#888888)
  • Line height: 1.4
  • Padding: 16px horizontal

Button Container Frame

  • Frame: Horizontal auto-layout
  • Spacing: 16px between buttons
  • Alignment: Center

Primary Button

  • Frame: Auto-layout container
  • Background: Orange/yellow gradient (#FFB800 to #FF8A00)
  • Padding: 16px horizontal, 12px vertical
  • Corner radius: 8px
  • Text: "Back this project"
  • Font: Medium, 16px
  • Color: Black (#000000)

Secondary Button

  • Frame: Auto-layout container
  • Background: Transparent
  • Border: 1px solid #555555
  • Padding: 16px horizontal, 12px vertical
  • Corner radius: 8px
  • Text: "Remind me"
  • Font: Medium, 16px
  • Color: White (#FFFFFF)

Typography System

  • Primary numbers: Bold, 36-48px, White
  • Body text: Regular, 14-16px, Light gray
  • Labels: Regular, 12-14px, Medium gray
  • Button text: Medium, 16px

Color Palette

  • Background: #1A1A1A
  • Card backgrounds: #2A2A2A
  • Borders: #333333
  • Primary text: #FFFFFF
  • Secondary text: #CCCCCC
  • Tertiary text: #888888
  • Accent (progress): #CCFF00
  • Button primary: #FFB800
  • Inactive elements: #404040

Effects and Styling

  • Drop shadow: Subtle shadow on main container (0px 4px 12px rgba(0,0,0,0.3))
  • Border effects: 1px solid borders on cards and main container
  • Hover states: Slight opacity changes on buttons (0.8 opacity on hover)

This structure allows for easy recreation in Figma using auto-layout frames, making the design responsive and maintainable while preserving the exact visual hierarchy and spacing relationships.

Citations: [1] https://pplx-res.cloudinary.com/image/private/user_uploads/60313916/d199c4ef-e174-4328-9b92-5001ba66f7a9/e063d15d995b8f07c4dcc9f53c3fed7a.jpg

Answer from Perplexity: pplx.ai/share

@eonist
Copy link
Author

eonist commented May 30, 2025

Container Structure Specification

Main Container Frame

  • Type: Frame with vertical auto-layout
  • Background: Dark gray/black (#1A1A1A)
  • Padding: 24px (all sides)
  • Spacing: 20px between children
  • Dimensions: 400px width × 540px height (max)
  • Auto-layout: Vertical stack
  • Horizontal Resizing: Fixed
  • Vertical Resizing: Hug contents
  • Name: main-container-frame

Progress Section Frame

  • Type: Frame with vertical auto-layout
  • Spacing: 12px between elements
  • Background: Transparent
  • Padding: 16px (all sides)
  • Corner radius: 16px
  • Border: 2px solid gray (#333333)
  • Horizontal Resizing: Fill
  • Vertical Resizing: Hug contents
  • Name: progress-section-frame
  • Parent: main-container-frame

Progress Bar Container

  • Type: Frame with vertical auto-layout
  • Alignment: Top-center
  • Dimensions: Fill width × hug height
  • Background: Transparent
  • Effect: Subtle neon glow blur
  • Name: progress-bar-container
  • Parent: progress-section-frame

Progress Indicators Label Container

  • Auto-layout: Horizontal
  • Dimensions: Fill width × hug height
  • Name: progress-indicators-label-container
  • Parent: progress-bar-container
Progress Indicator Labels (5 instances)
  • Text Values: "0", "25", "50", "75", "100"
  • Font: 12px
  • Color: Dark gray
  • Dimensions: Fill width × hug height
  • Name: progress-indicator-label
  • Parent: progress-indicators-label-container

Progress Indicators Container

  • Auto-layout: Horizontal
  • Spacing: 12px between elements
  • Dimensions: Fill width × hug height
  • Name: progress-indicators-container
  • Parent: progress-bar-container
Progress Bar Elements (24 instances)
  • Dimensions: 12px width × 32px height (fixed)
  • Background:
    • First 12 bars: Bright yellow/lime (#CCFF00)
    • Remaining 12 bars: Dark gray (#404040)
  • Corner Radius: 12px (capsule design)
  • Name: progress-bar-element
  • Parent: progress-indicators-container

Amount Display Section

  • Type: Auto-layout frame (horizontal)
  • Dimensions: Hug width × hug height
  • Spacing: 8px
  • Name: amount-display-section
  • Parent: progress-section-frame

Main Amount

  • Font: Inter Bold, 48px
  • Text: "€ 2,565"
  • Color: White (#FFFFFF)
  • Line Height: 1.2
  • Dimensions: Hug width × hug height
  • Name: main-amount
  • Parent: progress-section-frame

Subtitle

  • Font: Inter Regular, 12px
  • Text: "pledged of\n€5,000 goal"
  • Color: Light gray (#CCCCCC)
  • Line Height: 1.4
  • Dimensions: Hug width × hug height
  • Name: subtitle
  • Parent: progress-section-frame

Statistics Grid

  • Type: Auto-layout frame (horizontal)
  • Dimensions: Fill width × hug height
  • Spacing: 16px between cards
  • Distribution: Fill equally (3 columns)
  • Name: statistics-container
  • Parent: main-container-frame

Stat Cards (3 instances)

  • Type: Auto-layout frame (vertical)
  • Background: Transparent
  • Corner radius: 16px
  • Border: 2px solid (#333333)
  • Padding: 20px
  • Spacing: 4px between number and label
  • Alignment: Center
  • Dimensions: Fill width × hug height
  • Name: stat-card
  • Parent: statistics-container

Card Data:

  • Card 1: "54" / "backers"
  • Card 2: "52" / "% complete"
  • Card 3: "15" / "days to go"

Card Number

  • Font: Bold, 36px
  • Color: White (#FFFFFF)
  • Alignment: Center
  • Name: card-number
  • Parent: stat-card

Card Label

  • Font: Regular, 12px
  • Color: Light gray (#CCCCCC)
  • Alignment: Center
  • Margin top: 8px
  • Name: card-label
  • Parent: stat-card

Description Text

  • Type: Auto-layout frame
  • Dimensions: Fill width × hug height
  • Text: "All or nothing. This project will only be funded if it reaches its goal by Fri 15 December."
  • Font: Regular, 14px
  • Color: Medium gray (#888888)
  • Line height: 1.4
  • Padding: 16px horizontal
  • Text alignment: Center
  • Name: description-text
  • Parent: main-container-frame

Action Buttons Section

  • Type: Auto-layout frame (horizontal)
  • Spacing: 12px between buttons
  • Dimensions: Hug width × hug height
  • Name: button-container
  • Parent: main-container-frame

Primary Button

  • Type: Auto-layout frame
  • Background: Orange/yellow gradient (#FFB800 to #FF8A00)
  • Padding: 16px horizontal, 12px vertical
  • Corner radius: 8px
  • Text: "Back this project"
  • Font: Inter Bold, 14px
  • Color: Black (#000000)
  • Text alignment: Center
  • Name: primary-button
  • Parent: button-container

Secondary Button

  • Type: Auto-layout frame
  • Background: Transparent
  • Border: 2px solid (#555555)
  • Padding: 16px horizontal, 12px vertical
  • Corner radius: 8px
  • Text: "Remind me"
  • Font: Inter Bold, 14px
  • Color: White (#FFFFFF)
  • Text alignment: Center
  • Name: secondary-button
  • Parent: button-container

Answer from Perplexity: pplx.ai/share

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment