Spaces:
Sleeping
Sleeping
dhruv575 commited on
Commit ·
4033d96
1
Parent(s): 5d39869
Busted cache for static files
Browse files- STYLE_GUIDE.md +0 -156
- app.py +27 -4
STYLE_GUIDE.md
DELETED
|
@@ -1,156 +0,0 @@
|
|
| 1 |
-
|
| 2 |
-
# Polymarket Macro Dashboard — Style Guide
|
| 3 |
-
|
| 4 |
-
This document captures the visual, interaction, and layout conventions used in the Polymarket **Macro Dashboard**. It is intended as a reference for replicating or extending the Polymarket dashboard aesthetic in product, design, or engineering work.
|
| 5 |
-
|
| 6 |
-
---
|
| 7 |
-
|
| 8 |
-
## 1. Design Philosophy
|
| 9 |
-
|
| 10 |
-
- Data-first, probability-centric interface
|
| 11 |
-
- Minimal visual noise; strong information hierarchy
|
| 12 |
-
- Neutral, institutional tone suitable for finance and macro markets
|
| 13 |
-
- Fast scannability over decorative elements
|
| 14 |
-
|
| 15 |
-
---
|
| 16 |
-
|
| 17 |
-
## 2. Color System
|
| 18 |
-
|
| 19 |
-
### Base Colors
|
| 20 |
-
- **Background:** White / very light gray
|
| 21 |
-
- **Primary Text:** Near-black
|
| 22 |
-
- **Secondary Text:** Muted gray
|
| 23 |
-
- **Accent:** Subtle blue for links, interactive states, and focus
|
| 24 |
-
|
| 25 |
-
### Usage Principles
|
| 26 |
-
- Percentages and odds are visually dominant
|
| 27 |
-
- Color is used sparingly; emphasis comes from weight and spacing
|
| 28 |
-
- No aggressive gradients or saturated backgrounds
|
| 29 |
-
|
| 30 |
-
---
|
| 31 |
-
|
| 32 |
-
## 3. Typography
|
| 33 |
-
|
| 34 |
-
- **Font family:** Modern sans-serif
|
| 35 |
-
- **Headings:** Medium to bold weight
|
| 36 |
-
- **Body text:** Regular weight, high legibility
|
| 37 |
-
- **Numerical values:** Bold or semibold to anchor attention
|
| 38 |
-
|
| 39 |
-
### Hierarchy
|
| 40 |
-
1. Dashboard title
|
| 41 |
-
2. Section headers
|
| 42 |
-
3. Market question text
|
| 43 |
-
4. Metadata / category labels
|
| 44 |
-
|
| 45 |
-
---
|
| 46 |
-
|
| 47 |
-
## 4. Layout Structure
|
| 48 |
-
|
| 49 |
-
### Global Layout
|
| 50 |
-
- Fixed top navigation bar
|
| 51 |
-
- Vertical scrolling content area
|
| 52 |
-
- Card-based market listing
|
| 53 |
-
|
| 54 |
-
### Page Structure
|
| 55 |
-
```
|
| 56 |
-
[Top Navigation]
|
| 57 |
-
[Dashboard Selector]
|
| 58 |
-
[Dashboard Title]
|
| 59 |
-
[Market Sections]
|
| 60 |
-
├─ Market Card
|
| 61 |
-
├─ Market Card
|
| 62 |
-
[Footer / Persistent Nav]
|
| 63 |
-
```
|
| 64 |
-
|
| 65 |
-
Spacing is consistent and generous, prioritizing clarity.
|
| 66 |
-
|
| 67 |
-
---
|
| 68 |
-
|
| 69 |
-
## 5. Navigation
|
| 70 |
-
|
| 71 |
-
### Top Navigation
|
| 72 |
-
- Browse entry point
|
| 73 |
-
- Horizontal category filters (Politics, Macro, Crypto, etc.)
|
| 74 |
-
- Persistent search icon
|
| 75 |
-
|
| 76 |
-
### Dashboard Selector
|
| 77 |
-
- Inline tab-like controls (Macro, Elections, Fed Rates, etc.)
|
| 78 |
-
- Minimal styling; relies on text weight and underline/contrast
|
| 79 |
-
|
| 80 |
-
---
|
| 81 |
-
|
| 82 |
-
## 6. Market Cards
|
| 83 |
-
|
| 84 |
-
Each market card contains:
|
| 85 |
-
- Market question (headline)
|
| 86 |
-
- Probability / chance percentage
|
| 87 |
-
- Optional thumbnail or preview image
|
| 88 |
-
- Category or context label
|
| 89 |
-
|
| 90 |
-
### Card Characteristics
|
| 91 |
-
- Uniform width
|
| 92 |
-
- Light border or subtle shadow
|
| 93 |
-
- Rounded corners
|
| 94 |
-
- Clickable entire surface
|
| 95 |
-
|
| 96 |
-
---
|
| 97 |
-
|
| 98 |
-
## 7. Information Hierarchy
|
| 99 |
-
|
| 100 |
-
Priority order:
|
| 101 |
-
1. Probability / odds
|
| 102 |
-
2. Market question
|
| 103 |
-
3. Category or context
|
| 104 |
-
4. Supporting metadata
|
| 105 |
-
|
| 106 |
-
The user should be able to scan probabilities without reading full text.
|
| 107 |
-
|
| 108 |
-
---
|
| 109 |
-
|
| 110 |
-
## 8. Interaction Design
|
| 111 |
-
|
| 112 |
-
- Hover states are subtle (slight background or border change)
|
| 113 |
-
- Click targets are large and forgiving
|
| 114 |
-
- No modal-heavy flows on the dashboard level
|
| 115 |
-
- Transitions are fast and understated
|
| 116 |
-
|
| 117 |
-
---
|
| 118 |
-
|
| 119 |
-
## 9. Motion & Feedback
|
| 120 |
-
|
| 121 |
-
- Minimal animation
|
| 122 |
-
- Instant feedback on navigation
|
| 123 |
-
- No distracting micro-interactions
|
| 124 |
-
- Emphasis on speed and responsiveness
|
| 125 |
-
|
| 126 |
-
---
|
| 127 |
-
|
| 128 |
-
## 10. Accessibility & Readability
|
| 129 |
-
|
| 130 |
-
- High contrast between text and background
|
| 131 |
-
- Large tap targets for mobile
|
| 132 |
-
- Clear separation between interactive and static elements
|
| 133 |
-
|
| 134 |
-
---
|
| 135 |
-
|
| 136 |
-
## 11. Inferred Design Tokens (Example)
|
| 137 |
-
|
| 138 |
-
```css
|
| 139 |
-
:root {
|
| 140 |
-
--bg-primary: #ffffff;
|
| 141 |
-
--text-primary: #0a0a0a;
|
| 142 |
-
--text-secondary: #6b6b6b;
|
| 143 |
-
--accent: #1f6feb;
|
| 144 |
-
|
| 145 |
-
--radius-card: 8px;
|
| 146 |
-
--spacing-unit: 16px;
|
| 147 |
-
|
| 148 |
-
--font-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
| 149 |
-
}
|
| 150 |
-
```
|
| 151 |
-
|
| 152 |
-
---
|
| 153 |
-
|
| 154 |
-
## 12. Summary
|
| 155 |
-
|
| 156 |
-
The Polymarket Macro Dashboard prioritizes **trust, speed, and signal clarity**. Its design avoids ornamentation in favor of clean structure, strong typography, and probability-forward presentation. Any replication should preserve this restraint and information density.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
app.py
CHANGED
|
@@ -2,7 +2,7 @@ import os
|
|
| 2 |
import json
|
| 3 |
from fastapi import FastAPI, HTTPException
|
| 4 |
from fastapi.staticfiles import StaticFiles
|
| 5 |
-
from fastapi.responses import FileResponse
|
| 6 |
from fastapi.middleware.cors import CORSMiddleware
|
| 7 |
from pydantic import BaseModel
|
| 8 |
from typing import Optional, List, Dict, Any
|
|
@@ -59,7 +59,11 @@ class SimulationParams(BaseModel):
|
|
| 59 |
@app.get("/")
|
| 60 |
async def read_root():
|
| 61 |
"""Serve the frontend index.html"""
|
| 62 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
|
| 64 |
@app.get("/health")
|
| 65 |
async def health_check():
|
|
@@ -199,8 +203,27 @@ async def run_simulation(params: SimulationParams):
|
|
| 199 |
|
| 200 |
return results
|
| 201 |
|
| 202 |
-
# Mount static files
|
| 203 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 204 |
|
| 205 |
if __name__ == "__main__":
|
| 206 |
import uvicorn
|
|
|
|
| 2 |
import json
|
| 3 |
from fastapi import FastAPI, HTTPException
|
| 4 |
from fastapi.staticfiles import StaticFiles
|
| 5 |
+
from fastapi.responses import FileResponse, Response
|
| 6 |
from fastapi.middleware.cors import CORSMiddleware
|
| 7 |
from pydantic import BaseModel
|
| 8 |
from typing import Optional, List, Dict, Any
|
|
|
|
| 59 |
@app.get("/")
|
| 60 |
async def read_root():
|
| 61 |
"""Serve the frontend index.html"""
|
| 62 |
+
response = FileResponse("static/index.html")
|
| 63 |
+
response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
|
| 64 |
+
response.headers["Pragma"] = "no-cache"
|
| 65 |
+
response.headers["Expires"] = "0"
|
| 66 |
+
return response
|
| 67 |
|
| 68 |
@app.get("/health")
|
| 69 |
async def health_check():
|
|
|
|
| 203 |
|
| 204 |
return results
|
| 205 |
|
| 206 |
+
# Mount static files with no-cache headers
|
| 207 |
+
from starlette.responses import Response
|
| 208 |
+
|
| 209 |
+
class NoCacheStaticFiles(StaticFiles):
|
| 210 |
+
def __init__(self, *args, **kwargs):
|
| 211 |
+
super().__init__(*args, **kwargs)
|
| 212 |
+
|
| 213 |
+
async def __call__(self, scope, receive, send):
|
| 214 |
+
async def send_wrapper(message):
|
| 215 |
+
if message["type"] == "http.response.start":
|
| 216 |
+
# Add no-cache headers
|
| 217 |
+
headers = dict(message.get("headers", []))
|
| 218 |
+
headers[b"cache-control"] = b"no-cache, no-store, must-revalidate"
|
| 219 |
+
headers[b"pragma"] = b"no-cache"
|
| 220 |
+
headers[b"expires"] = b"0"
|
| 221 |
+
message["headers"] = list(headers.items())
|
| 222 |
+
await send(message)
|
| 223 |
+
|
| 224 |
+
await super().__call__(scope, receive, send_wrapper)
|
| 225 |
+
|
| 226 |
+
app.mount("/static", NoCacheStaticFiles(directory="static"), name="static")
|
| 227 |
|
| 228 |
if __name__ == "__main__":
|
| 229 |
import uvicorn
|