iPhone and iPad

The same look, native

A Swift package for SwiftUI apps on iOS 17 and later. Same tokens, same Bricolage Grotesque, same black pills and signature mark, with system navigation and tab bars kept native.

https://github.com/VenusOne-Lee/distinctui

In Xcode: File, Add Package Dependencies, paste the link, add DistinctUI.

Six screens

From DistinctUIExamples, in the iPhone simulator. Invented people; the photos are AI-generated and show people who don't exist.

A directory screen: pill tabs and project cards, each with its maker's ring — **Directory** Tabs, cards, a note

Profile Big mark, one black pill

A form after a failed submit: a grey problems banner and black error lines under two fields — **Form** Problems banner, field errors

A sign-in screen with an email pill field, a black pill and an outlined passkey pill — **Sign in** Email link or passkey

Settings: rows with chevrons, black switches, download and delete — **Settings** Rows, switches, your data

Every component on one screen: type, buttons, badges, marks — **Kit** Every building block

How it reads

import DistinctUI

@main
struct MakersApp: App {
    init() { DUIAppearance.apply() }   // Bricolage and black on the system bars

    var body: some Scene {
        WindowGroup {
            RootView()
                .distinctUI(signature: Color(duiHex: 0x1F3BFF), palette: .signal)
        }
    }
}

DUITitle("Naledi is building", bold: "Spaza Stock")
DUIMark(photo: Image("naledi"), ring: 1, live: false, version: "v0.4", size: 128)
Button("Try Spaza Stock") { }.buttonStyle(.dui(fullWidth: true))
Button("Follow") { }.buttonStyle(.duiSecondary)
Text("**Needs:** testers in KZN").duiNote()

Every web class has a SwiftUI match. The full map is in swiftui.md, which Claude reads when you ask for distinctUI in a SwiftUI project.

What changes on a phone

1
Light, enforced. .distinctUI() sets light mode; set UIUserInterfaceStyle to Light too.
2
System chrome stays native. NavigationStack, TabView, sheets and menus, in black and white. Never the signature colour.
3
Titles go in the content. An inline bar title, then the light heading with one bold word at the top of the scroll view.
4
Body is 17pt and everything scales. Every text role follows Dynamic Type.
5
44pt to tap. Pills and rows have a 44pt minimum.
6
Pressed, not hovered. Pills scale to 0.97 and dim, cards get a black edge. The only spring is a mark going live.
7
No red badges. The system tab badge is red: use a black count on a button instead.