Spaces:
Running
Running
Finish Refuge->Fugee rebrand (DESIGN, mockup, scripts, SKILL)
Browse files- .agents/skills/refuge/SKILL.md +5 -5
- DESIGN.md +11 -11
- data/scripts/enrich_downloader.py +1 -1
- data/scripts/query_data.py +3 -3
- data/scripts/refresh_data.py +1 -1
- data/scripts/unhcr_downloader.py +3 -3
- mockup.html +10 -10
- requirements.txt +1 -1
.agents/skills/refuge/SKILL.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
| 1 |
---
|
| 2 |
-
description: "
|
| 3 |
---
|
| 4 |
|
| 5 |
-
#
|
| 6 |
|
| 7 |
-
You are the primary coding agent for **
|
| 8 |
the Hugging Face Build Small Hackathon (June 5–15, 2026).
|
| 9 |
|
| 10 |
-
## What
|
| 11 |
|
| 12 |
-
|
| 13 |
5-phase agentic flow: language selection → structured interview → situation
|
| 14 |
assessment (visible reasoning) → country recommendations → document package.
|
| 15 |
|
|
|
|
| 1 |
---
|
| 2 |
+
description: "Fugee — agentic asylum guidance assistant. Full project context and working conventions for Codex."
|
| 3 |
---
|
| 4 |
|
| 5 |
+
# Fugee — Codex Skill
|
| 6 |
|
| 7 |
+
You are the primary coding agent for **Fugee**, a hackathon submission for
|
| 8 |
the Hugging Face Build Small Hackathon (June 5–15, 2026).
|
| 9 |
|
| 10 |
+
## What Fugee does
|
| 11 |
|
| 12 |
+
Fugee guides displaced people, asylum seekers, and refugees through a
|
| 13 |
5-phase agentic flow: language selection → structured interview → situation
|
| 14 |
assessment (visible reasoning) → country recommendations → document package.
|
| 15 |
|
DESIGN.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
---
|
| 2 |
-
name:
|
| 3 |
description: A calm, trustworthy guide that helps displaced people understand their legal options, find safe destination countries, and prepare their documentation — the digital equivalent of a knowledgeable, compassionate case worker.
|
| 4 |
|
| 5 |
colors:
|
|
@@ -66,13 +66,13 @@ components:
|
|
| 66 |
document-item: { bg: surface, border: "1px line", radius: md, pad: "13px 14px", icon: "38px primary-tint square", action: "38px download button" }
|
| 67 |
---
|
| 68 |
|
| 69 |
-
#
|
| 70 |
|
| 71 |
## 1. Overview
|
| 72 |
|
| 73 |
-
|
| 74 |
|
| 75 |
-
**Brand personality.**
|
| 76 |
|
| 77 |
**Emotional target.** The first feeling should be *relief*: "someone calm is going to help me, and I am in control here." Every screen should reduce cognitive load and reinforce safety, privacy, and agency.
|
| 78 |
|
|
@@ -86,7 +86,7 @@ Refuge is an agentic assistant for displaced people, asylum seekers, and refugee
|
|
| 86 |
- Corporate/government blue, harsh pure white (`#FFF` as the page background), and clinical gray UI.
|
| 87 |
- Startup tropes: neon gradients, glassmorphism, oversized rounded everything, emoji as decoration.
|
| 88 |
- Chatbot-generic patterns: a lone text box, bouncing 3-dot avatars as the whole personality, dark mode "AI" aesthetics.
|
| 89 |
-
- Anything that feels like a form to be failed.
|
| 90 |
|
| 91 |
---
|
| 92 |
|
|
@@ -94,7 +94,7 @@ Refuge is an agentic assistant for displaced people, asylum seekers, and refugee
|
|
| 94 |
|
| 95 |
Color carries meaning here; it is never decorative for its own sake.
|
| 96 |
|
| 97 |
-
- **Primary — Deep teal-green `#0E6A58`.** The voice of
|
| 98 |
- **Secondary — `#2E7D6C`.** A lighter supporting teal used only in gradients (e.g. the assessment progress bar) and subtle accents. Never competes with primary for attention.
|
| 99 |
- **Accent — Warm amber `#E07B39`.** The single call-to-action color and the color of *the person* (user message bubbles, their selections). Amber is human warmth and forward motion — a lantern, not an alarm. Reserve it for the one thing you want the person to do next, and for representing the user's own voice. `accent-deep #C26329` handles hover/pressed and the solid drop-shadow under primary buttons. `accent-tint #FBEDE1` fills user bubbles and gentle highlights.
|
| 100 |
- **Background — `#F7F5F0`.** Warm off-white, like paper. It makes the whole product feel calmer and more human than stark white and reduces glare for tired eyes.
|
|
@@ -110,7 +110,7 @@ Color carries meaning here; it is never decorative for its own sake.
|
|
| 110 |
|
| 111 |
Two families, each with a clear job.
|
| 112 |
|
| 113 |
-
- **Fraunces (display serif)** — the app name, page/section headings, country names, and document titles. Its soft, slightly old-style character is what makes
|
| 114 |
- **Inter (UI sans)** — everything else: body copy, messages, labels, buttons, data. Chosen for its calm, highly legible letterforms at small sizes and across many languages/scripts.
|
| 115 |
|
| 116 |
**Hierarchy & when to use it.**
|
|
@@ -140,7 +140,7 @@ Two families, each with a clear job.
|
|
| 140 |
|
| 141 |
## 5. Elevation & Depth
|
| 142 |
|
| 143 |
-
Depth is **minimal and meaningful**.
|
| 144 |
|
| 145 |
- `shadow-sm` — `0 1px 2px rgba(13,46,38,.06)`: avatars, small chips, subtle hover lift on files/cards.
|
| 146 |
- `shadow-md` — `0 6px 20px rgba(13,46,38,.08)`: the main "screen" frames that hold each phase.
|
|
@@ -175,7 +175,7 @@ Roundness communicates softness and safety here, applied on a consistent scale.
|
|
| 175 |
|
| 176 |
**Phase pill / progress rail (`phase-pill`).** A horizontal row of numbered 22px dots joined by short hairlines. *Done* = filled teal dot with a white check, secondary-color label. *Active* = filled amber dot with a 4px `accent-tint` halo and a bold, full-strength label. *Upcoming* = white dot, `line-strong` border, muted number. On mobile, hide the text and keep the dots. Order for the interview: Intake → Situation → History → Goals → Review.
|
| 177 |
|
| 178 |
-
**Messages (`message-agent`, `message-user`).** Agent messages sit left with a 34px teal avatar bearing the white
|
| 179 |
|
| 180 |
**Structured responder.** Below the current question, the answer control adapts to the question via a small segmented switch (Choice / Country / Free text):
|
| 181 |
- *Multiple-choice pills* — round, single- or multi-select; selected pill fills teal with a leading check. Comfortable 44px tap height.
|
|
@@ -188,7 +188,7 @@ Roundness communicates softness and safety here, applied on a consistent scale.
|
|
| 188 |
|
| 189 |
**Language pill (`language-pill`).** Round, white, hairline border; shows the language in its own script with a small romanized gloss. Selected = filled teal. Used in the intake grid; wraps freely.
|
| 190 |
|
| 191 |
-
**Document item (`document-item`).** A row with a 38px `primary-tint` file-type icon, a bold title + muted meta line (format, pages, languages), and a 38px download button that fills teal on hover. **Checklist items** use a custom 22px checkbox that fills `success` with a white check when ticked; checked rows mute and strike their label. **Document preview** is a white, page-like card with a soft bottom fade; interview-derived values are highlighted with an `accent-tint` "fill" mark to show what
|
| 192 |
|
| 193 |
**Trust note.** A small rounded-full chip with a lock glyph reaffirming privacy. Quiet, persistent, never a modal.
|
| 194 |
|
|
@@ -198,7 +198,7 @@ Roundness communicates softness and safety here, applied on a consistent scale.
|
|
| 198 |
|
| 199 |
**Do**
|
| 200 |
- Keep one clear primary action (amber) per screen; everything else is secondary or ghost.
|
| 201 |
-
- Use teal for *
|
| 202 |
- Show the agent's reasoning openly; prefer a written, progressive "document being thought through" over spinners.
|
| 203 |
- Address the person as "you," in plain, respectful, reassuring language. Offer "Save and continue later" wherever the journey is long.
|
| 204 |
- Let layouts breathe — honor the spacing scale and the 64px section rhythm.
|
|
|
|
| 1 |
---
|
| 2 |
+
name: Fugee
|
| 3 |
description: A calm, trustworthy guide that helps displaced people understand their legal options, find safe destination countries, and prepare their documentation — the digital equivalent of a knowledgeable, compassionate case worker.
|
| 4 |
|
| 5 |
colors:
|
|
|
|
| 66 |
document-item: { bg: surface, border: "1px line", radius: md, pad: "13px 14px", icon: "38px primary-tint square", action: "38px download button" }
|
| 67 |
---
|
| 68 |
|
| 69 |
+
# Fugee — Design System
|
| 70 |
|
| 71 |
## 1. Overview
|
| 72 |
|
| 73 |
+
Fugee is an agentic assistant for displaced people, asylum seekers, and refugees. The people who use it are often frightened, exhausted, and making decisions that affect their safety and their family's future. The design exists to lower that fear, not to impress.
|
| 74 |
|
| 75 |
+
**Brand personality.** Fugee behaves like a knowledgeable, compassionate case worker — patient, clear, never rushed, never alarmist. It is competent without being clinical, warm without being saccharine, serious without being bureaucratic.
|
| 76 |
|
| 77 |
**Emotional target.** The first feeling should be *relief*: "someone calm is going to help me, and I am in control here." Every screen should reduce cognitive load and reinforce safety, privacy, and agency.
|
| 78 |
|
|
|
|
| 86 |
- Corporate/government blue, harsh pure white (`#FFF` as the page background), and clinical gray UI.
|
| 87 |
- Startup tropes: neon gradients, glassmorphism, oversized rounded everything, emoji as decoration.
|
| 88 |
- Chatbot-generic patterns: a lone text box, bouncing 3-dot avatars as the whole personality, dark mode "AI" aesthetics.
|
| 89 |
+
- Anything that feels like a form to be failed. Fugee guides; it does not gate.
|
| 90 |
|
| 91 |
---
|
| 92 |
|
|
|
|
| 94 |
|
| 95 |
Color carries meaning here; it is never decorative for its own sake.
|
| 96 |
|
| 97 |
+
- **Primary — Deep teal-green `#0E6A58`.** The voice of Fugee. Used for the agent, primary structure (avatars, progress, the roadmap spine), and trust signals. Teal-green reads as safety, growth, and steadiness without the cold authority of corporate blue. `primary-deep #0A5042` is its shadow/pressed companion and the color for text sitting on a teal tint. `primary-tint #E5EFEA` is the agent's "breath" — agent message bubbles, hovers, and quiet surfaces.
|
| 98 |
- **Secondary — `#2E7D6C`.** A lighter supporting teal used only in gradients (e.g. the assessment progress bar) and subtle accents. Never competes with primary for attention.
|
| 99 |
- **Accent — Warm amber `#E07B39`.** The single call-to-action color and the color of *the person* (user message bubbles, their selections). Amber is human warmth and forward motion — a lantern, not an alarm. Reserve it for the one thing you want the person to do next, and for representing the user's own voice. `accent-deep #C26329` handles hover/pressed and the solid drop-shadow under primary buttons. `accent-tint #FBEDE1` fills user bubbles and gentle highlights.
|
| 100 |
- **Background — `#F7F5F0`.** Warm off-white, like paper. It makes the whole product feel calmer and more human than stark white and reduces glare for tired eyes.
|
|
|
|
| 110 |
|
| 111 |
Two families, each with a clear job.
|
| 112 |
|
| 113 |
+
- **Fraunces (display serif)** — the app name, page/section headings, country names, and document titles. Its soft, slightly old-style character is what makes Fugee feel human and institutional-in-a-good-way rather than like an app. Use it at weight 600 for headings, with tight tracking on large sizes.
|
| 114 |
- **Inter (UI sans)** — everything else: body copy, messages, labels, buttons, data. Chosen for its calm, highly legible letterforms at small sizes and across many languages/scripts.
|
| 115 |
|
| 116 |
**Hierarchy & when to use it.**
|
|
|
|
| 140 |
|
| 141 |
## 5. Elevation & Depth
|
| 142 |
|
| 143 |
+
Depth is **minimal and meaningful**. Fugee is paper-like and flat by default; elevation is used only to lift a true surface (a screen, a menu) off the page, never for decoration.
|
| 144 |
|
| 145 |
- `shadow-sm` — `0 1px 2px rgba(13,46,38,.06)`: avatars, small chips, subtle hover lift on files/cards.
|
| 146 |
- `shadow-md` — `0 6px 20px rgba(13,46,38,.08)`: the main "screen" frames that hold each phase.
|
|
|
|
| 175 |
|
| 176 |
**Phase pill / progress rail (`phase-pill`).** A horizontal row of numbered 22px dots joined by short hairlines. *Done* = filled teal dot with a white check, secondary-color label. *Active* = filled amber dot with a 4px `accent-tint` halo and a bold, full-strength label. *Upcoming* = white dot, `line-strong` border, muted number. On mobile, hide the text and keep the dots. Order for the interview: Intake → Situation → History → Goals → Review.
|
| 177 |
|
| 178 |
+
**Messages (`message-agent`, `message-user`).** Agent messages sit left with a 34px teal avatar bearing the white Fugee mark; bubble is `primary-tint` with a 5px-flattened bottom-left corner. User messages sit right with an amber avatar; bubble is `accent-tint` with a flattened bottom-right corner. The *current* agent question is a white bubble with a teal-tint border and `shadow-sm` so it stands out as "this is what we're answering now." A `thinking` indicator (three teal dots, gentle blink) plus a short reassuring phrase ("Fugee is listening") communicates streaming — never a spinner.
|
| 179 |
|
| 180 |
**Structured responder.** Below the current question, the answer control adapts to the question via a small segmented switch (Choice / Country / Free text):
|
| 181 |
- *Multiple-choice pills* — round, single- or multi-select; selected pill fills teal with a leading check. Comfortable 44px tap height.
|
|
|
|
| 188 |
|
| 189 |
**Language pill (`language-pill`).** Round, white, hairline border; shows the language in its own script with a small romanized gloss. Selected = filled teal. Used in the intake grid; wraps freely.
|
| 190 |
|
| 191 |
+
**Document item (`document-item`).** A row with a 38px `primary-tint` file-type icon, a bold title + muted meta line (format, pages, languages), and a 38px download button that fills teal on hover. **Checklist items** use a custom 22px checkbox that fills `success` with a white check when ticked; checked rows mute and strike their label. **Document preview** is a white, page-like card with a soft bottom fade; interview-derived values are highlighted with an `accent-tint` "fill" mark to show what Fugee pre-filled.
|
| 192 |
|
| 193 |
**Trust note.** A small rounded-full chip with a lock glyph reaffirming privacy. Quiet, persistent, never a modal.
|
| 194 |
|
|
|
|
| 198 |
|
| 199 |
**Do**
|
| 200 |
- Keep one clear primary action (amber) per screen; everything else is secondary or ghost.
|
| 201 |
+
- Use teal for *Fugee's* voice and structure, amber for *the person* and their next step.
|
| 202 |
- Show the agent's reasoning openly; prefer a written, progressive "document being thought through" over spinners.
|
| 203 |
- Address the person as "you," in plain, respectful, reassuring language. Offer "Save and continue later" wherever the journey is long.
|
| 204 |
- Let layouts breathe — honor the spacing scale and the 64px section rhythm.
|
data/scripts/enrich_downloader.py
CHANGED
|
@@ -54,7 +54,7 @@ log = logging.getLogger("enrich")
|
|
| 54 |
|
| 55 |
HEADERS = {
|
| 56 |
"Accept": "application/json",
|
| 57 |
-
"User-Agent": "
|
| 58 |
}
|
| 59 |
|
| 60 |
# ── Step 1: Build ISO3 → UNHCR code mapping ───────────────────────────────────
|
|
|
|
| 54 |
|
| 55 |
HEADERS = {
|
| 56 |
"Accept": "application/json",
|
| 57 |
+
"User-Agent": "Fugee/1.0 (HuggingFace hackathon; humanitarian AI tool)",
|
| 58 |
}
|
| 59 |
|
| 60 |
# ── Step 1: Build ISO3 → UNHCR code mapping ───────────────────────────────────
|
data/scripts/query_data.py
CHANGED
|
@@ -1,7 +1,7 @@
|
|
| 1 |
"""
|
| 2 |
UNHCR Data Query Helper
|
| 3 |
========================
|
| 4 |
-
Used internally by
|
| 5 |
Queries the local processed JSON files — no network required at runtime.
|
| 6 |
|
| 7 |
This is the query layer between the agent tools and the downloaded data.
|
|
@@ -317,11 +317,11 @@ def get_footnotes(country_code: str) -> list[str]:
|
|
| 317 |
]
|
| 318 |
|
| 319 |
|
| 320 |
-
# ── Composite: full country profile for
|
| 321 |
|
| 322 |
@dataclass
|
| 323 |
class CountryProfile:
|
| 324 |
-
"""Everything
|
| 325 |
country: CountryInfo
|
| 326 |
latest_acceptance_rate: Optional[AcceptanceRate]
|
| 327 |
application_trend: list[dict] # last 5 years of applications
|
|
|
|
| 1 |
"""
|
| 2 |
UNHCR Data Query Helper
|
| 3 |
========================
|
| 4 |
+
Used internally by Fugee's country_lookup tool.
|
| 5 |
Queries the local processed JSON files — no network required at runtime.
|
| 6 |
|
| 7 |
This is the query layer between the agent tools and the downloaded data.
|
|
|
|
| 317 |
]
|
| 318 |
|
| 319 |
|
| 320 |
+
# ── Composite: full country profile for Fugee ───────────────────────────────
|
| 321 |
|
| 322 |
@dataclass
|
| 323 |
class CountryProfile:
|
| 324 |
+
"""Everything Fugee needs about a potential asylum country for a given origin."""
|
| 325 |
country: CountryInfo
|
| 326 |
latest_acceptance_rate: Optional[AcceptanceRate]
|
| 327 |
application_trend: list[dict] # last 5 years of applications
|
data/scripts/refresh_data.py
CHANGED
|
@@ -77,7 +77,7 @@ def run_downloader(args: list[str]):
|
|
| 77 |
|
| 78 |
|
| 79 |
def main():
|
| 80 |
-
parser = argparse.ArgumentParser(description="Refresh UNHCR data for
|
| 81 |
parser.add_argument("--full", action="store_true", help="Re-download all endpoints")
|
| 82 |
parser.add_argument("--nowcast", action="store_true", help="Refresh nowcasting only")
|
| 83 |
parser.add_argument("--check", action="store_true", help="Check data freshness and exit")
|
|
|
|
| 77 |
|
| 78 |
|
| 79 |
def main():
|
| 80 |
+
parser = argparse.ArgumentParser(description="Refresh UNHCR data for Fugee.")
|
| 81 |
parser.add_argument("--full", action="store_true", help="Re-download all endpoints")
|
| 82 |
parser.add_argument("--nowcast", action="store_true", help="Refresh nowcasting only")
|
| 83 |
parser.add_argument("--check", action="store_true", help="Check data freshness and exit")
|
data/scripts/unhcr_downloader.py
CHANGED
|
@@ -156,7 +156,7 @@ ENDPOINTS = {
|
|
| 156 |
"paginated": True,
|
| 157 |
"refresh_frequency": "annual",
|
| 158 |
"refuge_use": (
|
| 159 |
-
"THE most important endpoint for
|
| 160 |
"Acceptance rates per origin × asylum country pair. "
|
| 161 |
"Used in Phase 3 assessment to score country recommendations. "
|
| 162 |
"E.g. 'Ethiopians in Kenya: 78% total protection rate (2023)'."
|
|
@@ -402,7 +402,7 @@ def download_endpoint(name: str, cfg: dict, year_from: int | None = None) -> dic
|
|
| 402 |
clean_params = {key_map.get(k, k): v for k, v in params.items()}
|
| 403 |
|
| 404 |
with httpx.Client(
|
| 405 |
-
headers={"Accept": "application/json", "User-Agent": "
|
| 406 |
follow_redirects=True,
|
| 407 |
) as client:
|
| 408 |
if cfg["paginated"]:
|
|
@@ -455,7 +455,7 @@ def update_manifest(summaries: list[dict]):
|
|
| 455 |
|
| 456 |
def main():
|
| 457 |
parser = argparse.ArgumentParser(
|
| 458 |
-
description="Download UNHCR Refugee Statistics API data for
|
| 459 |
)
|
| 460 |
parser.add_argument("--all", action="store_true", help="Download all endpoints")
|
| 461 |
parser.add_argument("--refresh", action="store_true", help="Re-download annual endpoints only")
|
|
|
|
| 156 |
"paginated": True,
|
| 157 |
"refresh_frequency": "annual",
|
| 158 |
"refuge_use": (
|
| 159 |
+
"THE most important endpoint for Fugee. "
|
| 160 |
"Acceptance rates per origin × asylum country pair. "
|
| 161 |
"Used in Phase 3 assessment to score country recommendations. "
|
| 162 |
"E.g. 'Ethiopians in Kenya: 78% total protection rate (2023)'."
|
|
|
|
| 402 |
clean_params = {key_map.get(k, k): v for k, v in params.items()}
|
| 403 |
|
| 404 |
with httpx.Client(
|
| 405 |
+
headers={"Accept": "application/json", "User-Agent": "Fugee/1.0 (hackathon; contact via HF)"},
|
| 406 |
follow_redirects=True,
|
| 407 |
) as client:
|
| 408 |
if cfg["paginated"]:
|
|
|
|
| 455 |
|
| 456 |
def main():
|
| 457 |
parser = argparse.ArgumentParser(
|
| 458 |
+
description="Download UNHCR Refugee Statistics API data for Fugee."
|
| 459 |
)
|
| 460 |
parser.add_argument("--all", action="store_true", help="Download all endpoints")
|
| 461 |
parser.add_argument("--refresh", action="store_true", help="Re-download annual endpoints only")
|
mockup.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
-
<title>
|
| 7 |
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
| 8 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
| 9 |
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;450;500;600;700&display=swap" rel="stylesheet" />
|
|
@@ -388,7 +388,7 @@
|
|
| 388 |
<span class="brand__mark" aria-hidden="true">
|
| 389 |
<svg width="30" height="30" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="15" fill="#0E6A58"/><path d="M16 7l7 6.5V25h-4.6v-6.2h-4.8V25H9V13.5L16 7z" fill="#fff"/><circle cx="16" cy="13.6" r="1.7" fill="#E07B39"/></svg>
|
| 390 |
</span>
|
| 391 |
-
<span class="brand__name">
|
| 392 |
<span class="brand__tag">Design Walkthrough</span>
|
| 393 |
</a>
|
| 394 |
<nav class="nav" aria-label="Phases">
|
|
@@ -431,7 +431,7 @@
|
|
| 431 |
<div class="intake__logo" aria-hidden="true">
|
| 432 |
<svg width="64" height="64" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="15.5" fill="#0E6A58"/><circle cx="16" cy="16" r="15.5" stroke="#0A5042"/><path d="M16 7l7 6.5V25h-4.6v-6.2h-4.8V25H9V13.5L16 7z" fill="#fff"/><circle cx="16" cy="13.6" r="1.7" fill="#E07B39"/></svg>
|
| 433 |
</div>
|
| 434 |
-
<h1>
|
| 435 |
<p class="intake__tagline">Safe guidance for people on the move</p>
|
| 436 |
|
| 437 |
<p class="intake__lbl">Choose your language</p>
|
|
@@ -502,7 +502,7 @@
|
|
| 502 |
<div class="msg__av" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 32 32"><path d="M16 7l7 6.5V25h-4.6v-6.2h-4.8V25H9V13.5L16 7z" fill="#fff"/></svg></div>
|
| 503 |
<div class="msg__bubble">I understand, and I'm sorry you've had to go through this. I want to be sure I understand your situation fully. <strong>What is the primary reason you had to leave your home?</strong></div>
|
| 504 |
</div>
|
| 505 |
-
<div class="thinking" aria-live="polite"><span class="dots"><i></i><i></i><i></i></span>
|
| 506 |
</div>
|
| 507 |
|
| 508 |
<!-- structured responder -->
|
|
@@ -544,7 +544,7 @@
|
|
| 544 |
|
| 545 |
<!-- text -->
|
| 546 |
<div class="mode" data-pane="text">
|
| 547 |
-
<textarea class="freetext" placeholder="Take your time. You can write in any language —
|
| 548 |
</div>
|
| 549 |
|
| 550 |
<div class="responder__foot">
|
|
@@ -629,7 +629,7 @@
|
|
| 629 |
<summary><span class="caret">▸</span> What you need to prepare</summary>
|
| 630 |
<ul>
|
| 631 |
<li>Any identity document from Ethiopia (or a sworn statement if none)</li>
|
| 632 |
-
<li>Written personal statement —
|
| 633 |
<li>Names & ages of children traveling with you</li>
|
| 634 |
<li>Any evidence of the threat (photos, messages, witness names)</li>
|
| 635 |
</ul>
|
|
@@ -712,7 +712,7 @@
|
|
| 712 |
<div class="step__num">2</div>
|
| 713 |
<div class="step__body">
|
| 714 |
<h4>File your asylum claim</h4>
|
| 715 |
-
<p>Submit your personal statement and supporting evidence.
|
| 716 |
<div class="step__meta">
|
| 717 |
<span class="tag-s">RSD unit, Dept. of Refugee Services</span>
|
| 718 |
<span class="tag-s">⏱ Same week as registration</span>
|
|
@@ -772,7 +772,7 @@
|
|
| 772 |
<p class="pkg__lbl">Preview · Personal statement</p>
|
| 773 |
<article class="doc">
|
| 774 |
<h4>Personal Statement</h4>
|
| 775 |
-
<p class="doc__sub">In support of an application for refugee status · Prepared with
|
| 776 |
<p>My name is <span class="fill">[full name]</span>. I am a national of <span class="fill">Ethiopia</span>, born in <span class="fill">[town]</span>. I am currently in <span class="fill">Gedaref, Sudan</span>, traveling with my <span class="fill">two children</span>.</p>
|
| 777 |
<div class="doc__divider"></div>
|
| 778 |
<p>I left my home because of <span class="fill">political and ethnic persecution</span>. In November, armed men came to our village searching for people connected to the opposition. My husband was taken and we have not heard from him since…</p>
|
|
@@ -792,7 +792,7 @@
|
|
| 792 |
<label class="check">
|
| 793 |
<input type="checkbox" checked />
|
| 794 |
<span class="box"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
|
| 795 |
-
<span class="check__txt">Personal statement <small>Drafted by
|
| 796 |
</label>
|
| 797 |
<label class="check">
|
| 798 |
<input type="checkbox" checked />
|
|
@@ -852,7 +852,7 @@
|
|
| 852 |
</section>
|
| 853 |
|
| 854 |
<div class="footer">
|
| 855 |
-
<span class="brand__name">
|
| 856 |
Design walkthrough · all five phases · not a live application.
|
| 857 |
</div>
|
| 858 |
</main>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Fugee — Design Walkthrough</title>
|
| 7 |
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
| 8 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
| 9 |
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;450;500;600;700&display=swap" rel="stylesheet" />
|
|
|
|
| 388 |
<span class="brand__mark" aria-hidden="true">
|
| 389 |
<svg width="30" height="30" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="15" fill="#0E6A58"/><path d="M16 7l7 6.5V25h-4.6v-6.2h-4.8V25H9V13.5L16 7z" fill="#fff"/><circle cx="16" cy="13.6" r="1.7" fill="#E07B39"/></svg>
|
| 390 |
</span>
|
| 391 |
+
<span class="brand__name">Fugee</span>
|
| 392 |
<span class="brand__tag">Design Walkthrough</span>
|
| 393 |
</a>
|
| 394 |
<nav class="nav" aria-label="Phases">
|
|
|
|
| 431 |
<div class="intake__logo" aria-hidden="true">
|
| 432 |
<svg width="64" height="64" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="15.5" fill="#0E6A58"/><circle cx="16" cy="16" r="15.5" stroke="#0A5042"/><path d="M16 7l7 6.5V25h-4.6v-6.2h-4.8V25H9V13.5L16 7z" fill="#fff"/><circle cx="16" cy="13.6" r="1.7" fill="#E07B39"/></svg>
|
| 433 |
</div>
|
| 434 |
+
<h1>Fugee</h1>
|
| 435 |
<p class="intake__tagline">Safe guidance for people on the move</p>
|
| 436 |
|
| 437 |
<p class="intake__lbl">Choose your language</p>
|
|
|
|
| 502 |
<div class="msg__av" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 32 32"><path d="M16 7l7 6.5V25h-4.6v-6.2h-4.8V25H9V13.5L16 7z" fill="#fff"/></svg></div>
|
| 503 |
<div class="msg__bubble">I understand, and I'm sorry you've had to go through this. I want to be sure I understand your situation fully. <strong>What is the primary reason you had to leave your home?</strong></div>
|
| 504 |
</div>
|
| 505 |
+
<div class="thinking" aria-live="polite"><span class="dots"><i></i><i></i><i></i></span> Fugee is listening</div>
|
| 506 |
</div>
|
| 507 |
|
| 508 |
<!-- structured responder -->
|
|
|
|
| 544 |
|
| 545 |
<!-- text -->
|
| 546 |
<div class="mode" data-pane="text">
|
| 547 |
+
<textarea class="freetext" placeholder="Take your time. You can write in any language — Fugee will understand. Describe what happened in your own words.">In November, armed men came to our village. They were looking for people connected to the opposition. My husband was taken and we have not heard from him since.</textarea>
|
| 548 |
</div>
|
| 549 |
|
| 550 |
<div class="responder__foot">
|
|
|
|
| 629 |
<summary><span class="caret">▸</span> What you need to prepare</summary>
|
| 630 |
<ul>
|
| 631 |
<li>Any identity document from Ethiopia (or a sworn statement if none)</li>
|
| 632 |
+
<li>Written personal statement — Fugee drafts this for you</li>
|
| 633 |
<li>Names & ages of children traveling with you</li>
|
| 634 |
<li>Any evidence of the threat (photos, messages, witness names)</li>
|
| 635 |
</ul>
|
|
|
|
| 712 |
<div class="step__num">2</div>
|
| 713 |
<div class="step__body">
|
| 714 |
<h4>File your asylum claim</h4>
|
| 715 |
+
<p>Submit your personal statement and supporting evidence. Fugee has already drafted these for you.</p>
|
| 716 |
<div class="step__meta">
|
| 717 |
<span class="tag-s">RSD unit, Dept. of Refugee Services</span>
|
| 718 |
<span class="tag-s">⏱ Same week as registration</span>
|
|
|
|
| 772 |
<p class="pkg__lbl">Preview · Personal statement</p>
|
| 773 |
<article class="doc">
|
| 774 |
<h4>Personal Statement</h4>
|
| 775 |
+
<p class="doc__sub">In support of an application for refugee status · Prepared with Fugee</p>
|
| 776 |
<p>My name is <span class="fill">[full name]</span>. I am a national of <span class="fill">Ethiopia</span>, born in <span class="fill">[town]</span>. I am currently in <span class="fill">Gedaref, Sudan</span>, traveling with my <span class="fill">two children</span>.</p>
|
| 777 |
<div class="doc__divider"></div>
|
| 778 |
<p>I left my home because of <span class="fill">political and ethnic persecution</span>. In November, armed men came to our village searching for people connected to the opposition. My husband was taken and we have not heard from him since…</p>
|
|
|
|
| 792 |
<label class="check">
|
| 793 |
<input type="checkbox" checked />
|
| 794 |
<span class="box"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
|
| 795 |
+
<span class="check__txt">Personal statement <small>Drafted by Fugee · ready</small></span>
|
| 796 |
</label>
|
| 797 |
<label class="check">
|
| 798 |
<input type="checkbox" checked />
|
|
|
|
| 852 |
</section>
|
| 853 |
|
| 854 |
<div class="footer">
|
| 855 |
+
<span class="brand__name">Fugee</span> — Safe guidance for people on the move.<br />
|
| 856 |
Design walkthrough · all five phases · not a live application.
|
| 857 |
</div>
|
| 858 |
</main>
|
requirements.txt
CHANGED
|
@@ -1,4 +1,4 @@
|
|
| 1 |
-
#
|
| 2 |
# Versions pinned to one release before the latest available on 2026-06-07.
|
| 3 |
# Do not upgrade during a phase without explicit developer approval (ARCHITECTURE.md).
|
| 4 |
|
|
|
|
| 1 |
+
# Fugee — Python dependencies (pure-Python, no Node.js)
|
| 2 |
# Versions pinned to one release before the latest available on 2026-06-07.
|
| 3 |
# Do not upgrade during a phase without explicit developer approval (ARCHITECTURE.md).
|
| 4 |
|