Vocabulary - Learn words daily

Colors

• #9BC4C6Muted Sage/Teal · Go Premium banner background
• #FFFFFFOff White · Card background fills
• #EDE8DEWarm Background · Screen background canvas
• #0D0D0DInk Outline Black · Card borders · Headings · Illustration line art
• #EA8179Salmon Red Accent · Illustration dot shadow accents

Type

• Screen TitleNew York · 64px · 800 · #0D0D0D
• Banner TitleSF Pro Display · 44px · 700 · #0D0D0D
• Card TitleSF Pro Display · 36px · 700 · #0D0D0D
• Section HeaderSF Pro Display · 42px · 700 · #0D0D0D
• Card SubtitleSF Pro Text · 30px · 400 · #333333

Elements

• Settings Button · button

  Top right corner, circular button with gear glyph · Circular off-white floating container with gear icon outline

• Go Premium Banner Card · card

  Full width card in upper section with illustration on right · Muted teal fill, solid 3px black stroke, rounded corners, retro line illustration of archery target

• Take a Test Card · card

  Full width row card below premium banner with graduation cap icon and trailing chevron · White background, solid 3px black outline, rounded corners

• Customization Grid Cards · card_grid

  Two-column grid under 'Customize the app' header · White cards with solid 3px black borders, isometric retro-style line illustrations, bold captions

• Tab Bar Dock · navigation_bar

  Floating pill bar pinned at bottom with 5 navigation items · White rounded bar with subtle drop shadow; 'Profile' is active

Layout

Vertical scroll layout starting with header and settings icon, followed by promo banner, test action card, and 2x2 grid of customize options.

Notes

Features neo-brutalist / retro comic illustration design with heavy outlines and halftone dot accents.