Color Palette

Primary BG

Light: #ece0cf

Dark: #1a1a1a

Secondary BG

Light: #ffffff

Dark: #2a2a2a

Tertiary BG

Light: #e0d4c3

Dark: #111111

Accent Orange

#ff4500

Both themes

Aa

Text Primary

Light: #1a1a1a

Dark: #ece0cf

Aa

Text Secondary

Light: #5c5c5c

Dark: #9ca3af

Border Color

Light: #d1c4b3

Dark: #3a3a3a

Aa

Text on Accent

#ffffff

Both themes

Typography

Font Family: Jura

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Body Text Large - Used for important paragraphs and lead text.

Body Text Regular - The quick brown fox jumps over the lazy dog. This is the standard body text used throughout the application.

Small Text - Used for captions, hints, and secondary information.

Extra Small - Timestamps, metadata, and fine print.

Buttons

Primary Actions

Secondary Actions

Icon Buttons

Form Elements

Text Inputs

Selects & Toggles

I agree to share my failures

Cards

Basic Card

This is a standard card component with hover effect.

IN PROGRESS

Project Card

With image area and status badge

Add Something

Inspiration card style for adding content

Badges & Tags

Status Badges - Constrained Palette

IDEA PLANNING IN PROGRESS COMPLETED

Skill Tags

Arduino 3D Printing PCB Design IoT

Category Labels

Hardware Software Tutorial

Mobile Navigation & Layouts

Mobile Headers

Standard Mobile Header

Guild

Header with Search

Search Makers

Bottom Navigation

Slide-out Drawer

Alex Thompson

@alexmakes

Action Sheets

Add to Project

Space-Efficient Mobile Cards

LED Matrix Display

ACTIVE

Building an 8x8 LED matrix with Arduino control...

Arduino LED

2 days ago

12

Projects

47

Followers

156

Likes

Quick Actions

Spacing System

4px (1)

8px (2)

12px (3)

16px (4)

20px (5)

24px (6)

32px (8)

48px (12)

Interactive States

Default

Base state

Hover

Border color + lift

Active/Selected

Filled accent

Comprehensive Form Patterns

Add New Project

Project Name *

Give it a fun name!

Status

Description

0 / 500 characters

Field Variations

GitHub URL

Make project public

Difficulty Level

Beginner Intermediate Advanced

Project Date

Progress: 75%

Project Completion

65% complete

Search Makers

Inline Editing

Project Name

Click to edit

Modal Windows

Standard Modal

Project Details

This is a standard modal with header, body, and footer sections.

Modal content goes here...

Confirmation Modal

Delete Project?

This action cannot be undone. Your project "LED Blinker" will be permanently deleted.

Success Modal

Project Created!

Your project has been added to your profile. Time to share it with the world!

Full Screen Modal

Image Editor

Full screen content area

Toast Notifications

Project Saved!

Your changes have been saved successfully.

Upload Failed

File size exceeds 10MB limit.

New Feature!

Try our new project templates.

Loading States

Spinner

Dots

Skeleton

Button Loading States

Navigation Patterns

Tabs

Tab content appears here...

Breadcrumbs

Pagination

...