eonist/crowdfunding.md

Created May 30, 2025 05:26

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/eonist/fd4face6f0de1d0439de46bab46b7ff5.js"></script>
Save eonist/fd4face6f0de1d0439de46bab46b7ff5 to your computer and use it in GitHub Desktop.

crowdfunding UI

Raw

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

Author

eonist commented May 30, 2025 •

edited

Loading

Key Design Features

Visual Elements: The design uses a dark theme with rounded corners and subtle borders to create depth. The progress bar features a segmented green fill that represents the 52% completion status.

Typography: Large, lightweight fonts are used for numbers to create visual hierarchy, while smaller gray text provides supporting information.

Layout: The responsive grid layout ensures the three statistics cards are evenly distributed, and the button layout adapts to smaller screens.

Interactive Elements: Hover effects on buttons provide visual feedback, with the primary "Back this project" button featuring a prominent orange gradient that stands out against the dark background.

The recreation maintains the exact visual structure and styling of the original crowdfunding dashboard, including the segmented progress bar, funding statistics, and call-to-action buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crowdfunding Dashboard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="dashboard">
        <div class="main-card">
            <div class="progress-container">
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
                <div class="progress-labels">
                    <span>0</span>
                    <span>25</span>
                    <span>50</span>
                    <span>75</span>
                    <span>100</span>
                </div>
            </div>
            
            <div class="funding-info">
                <div class="amount">€ 2,565</div>
                <div class="goal-text">pledged of<br>€5,000 goal</div>
            </div>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">54</div>
                <div class="stat-label">backers</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">52</div>
                <div class="stat-label">% complete</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">15</div>
                <div class="stat-label">days to go</div>
            </div>
        </div>
        
        <div class="disclaimer">
            All or nothing. This project will only be funded if it reaches its<br>
            goal by Fri 15 December.
        </div>
        
        <div class="action-buttons">
            <button class="back-button">Back this project</button>
            <button class="remind-button">Remind me</button>
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard {
    max-width: 400px;
    width: 100%;
}

.main-card {
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 30px 25px;
    margin-bottom: 15px;
}

.progress-container {
    margin-bottom: 25px;
}

.progress-bar {
    height: 8px;
    background-color: #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 52%;
    background: linear-gradient(90deg, #9ACD32, #7CB342);
    border-radius: 4px;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 8px,
        rgba(0,0,0,0.1) 8px,
        rgba(0,0,0,0.1) 10px
    );
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

.funding-info {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.amount {
    font-size: 48px;
    font-weight: 300;
    color: #fff;
    line-height: 1;
}

.goal-text {
    font-size: 14px;
    color: #888;
    line-height: 1.3;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
}

.stat-number {
    font-size: 36px;
    font-weight: 300;
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 12px;
    color: #888;
}

.disclaimer {
    font-size: 13px;
    color: #888;
    text-align: left;
    line-height: 1.4;
    margin-bottom: 25px;
}

.action-buttons {
    display: flex;
    gap: 15px;
}

.back-button {
    flex: 1;
    background: linear-gradient(135deg, #FFA500, #FF8C00);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
}

.remind-button {
    flex: 1;
    background-color: transparent;
    color: #fff;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remind-button:hover {
    border-color: #555;
    background-color: #1a1a1a;
}

@media (max-width: 480px) {
    .dashboard {
        padding: 0 10px;
    }
    
    .amount {
        font-size: 40px;
    }
    
    .stat-number {
        font-size: 30px;
    }
    
    .action-buttons {
        flex-direction: column;
    }
}

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

eonist/crowdfunding.md

Main Container Frame

Progress Section Frame

Progress Bar Component

Amount Display

Stats Grid Frame

Individual Stat Cards (3x)

Card Content Structure:

Description Text

Button Container Frame

Primary Button

Secondary Button

Typography System

Color Palette

Effects and Styling

eonist commented May 30, 2025 •

edited

Loading

Uh oh!

eonist commented May 30, 2025

Uh oh!

eonist/crowdfunding.md

Main Container Frame

Progress Section Frame

Progress Bar Component

Amount Display

Stats Grid Frame

Individual Stat Cards (3x)

Card Content Structure:

Description Text

Button Container Frame

Primary Button

Secondary Button

Typography System

Color Palette

Effects and Styling

eonist commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key Design Features

Uh oh!

eonist commented May 30, 2025

Container Structure Specification

Main Container Frame

Progress Section Frame

Progress Bar Container

Progress Indicators Label Container

Progress Indicator Labels (5 instances)

Progress Indicators Container

Progress Bar Elements (24 instances)

Amount Display Section

Main Amount

Subtitle

Statistics Grid

Stat Cards (3 instances)

Card Number

Card Label

Description Text

Action Buttons Section

Primary Button

Secondary Button

Uh oh!

eonist commented May 30, 2025 •

edited

Loading