Rock-Spotter

Rock Spotter Visual Style Guide

Quick reference for colors, typography, and visual elements used in Rock Spotter.

🎨 Color Swatches

Primary Palette

┌────────────────────────────────────────────────────────────┐
│ PRIMARY BROWN - Warm, earthy, professional                 │
├────────────────────────────────────────────────────────────┤
│ █ Light   #8F7E6F   RGB(143, 126, 111)                    │
│ █ Main    #6B5B4C   RGB(107, 91, 76)   ← Primary Color    │
│ █ Dark    #4A3D32   RGB(74, 61, 50)                       │
└────────────────────────────────────────────────────────────┘

┌────────────────────────────────────────────────────────────┐
│ SECONDARY SAGE - Natural, calming, outdoor-inspired        │
├────────────────────────────────────────────────────────────┤
│ █ Light   #A5B8AA   RGB(165, 184, 170)                    │
│ █ Main    #7C9082   RGB(124, 144, 130) ← Secondary Color  │
│ █ Dark    #5A6B5E   RGB(90, 107, 94)                      │
└────────────────────────────────────────────────────────────┘

Rock Type Colors

┌─────────────────────────────────────────────────────────┐
│ 🌋 IGNEOUS        █ #D84A3F   Volcanic Red             │
│ 🏜️ SEDIMENTARY    █ #D4A574   Sandy Beige             │
│ ⛰️ METAMORPHIC    █ #6B8E9F   Slate Blue              │
│ 💎 MINERAL        █ #8B7B9B   Crystal Purple          │
│ 🦴 FOSSIL         █ #8B7355   Fossil Brown            │
│ 🪨 OTHER          █ #7A8B8B   Neutral Gray-Green      │
└─────────────────────────────────────────────────────────┘

Difficulty & Rarity

┌─────────────────────────────────────────────────────────┐
│ DIFFICULTY LEVELS                                        │
├─────────────────────────────────────────────────────────┤
│ ⭐     Easy      █ #81C784   Light Green               │
│ ⭐⭐   Medium    █ #FFB74D   Amber                     │
│ ⭐⭐⭐ Hard      █ #E57373   Light Red                 │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ ACHIEVEMENT RARITY                                       │
├─────────────────────────────────────────────────────────┤
│ 🥉 Common        █ #9E9E9E   Gray                      │
│ 🥈 Rare          █ #64B5F6   Blue                      │
│ 🥇 Epic          █ #BA68C8   Purple                    │
│ 👑 Legendary     █ #FFD54F   Gold                      │
└─────────────────────────────────────────────────────────┘

UI Colors

┌─────────────────────────────────────────────────────────┐
│ BACKGROUNDS (Light Mode)                                 │
├─────────────────────────────────────────────────────────┤
│ █ Primary     #FAFAF8   Off-white, warm                │
│ █ Secondary   #F5F3F0   Light beige                    │
│ █ Card        #FFFFFF   Pure white                     │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ BACKGROUNDS (Dark Mode)                                  │
├─────────────────────────────────────────────────────────┤
│ █ Primary     #1E1E1E   True dark                      │
│ █ Secondary   #2C2C2C   Slightly lighter               │
│ █ Card        #2C2C2C   Dark cards                     │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ TEXT COLORS (Light Mode)                                 │
├─────────────────────────────────────────────────────────┤
│ █ Primary     #2D2D2D   Almost black (main text)       │
│ █ Secondary   #666666   Medium gray (supporting)       │
│ █ Tertiary    #999999   Light gray (hints)             │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ TEXT COLORS (Dark Mode)                                  │
├─────────────────────────────────────────────────────────┤
│ █ Primary     #E8E8E8   Almost white (main text)       │
│ █ Secondary   #B0B0B0   Light gray (supporting)        │
│ █ Tertiary    #808080   Medium gray (hints)            │
└─────────────────────────────────────────────────────────┘

Status & Feedback Colors

┌─────────────────────────────────────────────────────────┐
│ FEEDBACK COLORS                                          │
├─────────────────────────────────────────────────────────┤
│ █ Error       #D84A3F   Red (errors, destructive)      │
│ █ Success     #5A8B5F   Green (success messages)       │
│ █ Warning     #D4A033   Orange (warnings)              │
│ █ Info        #5B8A9F   Blue (informational)           │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ SOCIAL INTERACTION                                       │
├─────────────────────────────────────────────────────────┤
│ ❤️ Like       █ #E57373   Coral red                    │
│ 💬 Comment    █ #64B5F6   Sky blue                     │
│ 📤 Share      █ #81C784   Mint green                   │
└─────────────────────────────────────────────────────────┘

📝 Typography Examples

Font Families & Weights

Inter (Primary UI Font)

ABC abc 123 !@#  →  Inter Regular (400)
ABC abc 123 !@#  →  Inter Medium (500)
ABC abc 123 !@#  →  Inter SemiBold (600)
ABC abc 123 !@#  →  Inter Bold (700)

Merriweather (Content Font)

ABC abc 123 !@#  →  Merriweather Regular (400)
ABC abc 123 !@#  →  Merriweather Italic
ABC abc 123 !@#  →  Merriweather Bold (700)

Roboto Mono (Technical Font)

ABC abc 123 !@#  →  RobotoMono Regular
[-122.4194, 37.7749]

Type Scale Visual

│ Rock Spotter                                    48px Display
│ Welcome Back                                    36px Display
│ Discover Amazing Rocks                          28px XXXL
│ Featured Hunts                                  24px XXL
│ Recently Posted                                 20px XL
│ Rock Details                                    18px LG
│ This is body text that explains something.     16px MD (Default)
│ Supporting information and descriptions.        14px SM
│ Metadata, timestamps, captions                  12px XS
│ Tiny labels                                     10px XXS

🔲 Spacing Visual Guide

┌─ Screen Edge (16px padding)
│
│  ┌─────────────────────────────────┐
│  │ Content Card                     │ ← Card Padding: 16px
│  │                                  │
│  │  Section Title              8px  │
│  │                                  │
│  │  Body text with normal      16px │
│  │  spacing between elements        │
│  │                                  │
│  └─────────────────────────────────┘
│
│  ← 24px Section Spacing
│
│  ┌─────────────────────────────────┐
│  │ Another Card                     │
│  └─────────────────────────────────┘
│
└─ Screen Edge (16px padding)

🔘 Border Radius Examples

┌──┐         ┌───┐         ┌────┐        ╭─────╮       ╭──────╮
│  │ 4px     │   │ 8px     │    │ 12px   │     │ 16px  │      │ 24px
└──┘         └───┘         └────┘        ╰─────╯       ╰──────╯
 XS           SM            MD             LG             XL

  ●  Fully Round (9999px) - Used for avatars and badges

🎯 Icon Reference

🏠 Home        🔍 Discover      🗺️ Map
🏃 Hunts       👤 Profile

Actions

❤️ Like        💬 Comment       📤 Share
📍 Location    📸 Camera        ➕ Add
✏️ Edit        🗑️ Delete        💾 Save
🔧 Filter      🔍 Search

Rock Types

🌋 Igneous     🏜️ Sedimentary   ⛰️ Metamorphic
💎 Mineral     🦴 Fossil        🪨 Other

Achievements & Gamification

🏆 Trophy      ⭐ Star          🏅 Medal
👑 Crown       💎 Gem           🔥 Fire

Difficulty Indicators

⭐     Easy
⭐⭐   Medium  
⭐⭐⭐ Hard

Rarity Badges

🥉 Common      🥈 Rare         🥇 Epic        👑 Legendary

📐 Component Dimensions

Touch Targets

Minimum: 44x44px for all interactive elements
Recommended: 48x48px for primary actions
Icon buttons: 40x40px with 24px icon

Card Dimensions

Rock Card:     Full width x variable height
               Image: 16:9 aspect ratio
               Padding: 16px all sides

Hunt Card:     Full width x ~200px
               No image or square thumbnail
               Padding: 16px all sides

Profile Card:  Full width x ~120px
               Avatar: 64px circle
               Padding: 16px all sides

Buttons

Primary:       Full width or auto
               Height: 48px
               Padding: 12px 24px
               Border Radius: 8px

Secondary:     Same as primary

Icon Button:   40x40px
               Icon: 24px
               Border Radius: 8px (or round)

⚡ Animation Timing

Quick Hover:        150ms  ━━━━━━━|
Standard Transition: 300ms ━━━━━━━━━━━━━|
Complex Animation:   500ms ━━━━━━━━━━━━━━━━━━━━━|

🎨 Color Accessibility

Contrast Ratios (WCAG AA)

All text colors meet or exceed WCAG AA standards:

✓ Primary text on light bg:   8.5:1  (Target: 4.5:1)
✓ Secondary text on light bg:  5.2:1  (Target: 4.5:1)
✓ Primary text on dark bg:     9.1:1  (Target: 4.5:1)
✓ Secondary text on dark bg:   5.8:1  (Target: 4.5:1)

Color Blindness Considerations

Rock type colors are distinguishable by shape/icon, not just color
Difficulty levels use stars + color
Error/success states use icons + color
All interactive elements have clear visual feedback beyond color

📱 Responsive Behavior

┌─────────────────────────────────────────────────────────────┐
│ XS (320px)  Small phone - Single column, compact spacing    │
├─────────────────────────────────────────────────────────────┤
│ SM (375px)  Standard phone - Default mobile layout          │
├─────────────────────────────────────────────────────────────┤
│ MD (414px)  Large phone - More breathing room               │
├─────────────────────────────────────────────────────────────┤
│ LG (768px)  Tablet - Two column where appropriate           │
├─────────────────────────────────────────────────────────────┤
│ XL (1024px) Large tablet - Multi-column, max width applied  │
└─────────────────────────────────────────────────────────────┘

🎭 Component States

Button States

Default:   [  Submit  ]     Primary color, normal
Hover:     [  Submit  ]     8% lighter overlay
Active:    [  Submit  ]     12% darker
Disabled:  [  Submit  ]     50% opacity, gray
Loading:   [ ⟳ Loading ]    Spinner + disabled state

Input States

Default:   [____________]   Gray border
Focus:     [____________]   Sage green border, 2px
Error:     [____________]   Red border + error text
Success:   [____________]   Green border + success icon
Disabled:  [____________]   Gray background, 50% opacity

🖼️ Image Guidelines

Rock Photos

Aspect Ratio: 16:9 or 4:3
Minimum Size: 800x600px
Format: JPEG (optimized)
Quality: 85% compression

Profile Pictures

Size: 256x256px minimum
Format: JPEG or PNG
Shape: Circular crop
Fallback: Generated avatar with initials

Achievement Badges

Size: 128x128px
Format: PNG with transparency
Include colored background
Icon should be clear at 32x32px

Quick Reference Card - Keep this handy during development!

Primary Color: #6B5B4C
Secondary Color: #7C9082
Default Font Size: 16px
Base Spacing: 8px
Default Border Radius: 8px
Standard Card Padding: 16px
Touch Target Minimum: 44x44px

This site is open source. Improve this page.