Kroma — Professional Suite Drawing Board

Kroma is a highly polished, visually striking, and responsive drawing application designed for Android using Jetpack Compose and Material Design 3. It features an elegant Sophisticated Dark theme, a custom local drawing engine, and advanced brush libraries.

---

🎨 Design Philosophy & Theme

The application is wrapped in a Sophisticated Dark (Kroma Theme) layout:

• Deep Charcoal Workspace Backdrop (#1C1B1F) representing a premium artistic studio.
• Pure White Drawing Paper Sheet Canvas that casts soft shadows and provides clean, high-contrast drawing space for stunning sketches.
• Premium Lavender Highlights (#D0BCFF) and soft neon accents.
• Generous Negative Space & High-Contrast Typography to maintain clear visibility on handhelds and tablets alike.

---

✨ Key Features

📐 Multi-Format Selectable Canvas (Drawing Workspace Bounds)

Artworks are no longer confined to static phone screens! Users can configure and view the canvas in major global social media ratios, beautifully bounded as white sheet boards:

• Freeform Canvas (📱): Fill-screen infinite sketching board.
• YouTube Video (📺): Landscape 16:9 ratio.
• TikTok / Reels (🎵): Portrait 9:16 ratio.
• Instagram Post (📸): Square 1:1 ratio.
• Classic Document (📄): Standard 4:3 ratio.
• Interactive selector inside "New Sketch" creation dialog AND inside the live workspace options dropdown menu!

🛠️ Floating Contextual Toolbar Capsules (Professional Layouts)

A highly polished, floating top toolbar and responsive vertical right-side capsule panels dynamically change based on your selected drawing tool (matching Photoshop & Figma workflows):

• Top Capsule: Houses the drag handle, navigation triggers, 5 core drawing tools, and advanced options menu (...).
• Brush vertical controls: Holds active emoji swatch (slides open Brush Library), Size selector, Fade toggle, Alpha opacity slider, and Ruler guides.
• Bucket Fill vertical controls: Configures threshold tuning sliders and active color swatch indicators.
• Text Tool vertical controls: Add text (+), change active fonts (Sans-Serif, Serif, Monospace), text scale slider, and color pickers.

✒️ Animated Brush Library (Sliding Side Panel)

Instead of navigating away or blocking the full workspace, clicking the active brush trigger slides in a beautiful, custom Brush Library panel from the right edge. Each brush behaves with unique presets:

• Pen (✒️): Solid, sharp, and highly precise ink lines (default 6px, full opacity).
• Pencil (✏️): Fine, textured drafting strokes (default 3px, soft 60% opacity).
• Marker (🖍️): Vibrant, semi-bold flow for rich coloring and accents (default 18px, 75% opacity).
• Water Brush (🖌️): Thick, soft watercolor brushes with dynamic transparency (default 28px, 45% opacity).
• Air Brush (💨): Highly diffused, soft gradient spray effect perfect for delicate shading (default 36px, 25% opacity).

📏 Snappable Rulers & Symmetry Guides

Turn shaky lines into perfect vector-style geometry with real-time snapping:

• Unlock / Lock Guide Toggle: Toggle snapping to reposition guidelines.
• Line Ruler (LINE): Snaps drawing strokes into perfect, crisp horizontal guide lines.
• Circle Ruler (CIRC): Snaps strokes to a perfect circular guide centered on the board.
• Box Ruler (BOX): Guides drawings to form perfect rectangles.
• Mirror Symmetry (MIRR): Automatically mirrors drawings horizontally in real-time, creating beautiful symmetrical art.

📝 Interactive Draggable Text Insertions

• Pop-Up Insertion: Type your text and preview sizes inside a dark card dialogue.
• Custom Fonts & Colors: Configure serif or monospace styling and apply neon colors.
• Tactile Drag-and-Drop: Placed texts appear within pink boundaries on the canvas sheet, allowing direct dragging and layout positioning.

🎯 Pink Lasso Selection Bounding Box

• Select the Lasso Tool to display a gorgeous pink dashed bounding box on the sheet.
• Move handles, corners, and dots to position elements.
• Bottom action controls allow instant horizontal/vertical flips, perspectives, and erasure transformations.

🥞 Layer Stack Management Panel (Image 7)

• Toggle the bottom slide-up layers editor stack.
• Multi-layer visibility triggers (Eye icon) and opacity indicators (e.g. Layer 2 at 85%, Layer 1 at 100%).
• Centralized plus sign (+) button to add new layered canvas drawing sheets on the fly.

---

🚀 Technical Architecture

• Language: 100% Modern Kotlin
• UI Framework: Jetpack Compose (Declarative UI)
• Design System: Material Design 3 (M3)
• Architecture: Clean MVVM (Model-View-ViewModel) with custom Factory Providers
• Asynchronous Flow: Kotlin Coroutines & StateFlow state collection