← Back to UI screens
Project tracker screen — web, monochrome style
Theme

Project tracker screen — web, monochrome style

Project tracker dashboard screen for a web app, designed for Fernway, a fictional productivity product. Shows stat tiles, project phases with progress, a projects list with circular progress rings and team avatars, and a sticky right rail with a launch checklist, milestones and an activity feed. Monochrome style: pure greyscale, Geist, black primary actions and flat surfaces. Comes with the full HTML and a DESIGN.md with light and dark colour tokens.

Open live HTML ↗ Download DESIGN.md
Pattern
Project tracker
Device
Web
Style
Monochrome
Product (fictional)
Fernway
Category
Productivity

Spec

Colours (light)
background #ffffff · surface #fafafa · text #111111 · muted #666666 · primary #111111 · accent #444444
Colours (dark)
background #0a0a0a · surface #161616 · text #f2f2f2 · muted #a0a0a0 · primary #f2f2f2 · accent #c8c8c8
Fonts
Geist (headings and body), JetBrains Mono (code) · Google Fonts, under their own licences
Light and dark
Both included; follows the system setting
project-trackerwebproductivitysidebar-navkpistepperprogressprogress-ringtableavatar-stackchecklistactivity-feedmilestonesdashboard
AI

Build this with your AI

Fonts: Geist (Google Fonts)

Writing about this screen?

More project tracker screens

Project tracker dashboard — web, minimal (Fernway)
web · minimal
Project tracker dashboard — web, editorial (Fernway)
web · editorial
Project tracker dashboard — web, brutalist (Fernway)
web · brutalist
Project tracker dashboard — web, luxury (Fernway)
web · luxury
Project tracker dashboard — web, playful (Fernway)
web · playful
Project tracker dashboard — web, corporate (Fernway)
web · corporate
Project tracker dashboard — web, retro (Fernway)
web · retro
Project tracker dashboard — mobile, monochrome (Fernway)
mobile · monochrome
Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.

Save to board