frontend-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# Frontend Design Skill

## Mission

Produce clean, professional, light-mode Streamlit pages that are consistent
with the RISE UP design system and ready to run without additional changes.

The platform audience is investigators, security analysts, and operational
staff. The interface must communicate trust, accuracy, and operational clarity.
It must not look like a gaming dashboard or a generic AI chatbot.

---

## When to Use

- Adding a new page or tab to the application
- Redesigning an existing page or panel
- Fixing layout bugs, spacing issues, or style inconsistencies
- Adding a new UI component (card, badge, filter panel, timeline bar)
- Reviewing whether a proposed design follows the platform conventions

## When Not to Use

- Changes that are purely backend (database, R2, NIM API calls)
- Changes confined to `database.py`, `r2.py`, `nim.py`, or `video.py`
- Minor copy edits with no layout or style impact

---

## Inputs

Before starting any design work, read:

1. `src/frontend/app.py` — current page structure and session state keys
2. `src/frontend/database.py` — available fields for each report
3. `.streamlit/config.toml` — active theme overrides

---

## Design System

### Colour Palette

| Token | Hex | Use |
|---|---|---|
| Main background | `#FFFFFF` | Page and card surfaces |
| Page background | `#F7F8FA` | App canvas behind cards |
| Primary text | `#171A1F` | Headings and body copy |
| Secondary text | `#667085` | Labels, captions, metadata |
| Muted text | `#98A2B3` | Timestamps, fine print |
| Border | `#E4E7EC` | Card borders, dividers, inputs |
| Accent green | `#76B900` | Primary buttons, active nav, progress |
| Accent green hover | `#5A8F00` | Hover state for green elements |
| Active background | `#F1F8E8` | Selected nav item, active chip |
| Info blue | `#2563EB` | Informational highlights |
| Warning amber | `#D97706` | Review-required status |
| Critical red | `#DC2626` | Severity 5, incident markers |
| Success green | `#16A34A` | Verified status |

**Rule:** use accent green only for buttons, active nav indicators, and small
visual highlights. Do not use it for large backgrounds or long text.

### Typography

Import Inter from Google Fonts. Apply globally via CSS:

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html, body, [data-testid="stAppViewContainer"] {
    font-family: 'Inter', sans-serif !important;
}
```

| Role | Size | Weight |
|---|---|---|
| Page title | 28–32 px | 700 |
| Section heading | 18–22 px | 600 |
| Card title | 15–17 px | 600 |
| Body text | 14–16 px | 400 |
| Metadata / label | 12–14 px | 400–500 |

### Status Badges

Use these HTML classes (defined in the CSS block):

```html
<span class="status-badge status-verified">Verified</span>
<span class="status-badge status-review">Under Review</span>
<span class="status-badge status-unreviewed">Unreviewed</span>
```

Severity badges use `sev-1` through `sev-5` classes.

### Cards

Use `st.container(border=True)` for report cards in a grid layout.

Do NOT wrap `st.metric` widgets inside `st.container(border=True)` — this
causes a white circle rendering bug. Instead, style metrics with raw CSS
targeting `[data-testid="stMetric"]`, or use plain HTML `<div>` containers.

### Sidebar Navigation

Navigation uses `st.button` with `type="primary"` for the active page and
`type="secondary"` for inactive pages. Do not use `st.radio` or `st.selectbox`
for top-level navigation.

Active button style (via CSS):
```css
section[data-testid="stSidebar"] div.stButton > button[kind="primary"] {
    background-color: #F1F8E8 !important;
    color: #171A1F !important;
    border: 1px solid #76B900 !important;
}
```

### Filter Panels

From Danwidj/rise-up, GPL-3.0.

More from Danwidj/rise-up