Skill UI

This guide outlines the principles of duotone design, an aesthetic characterized by using only two highly contrasting colors for both UI and imagery. It provides comprehensive implementation examples for modern web (CSS), mobile (SwiftUI, Flutter), and cross-platform environments, showing how to achieve the two-color mapping effect using advanced blend modes and color filters.

This skill provides a comprehensive guide for implementing sophisticated, print-quality editorial design across web, iOS (SwiftUI), and Flutter platforms. It focuses on achieving an elegant, magazine-like aesthetic using classic techniques such as serif/sans-serif typography pairing, large drop caps, pull quotes, and columnar layouts. Ideal for content-heavy applications needing a sophisticated, literary feel.

This comprehensive guide provides core principles and implementation patterns for adopting the Flat Design aesthetic. It details how to build interfaces across web (CSS), mobile (SwiftUI, Flutter), and cross-platform frameworks, emphasizing zero depth, sharp geometries, and high-contrast solid colors while strictly avoiding shadows, gradients, and bevels. Use this when aiming for a modern, minimalist, and clean UI/UX experience.

A comprehensive guide for implementing Flat Design 2.0 (Semi-Flat). This style maintains the clean, solid aesthetic of flat design while introducing subtle, diffuse shadows and micro-gradients to enhance perceived depth and communicate element interactability (e.g., buttons, cards). It provides detailed, cross-platform code examples for Web (CSS), iOS (SwiftUI), Flutter, and React Native.

A comprehensive guide covering the aesthetic and technical implementation of floating User Interface (UI) elements. Learn how to create detached, elevated components, such as cards and navigation bars, giving the application a light, airy, and modern feel across Web (CSS), iOS (SwiftUI), and Flutter platforms. Key principles include soft shadows, generous margins, and pill shapes.

A comprehensive technical guide for implementing the nostalgic Frutiger Aero aesthetic across web and mobile platforms. This style, popular in the mid-2000s, is characterized by glossy gradients, translucent glass effects, and nature-inspired motifs (sky, water, grass), creating an optimistic, skeuomorphic user interface experience.

Provides comprehensive guidelines and code examples (CSS, SwiftUI, Flutter) for implementing modern, dynamic gradient designs. Ideal for projects needing vibrant transitions, animated backgrounds, and an energetic, contemporary aesthetic. Learn how to apply complex color blending to backgrounds, text, and borders across major platforms.

This comprehensive guide provides technical implementations for achieving a modern 'Layered Design' aesthetic. It teaches developers how to create depth, intentional overlapping, and clear stratification across various platforms. Includes detailed code examples for CSS, SwiftUI, Flutter, and React Native to build complex, dimensional user interfaces.

A comprehensive guide to implementing the Minimalism design aesthetic across web, iOS (SwiftUI), Flutter, and React Native. This style mandates generous whitespace, strict typography, and the elimination of visual clutter (like borders and shadows), ensuring that content remains the primary focus and the user experience feels clean and breathable.

A comprehensive guide detailing the implementation of the Neo-Brutalist design aesthetic. It specifies core principles, including hard drop shadows, thick black outlines, and high-contrast flat colors. Includes detailed, platform-specific code examples for Web (CSS), SwiftUI, and Flutter, helping developers achieve a playful yet structured, high-impact UI look.

A comprehensive style guide and implementation toolkit for achieving authentic vintage aesthetics, inspired by 60s-80s retro design. It covers core principles like warm, muted color palettes, subtle noise textures, and classic typography pairings. Provides detailed code examples for Web (CSS), iOS (SwiftUI), and Android (Flutter) to recreate the analog, nostalgic feel in modern applications.

A comprehensive style guide and implementation reference for the Retro Futurism aesthetic. Perfect for designing interfaces that evoke the 1950s and 1960s space age, atompunk, or mid-century modern vibes. It outlines core principles, color palettes, typography, and provides cross-platform code examples (CSS, SwiftUI, Flutter, React Native) to achieve sleek, aerodynamic, chrome finishes.