Bagiyo Core UI Design Guide

Purpose

Bagiyo is a local community tool hub for Baguio City and Benguet.

The name comes from:

Baguio â€” the city identity.
Bagi-yo â€” a local phrase meaning â€œitâ€™s yours.â€

The product should feel like a useful digital space owned by and made for locals.

Bagiyo is not a tourism website.
Bagiyo is not a corporate SaaS dashboard.
Bagiyo is not a government portal.
Bagiyo is a practical local toolkit for everyday community use.

Product Identity

Core statement

Useful local tools for Baguio and Benguet.

Design intent

Bagiyo should feel:

Local
Calm
Useful
Trustworthy
Modern
Readable
Community-centered
Mountain-city inspired

It should not feel:

Touristy
Corporate
Flashy
Government-heavy
Cyberpunk
Generic dashboard-like
Overdesigned

Emotional Direction

Bagiyo should evoke:

Baguio pine trees
Mountain ridges
Cool weather
Fog and mist
Rainy-day practicality
Neighborhood familiarity
Local trust

Use those ideas as subtle design influence, not literal decoration.

The interface should answer:

What useful local thing can I do here?

Not:

How do we make this look like a Baguio postcard?

Utility comes first. Identity supports utility.

Visual Direction

Recommended theme name

Pine Mist

This is the default visual identity.

Mood:

Cool
Clean
Fresh
Calm
Readable
Local
Practical

Secondary theme name

Mountain Night

This is the dark mode.

Mood:

Night fog
Pine shadows
Soft contrast
Calm utility
Readable in low light

Theme Strategy

Bagiyo should support both light mode and dark mode.

The app should use one shared identity system:

Bagiyo Theme
  - Light mode: Pine Mist
  - Dark mode: Mountain Night

Recommended default:

Default: Light mode / Pine Mist
Optional: Dark mode / Mountain Night

Reasoning:

Many users will check local tools outdoors or during the day.
Some users will check alerts at night, during outages, or during bad weather.
Both modes improve usability.
Using design tokens from the start prevents future theme rewrites.

Do not hardcode component colors.

All colors must go through semantic CSS tokens.

Color System

Light Mode: Pine Mist

Use a misty, cool, green-gray base.

:root {
  --color-bg: #F4F7F2;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EAF0EA;

  --color-primary: #1F4D3A;
  --color-primary-hover: #173B2C;
  --color-primary-soft: #DDEADF;

  --color-accent: #A66A3F;
  --color-accent-hover: #875432;
  --color-accent-soft: #F1E2D4;

  --color-text: #1E2A24;
  --color-text-muted: #64726A;
  --color-text-subtle: #819087;

  --color-border: #D8E1DA;
  --color-border-strong: #B9C8BE;

  --color-danger: #B94A48;
  --color-danger-soft: #F4DADA;

  --color-warning: #B7791F;
  --color-warning-soft: #F6E7C8;

  --color-success: #2F6F4E;
  --color-success-soft: #DDEDE3;

  --color-info: #3F6F8F;
  --color-info-soft: #DDEAF1;
}

Dark Mode: Mountain Night

Use deep green-charcoal surfaces. Avoid pure black.

[data-theme="dark"] {
  --color-bg: #111814;
  --color-surface: #18231D;
  --color-surface-muted: #223128;

  --color-primary: #8FCFA9;
  --color-primary-hover: #A8DDBB;
  --color-primary-soft: #223B2C;

  --color-accent: #D0A16B;
  --color-accent-hover: #E0B680;
  --color-accent-soft: #3A2C20;

  --color-text: #EDF4EF;
  --color-text-muted: #AAB8AF;
  --color-text-subtle: #82928A;

  --color-border: #2B3A31;
  --color-border-strong: #3C5145;

  --color-danger: #E07A73;
  --color-danger-soft: #3D2423;

  --color-warning: #E0B25C;
  --color-warning-soft: #3A301E;

  --color-success: #8FCFA9;
  --color-success-soft: #223B2C;

  --color-info: #8EBAD4;
  --color-info-soft: #203340;
}

Semantic Token Rules

Components must use semantic tokens.

Good:

.card {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

Bad:

.card {
  background: #ffffff;
  color: #111111;
  border: 1px solid #dddddd;
}

Use intent-based tokens for stateful UI:

.badge-success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

Typography

Use a clean, readable sans-serif.

Recommended font personality:

Modern
Human
Friendly
Slightly rounded
Highly readable

Avoid:

Playful fonts
Condensed fonts
Decorative fonts
Overly futuristic fonts
Heavy corporate fonts

Suggested CSS baseline:

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
}

Use readable body text.

Minimum body size:

16px

Shape, Spacing, and Elevation

Shape

Bagiyo should use rounded but not childish shapes.

:root {
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 999px;
}

Spacing

Use consistent spacing tokens.

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

Elevation

Use low shadows. The app should not feel floaty or glossy.

:root {
  --shadow-sm: 0 1px 2px rgba(30, 42, 36, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 42, 36, 0.08);
}

In dark mode, prefer borders and surface contrast over heavy shadows.

Layout Direction

Bagiyo should feel like a tool hub, not a marketing landing page.

Recommended homepage structure:

Header
  - Bagiyo logo
  - Scope: Baguio & Benguet
  - Sign in / profile

Hero
  - Clear local product statement
  - Short explanation
  - Primary action: Browse tools

Tool Grid
  - Power outage alerts
  - Weather / rain watch
  - Road / traffic notes
  - Community notices
  - Emergency contacts
  - Saved alerts / subscriptions

Recent Updates
  - Latest outage notice
  - Latest advisory
  - Latest relevant local update

Footer
  - About
  - Privacy
  - Contact

The first screen must explain what Bagiyo is and what useful actions are available.

Avoid abstract hero sections that only look nice but do not help the user act.

Core Screens

Build these first:

1. Home / Tool Hub
2. Tool Detail Page
3. Login / Profile
4. Notification Rule Setup
5. Admin / Moderation Page

Do not design too many pages early.

The first release should prove:

The brand works.
The layout works.
The tool cards work.
Forms are usable.
Alerts are readable.
Authenticated actions are clear.
Admin moderation is possible.

The header should be simple and persistent.

Logo Direction

Avoid complex logos.

Recommended direction:

Wordmark: Bagiyo
Symbol: simple pine + mountain + location pin hybrid

Possible symbols:

Pine tree shaped like a location pin
Mountain ridge inside a rounded square
Letter â€œBâ€ with subtle pine/mountain cutout
Fog line crossing a mountain silhouette

Logo rules:

Must work at 32px.
Must work in light and dark mode.
Must work without gradients.
Must not depend on tiny details.
Must not look like a tourism board logo.

Visual Motifs

Use subtle motifs only.

Recommended:

Abstract mountain ridges
Soft fog gradients
Pine-needle accents
Topographic contour lines
Muted green-gray backgrounds
Rounded cards with soft borders

Avoid:

Literal pine tree clipart everywhere
Heavy photo backgrounds
Tourist postcard visuals
Bright festival colors everywhere
Overuse of Session Road/Burnham imagery
Decorative elements that reduce readability

Tool Cards

Tool cards are a core component.

Each tool card should include:

Icon
Title
Short description
Status badge
Primary action

Example content:

Power Outage Alerts
Get notified when your area appears in scheduled or live outage notices.

Rain & Weather Watch
Quick local weather signals for daily planning.

Road & Traffic Notes
Community-friendly updates for routes, closures, and heavy traffic.

Recommended structure:

<article class="tool-card">
  <div class="tool-card__icon"></div>
  <div class="tool-card__body">
    <h2>Power Outage Alerts</h2>
    <p>Get notified when your area appears in scheduled or live outage notices.</p>
  </div>
  <span class="badge badge-success">Available</span>
  <a class="button button-primary">Open tool</a>
</article>

Visual rules:

Cards should be easy to scan.
Icons should have consistent stroke/weight.
Description should be one sentence.
Status should be visible but not loud.
Primary action should be obvious.

Buttons

Buttons should be clear and utilitarian.

Types:

Primary
Secondary
Ghost
Danger

Example CSS:

.button {
  min-height: 44px;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

.button-primary {
  background: var(--color-primary);
  color: var(--color-bg);
}

.button-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.button-ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.button-danger {
  background: var(--color-danger);
  color: var(--color-bg);
}

Minimum tap target:

44px height

Forms

Forms are important because users may create notification rules, subscriptions, or preferences.

Form rules:

Labels must always be visible.
Placeholder text is not a label.
Error text must be specific.
Help text should be short.
Inputs must be large enough for mobile.
Validation errors should appear near the field.

Example:

Area keyword
[ Irisan ]

Use words that usually appear in local advisories, such as barangay, road, sitio, or nearby landmark.

Avoid vague errors.

Bad:

Invalid input.

Good:

Use at least 3 characters.

Alerts and Statuses

Status colors must be consistent.

Green  = normal, active, resolved, available
Amber  = scheduled, advisory, pending, possible issue
Red    = urgent, active outage, blocked, failed
Gray   = unknown, expired, inactive
Blue   = informational

Do not flood the interface with red.

Use red only on the affected item or message.

Example:

Active outage
Scheduled interruption
Resolved
Monitoring
Unknown

Notification Rule UI

This screen should be simple and hard to abuse.

Recommended fields:

Rule name
Area keyword
Notification type
Enabled/disabled

Recommended constraints:

Max notification rules per user: 3-5
Max keywords per rule: 5-10
Minimum keyword length: 3 characters
Rate-limit create/update actions
Require signed-in user
Require verified email if available

UI should explain that matching is based on text found in advisories.

Example helper text:

Bagiyo checks local advisories for words that match your saved area keywords.
Use barangay names, road names, sitios, or nearby landmarks.

Admin and Moderation UI

Admin screens should be plain and functional.

Admin users should be able to:

View users
View notification rules
Disable suspicious rules
Disable abusive users
View recent activity
Review failed notifications

Admin screens do not need decorative branding.

Prioritize tables, filters, search, and action clarity.

Mobile-First Rules

Bagiyo will likely be used mostly on phones.

Design rules:

Mobile first.
Cards stack vertically on small screens.
Tap targets must be large.
Avoid dense tables on mobile.
Use readable spacing.
Avoid tiny badges.
Avoid hover-only interactions.
Make forms easy to complete with one hand.

Recommended breakpoints:

:root {
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

Accessibility Rules

Minimum requirements:

Sufficient color contrast.
Keyboard navigable controls.
Visible focus states.
Semantic HTML.
Proper labels for form fields.
Buttons for actions, links for navigation.
Do not rely only on color to communicate status.
Respect prefers-reduced-motion.

Focus style example:

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

Reduced motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

Motion

Use minimal motion.

Allowed:

Subtle button hover
Gentle card hover
Small loading transitions
Drawer/menu slide

Avoid:

Large animated backgrounds
Constant moving fog
Overanimated icons
Motion that slows task completion

Motion should clarify interaction, not decorate the app.

Icon Style

Use one icon set.

Recommended icon direction:

Outline icons
Rounded stroke
Consistent stroke width
Simple geometry
No filled/outline mixing unless intentional

Icon examples:

Power outage: bolt
Weather: cloud/rain
Road: route/map
Community: message/megaphone
Emergency: phone/shield
Saved alerts: bell

Content Tone

Copy should be clear, local, and direct.

Good:

Get notified when your area appears in scheduled or live outage notices.

Avoid:

Experience the next generation of hyperlocal civic intelligence.

Use plain language.

Preferred tone:

Helpful
Direct
Local
Calm
Human

Avoid:

Hype
Corporate language
AI-sounding phrases
Excessive marketing copy

Angular Implementation Notes

Recommended structure:

src/
  app/
    core/
      auth/
      layout/
      theme/
    shared/
      components/
        button/
        card/
        badge/
        alert/
        form-field/
    features/
      home/
      tools/
      notifications/
      profile/
      admin/
    styles/
      tokens.css
      base.css
      typography.css
      components.css

Theme handling:

- Store theme preference in localStorage.
- Respect system preference initially.
- Allow manual override.
- Apply theme using data-theme on the document root.

Example:

const savedTheme = localStorage.getItem('theme');

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

const theme = savedTheme ?? (prefersDark ? 'dark' : 'light');

document.documentElement.setAttribute('data-theme', theme);

Do not put theme logic inside random feature components.

Theme logic belongs in a shared/core theme service.

CSS Architecture

Use global tokens and local component styles.

Recommended:

tokens.css
  - colors
  - spacing
  - radius
  - typography
  - shadows
  - z-index

base.css
  - html/body
  - reset
  - links
  - focus
  - accessibility

components.css or per-component styles
  - button
  - card
  - badge
  - alert
  - form controls

Avoid:

Random hardcoded colors
One-off spacing
Duplicated button styles
Component-specific theme overrides unless necessary
Styling based on exact page location

Page Shell

The page shell should include:

App header
Main content area
Optional footer

Suggested structure:

<body>
  <app-root>
    <app-shell>
      <app-header />
      <main>
        <router-outlet />
      </main>
      <app-footer />
    </app-shell>
  </app-root>
</body>

Main content should have a consistent max width.

Example:

.page-container {
  width: min(100% - 2rem, 1120px);
  margin-inline: auto;
}

Design Acceptance Checklist

Before merging UI work, check:

Brand

Feels like a local Baguio/Benguet tool, not a tourism site.
Uses pine/mountain/fog inspiration subtly.
Does not look like a generic admin dashboard.
Does not look like a government portal.

Theme

Usability

Accessibility

Keyboard navigation works.
Focus states are visible.
Color contrast is acceptable.
Status is not communicated by color alone.
Reduced motion is respected.

Maintainability

Components are reusable.
Styles use tokens.
Theme logic is centralized.
Feature-specific code does not leak into shared components.

Final Direction

Bagiyo should look and feel like:

A calm mountain-city utility app for locals.

It should not be decorative first.

It should be useful first, then local, then beautiful.

Design priority:

1. Clarity
2. Trust
3. Local identity
4. Speed
5. Visual polish