Playful Geometric - Design System

🎨 Color System

Primary Colors

Aa

Primary Text

#000000

Aa

Highlight Accent

#FF453A

Aa

Background

#FFFBF7

Illustration Colors

●

Shape Red

#FF4C4C

●

Shape Blue

#2F80ED

●

Shape Yellow

#F2C94C

💡 Color Usage Rules:

Use black/white for all functional content (text, buttons)
Red accent only for keywords or interactive emphasis
Illustration colors are decorative only - never functional
Background always stays neutral to let visuals pop

🖋 Typography System

Hero Heading • Inter Bold • 64px • -0.03em tracking

Sample work

Body Text • Inter Regular • 18px • 1.6 line-height

Try it now — hit the right arrow key or click to see more of our incredible work samples.

Button Text • Inter Semi-Bold • 16px • Capitalized

See Work

/* Typography Tokens */
--font-main: 'Inter', -apple-system, sans-serif;
--size-hero: 64px;
--size-body: 18px;
--size-button: 16px;
--weight-bold: 700;
--weight-regular: 400;
--tracking-tight: -0.03em;

📐 Spacing & Layout

--space-sm

16px

--space-md

32px

--space-lg

64px

--space-xl

96px

--space-2xl

120px

Layout Rules:

Center-align all content
96-120px top/bottom padding for breathing room
32-40px between content blocks
Generous white space = calm + clarity

🔘 UI Components

Primary Button

Text with Highlight

Hit the right arrow key to continue

Decorative Shape

/* Button Styles */
.btn-primary {
    background: #000000;
    color: white;
    padding: 16px 32px;
    border-radius: 16px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

✅ Usage Guidelines

✓ Do

Use shapes in corners only
Highlight keywords with red
Keep one primary CTA per screen
Use flat fills for shapes
Maintain generous spacing

✗ Don't

Place shapes behind text
Use gradients
Mix more than 3 colors per shape
Overwhelm with navigation
Use accent colors for UI

📱 iOS/SwiftUI Implementation

🚀 Ready for Xcode!

This design system is available as a complete SwiftUI package. Drop it into your Xcode project for instant app restyling.

Download SwiftUI Design System

Core Files

Example & Docs

📱 ExampleView.swift
📖 README.md

Quick Usage Example

import SwiftUI

struct MyView: View {
    var body: some View {
        ZStack {
            Color.dsBackground
                .ignoresSafeArea()
            
            VStack(spacing: DSSpacing.lg) {
                DSHeroText(text: "Welcome")
                
                DSHighlightedText(
                    text: "Start building amazing apps",
                    highlightedWords: ["amazing"]
                )
                
                DSPrimaryButton(title: "Get Started") {
                    // Action
                }
                .frame(maxWidth: 200)
            }
        }
    }
}

🧰 Web Design Tokens

:root {
    /* Colors */
    --color-primary: #000000;
    --color-accent: #FF453A;
    --color-bg: #FFFBF7;
    
    /* Illustration Palette */
    --shape-red: #FF4C4C;
    --shape-blue: #2F80ED;
    --shape-yellow: #F2C94C;
    
    /* Typography */
    --font-main: 'Inter', -apple-system, sans-serif;
    
    /* Border Radius */
    --radius-pill: 16px;
    
    /* Spacing Scale */
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 96px;
    --space-2xl: 120px;
}