Payhub Ui Conventions

• Keep payhub on a light template: use white and soft neutral row backgrounds for form, balance, expense, and settlement sections.
• Do not introduce dark or near-black panels for regular app sections unless a future task explicitly changes the product theme.
• Use the payhub brand green for primary app actions such as Add and Add Expense.
• Use white text on solid brand-green controls, badges, or circular markers.
• Use Binance-style market colors only for financial movement: green for positive amounts and red for negative amounts.

SwiftUI Usage

Use tokens directly in view modifiers:

Text("Paid")
    .foregroundStyle(PayhubColor.textSecondary)

Use state-specific tokens instead of raw colors:

Text(amount)
    .foregroundStyle(isPositive ? PayhubColor.balancePositive : PayhubColor.balanceNegative)

Maintenance

• Search for direct color usage with rg -n "\\.secondary|\\.primary|\\.green|\\.red|\\.blue|\\.orange|\\.yellow|\\.pink|\\.purple|\\.gray|\\.black|\\.white|Color\\(" payhub --glob '*.swift'.
• When adding a new UI convention folder or design-token file, update this skill and the relevant structure lists.