Premium UI Experiments

Three modern themes implementing the Firstly Academy design system: color layering (no borders), two-layer shadows, and distinctive typography.

Sharp (Current UI Refined)

Recommended

View Demo →

Your current exercise layout with design system improvements: two-layer shadows, color layering, gradient buttons with inner glow, and refined input styling.

Typography

System UI (same as current)

Palette

Blue accent (same as current)

Design System Principles Applied

• Color Layering: 3-4 shade hierarchy creates depth without borders
• Two-Layer Shadows: Inset highlight + drop shadow for physical elevation
• Gradient Buttons: Light-to-dark with inner glow for premium feel
• Distinctive Fonts: Plus Jakarta Sans, Fraunces, Outfit (not Inter/Space Grotesk)
• 48px Touch Targets: All interactive elements meet accessibility minimums