How we design the perfect IOS mobile app : > Inter Tight runs throughout the interface, with a 26px greeting, 22px titles, 18-19px section headings, 14-16px body copy and 12-13px labels. > Headings use -0.7px to -0.9px letter spacing, which makes large text feel tighter and more intentional without hurting readability. > Every color is controlled through CSS variables for text, cards, buttons, inner surfaces, tracks and rings, so light and dark mode can share the same component structure. > The primary accent is #3866D6, while charts and contribution grids use a 4-5 step ramp from the muted track color to deep blue. > Cards have zero visible borders. An inset highlight, soft drop shadow and subtle 1px ring create separation while keeping the surfaces clean. > Radius follows a clear hierarchy: 54px for the device frame, 18-22px for cards, 8-14px for chips and rows, then 50% for circular icon buttons. > Spacing stays dense and predictable with 26px page margins, 16-22px between card groups and 8-12px inside components. Once these rules are locked, the same system can power your product end to end Literally everything from UI, App Store screenshots, landing page and paid creatives.