Mockups of the Tromml apps as they look today, from the team's design kit: the key screens of each app and a proposed shared Tromml style. Product screens use fictional data; the marketing-site screens copy the live site. Each one opens on its own. The bar at the top switches its states and, where the app has one, its dark theme. Nothing here sends data anywhere; only fonts load from outside.
Headframe
Sign In
/login/ · 3 states · light only
Contact detail
/accounts/<account_id>/contacts/<contact_id>/ · 6 states · light only
Notes
/notes/ · 7 states · light only
Schedule
/schedule/ · 7 states · light only
Minecart mobile
Today
RootStack > MainTabs > Today · 6 states
Accounts
RootStack > MainTabs > Accounts · 6 states
New Note
RootStack > NoteTaking · 3 states
Settings
RootStack > MainTabs > Settings · 3 states
Marketing site
Technology
/tromml-platform · 5 states · light only
Minecart
/solutions/sales · 5 states · light only
Blog
/blog · 7 states · light only
Blog post
/blog/[slug] · 5 states · light only
Contact
/contact-us · 9 states · light only
Tromml style (proposal)
Tromml style
The proposed shared style for Headframe, Minecart mobile and the Chrome extension: colour roles, type, spacing, components · light and dark
Account detail, shared style
/accounts/<account_id>/ · Headframe's Account detail redrawn in the proposed style, to compare with the mirror above · 7 states
Contact detail, shared style
RootStack > ContactDetail · Minecart mobile's Contact detail redrawn in the proposed style, to compare with the mirror above · 3 states
Account Detail, shared style
side panel (index.html) · Chrome extension's Account Detail redrawn in the proposed style, to compare with the mirror above · 3 states