{"id":"2096841131338150047","url":"https://x.com/Hartdrawss/status/2096841131338150047","text":"How we design the perfect IOS mobile app :\n\n> Inter Tight runs throughout the interface, with a 26px greeting, 22px titles, 18-19px section headings, 14-16px body copy and 12-13px labels.\n\n> Headings use -0.7px to -0.9px letter spacing, which makes large text feel tighter and more intentional without hurting readability.\n\n> 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.\n\n> The primary accent is #3866D6, while charts and contribution grids use a 4-5 step ramp from the muted track color to deep blue.\n\n> Cards have zero visible borders. An inset highlight, soft drop shadow and subtle 1px ring create separation while keeping the surfaces clean.\n\n> 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.\n\n> Spacing stays dense and predictable with 26px page margins, 16-22px between card groups and 8-12px inside components.\n\nOnce these rules are locked, the same system can power your product end to end\n\nLiterally everything from UI, App Store screenshots, landing page and paid creatives.","author":{"name":"Harshil Tomar","username":"Hartdrawss","avatarUrl":"https://pbs.twimg.com/profile_images/2080689224207237125/bJNx2_-P_200x200.jpg"},"createdAt":"Mon Sep 07 06:00:57 +0000 2026","engagement":{"replies":15,"retweets":33,"likes":566,"views":77668},"media":{"photos":[],"videos":[{"url":"https://video.twimg.com/ext_tw_video/2096841114237943810/pu/vid/avc1/1280x720/xXQS9yC5PRZqrgDo.mp4?tag=12","thumbnailUrl":"https://pbs.twimg.com/ext_tw_video_thumb/2096841114237943810/pu/img/Rzxy_tsBhh-UFIlt.jpg","width":1280,"height":720,"duration":9}]},"quoteTweet":{"id":"2095753742381404375","url":"https://x.com/Hartdrawss/status/2095753742381404375","text":"Steal this clean mobile app UI system :\n\n- Titles: Inter Tight 22/28px Semi Bold, -0.7px letter spacing\n- Section headers: Inter Tight 19/24px Semi Bold, and 0.6px letter spacing\n- Body/day labels: Inter Tight 14.5/18px Regular, and 0.3px letter spacing\n- Buttons: 38-46px circular, 6px inset highlight + soft drop shadow, no flat fills\n- Cards: 12-18px radius depending on depth, layered box-shadows not borders\n- Text: var(--text) for primary, var(--muted) for secondary, var(--strong) for icons\n- Dividers: 1px var(--track), never a visible border color\n\nTight tokens, layered shadows instead of borders, negative tracking on every heading. \n\nThat's what makes dense mobile screens still feel calm.","author":{"name":"Harshil Tomar","username":"Hartdrawss","avatarUrl":"https://pbs.twimg.com/profile_images/2080689224207237125/bJNx2_-P_200x200.jpg"},"createdAt":"Fri Sep 04 06:00:04 +0000 2026","media":{"photos":[{"url":"https://pbs.twimg.com/media/HRWc6-2WcAUMEPi.jpg?name=orig","width":1484,"height":1212}],"videos":[]}},"adhxContext":{"savedByCount":1,"publicTags":[],"previewUrl":"https://adhx.com/Hartdrawss/status/2096841131338150047"}}