yuris/titik-gambut-next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Streamlit visual theme alignment, peatland design tokens, and top telemetry KPI bar #16

New issue
Closed
opened 2026-10-14 20:36:26 +00:00 by yuris · 0 comments
yuris commented 2026-10-14 20:36:26 +00:00
Owner
Copy link

What to build

Implement the complete visual identity defined in DESIGN.md to match the look, feel, and colors of the original Streamlit application. Replace generic black background with the deep peat-ash palette (#161917, #1F2622, #2E3832), mount the slim live telemetry banner with a pulsating emerald dot (#4CE08A) and WIB clock, and add the top KPI ribbon with 3px accent borders for ember, flame, and water metrics.

Reference repository

Reference the original Streamlit codebase at https://git.nokopia.com/yuris/titik-gambut (local path ../titik-gambut):

  • app.py lines 33–140: Custom theme CSS, color palette, loader styling, and base layout resets.
  • app.py lines 125–205: .live-top-banner, .top-command-bar, .brand-block, and typography hierarchy.
  • app.py lines 202–254: .kpi-ribbon and .kpi-chip components with 3px accent borders (.ember, .flame, .water).
  • app.py lines 288–320: Mobile responsive grid overrides for the KPI ribbon.

Technical specifications

  1. Target files:

    • DESIGN.md: Authoritative visual guide.
    • src/app/globals.css: Theme variables and color tokens.
    • src/components/frame/top-command-bar.tsx: Top command bar with brand title, subtitle, and KPI ribbon.
    • src/components/frame/live-telemetry-banner.tsx: Slim banner with pulsing live dot (#4CE08A) and UTC/WIB time.
    • src/components/frame/kpi-chip.tsx: Reusable metric chip with border-l-[3px] accent styling.

  2. Semantic color tokens:

    • Canvas / Body: #161917
    • Card surface: #1F2622
    • Border: #2E3832
    • Ember accent: #E05A2B
    • Flame accent: #F5A623
    • Water accent: #2FA4A9
    • Live dot: #4CE08A with shadow-[0_0_0_3px_rgba(76,224,138,0.25)]

  3. KPI metrics in top ribbon:

    • Total Hotspot (neutral blue-green border #3B8EA5)
    • Gambut Kritis (ember border #E05A2B)
    • TMAT Kering (flame border #F5A623)
    • Provinsi Terdampak (neutral #2FA4A9)

Acceptance criteria

  • Interface matches colors, borders, and typography specified in DESIGN.md and original titik-gambut app.py.
  • Top command bar and KPI ribbon render smoothly above the map canvas.
  • KPI values update dynamically when active hotspots or clusters load.
  • Fully responsive on mobile with compact stacked ribbon.
### What to build Implement the complete visual identity defined in DESIGN.md to match the look, feel, and colors of the original Streamlit application. Replace generic black background with the deep peat-ash palette (#161917, #1F2622, #2E3832), mount the slim live telemetry banner with a pulsating emerald dot (#4CE08A) and WIB clock, and add the top KPI ribbon with 3px accent borders for ember, flame, and water metrics. ### Reference repository Reference the original Streamlit codebase at `https://git.nokopia.com/yuris/titik-gambut` (local path `../titik-gambut`): - `app.py` lines 33–140: Custom theme CSS, color palette, loader styling, and base layout resets. - `app.py` lines 125–205: `.live-top-banner`, `.top-command-bar`, `.brand-block`, and typography hierarchy. - `app.py` lines 202–254: `.kpi-ribbon` and `.kpi-chip` components with 3px accent borders (`.ember`, `.flame`, `.water`). - `app.py` lines 288–320: Mobile responsive grid overrides for the KPI ribbon. ### Technical specifications 1. **Target files**: - DESIGN.md: Authoritative visual guide. - src/app/globals.css: Theme variables and color tokens. - src/components/frame/top-command-bar.tsx: Top command bar with brand title, subtitle, and KPI ribbon. - src/components/frame/live-telemetry-banner.tsx: Slim banner with pulsing live dot (#4CE08A) and UTC/WIB time. - src/components/frame/kpi-chip.tsx: Reusable metric chip with border-l-[3px] accent styling. 2. **Semantic color tokens**: - Canvas / Body: #161917 - Card surface: #1F2622 - Border: #2E3832 - Ember accent: #E05A2B - Flame accent: #F5A623 - Water accent: #2FA4A9 - Live dot: #4CE08A with shadow-[0_0_0_3px_rgba(76,224,138,0.25)] 3. **KPI metrics in top ribbon**: - Total Hotspot (neutral blue-green border #3B8EA5) - Gambut Kritis (ember border #E05A2B) - TMAT Kering (flame border #F5A623) - Provinsi Terdampak (neutral #2FA4A9) ### Acceptance criteria - [x] Interface matches colors, borders, and typography specified in DESIGN.md and original titik-gambut app.py. - [x] Top command bar and KPI ribbon render smoothly above the map canvas. - [x] KPI values update dynamically when active hotspots or clusters load. - [x] Fully responsive on mobile with compact stacked ribbon.
yuris closed this issue 2026-10-14 21:47:27 +00:00
yuris changed title from Issue 15: Streamlit visual theme alignment, peatland design tokens, and top telemetry KPI bar to Streamlit visual theme alignment, peatland design tokens, and top telemetry KPI bar 2026-10-14 22:31:30 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feat/issue-51-concessions-layer
feat/issue-46-dual-mode-tile-url-resolver
feat/issue-44-45-protomaps-basemap-cutover
No results found.
Labels
Clear labels   
backend
Backend task

  
frontend
Frontend task

No labels
backend
frontend
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/titik-gambut-next#16
No description provided.