Spaces:
Sleeping
Sleeping
| """ | |
| Human+ Design Tokens | |
| Aesthetic: Biopunk Dark Luxury | |
| Dark medical precision meets Bali wellness premium. | |
| """ | |
| # ── COLORS ───────────────────────────────────────────────────────────── | |
| COLORS = { | |
| # Backgrounds | |
| "bg_deep": "#070710", # Page background — near black, blue tint | |
| "bg_surface": "#0d0d1a", # Card surface | |
| "bg_elevated":"#131325", # Elevated card / modal | |
| "bg_subtle": "#1a1a2e", # Subtle hover / section | |
| "bg_line": "#1f1f38", # Borders, dividers | |
| # Brand gradient (signature) | |
| "grad_from": "#6d28d9", # Violet | |
| "grad_via": "#0284c7", # Sky blue | |
| "grad_to": "#06b6d4", # Cyan | |
| # Text | |
| "text_primary": "#f0f0fa", # Main text | |
| "text_secondary": "#8b8ba7", # Muted text | |
| "text_tertiary": "#4a4a6a", # Very muted | |
| # Semantic — biomarker status | |
| "optimal": "#10b981", # Green — in longevity range | |
| "warning": "#f59e0b", # Amber — borderline | |
| "danger": "#ef4444", # Red — needs attention | |
| "neutral": "#6b7280", # Gray — no data | |
| # Accent | |
| "accent_violet": "#8b5cf6", | |
| "accent_cyan": "#22d3ee", | |
| "accent_glow": "rgba(109, 40, 217, 0.25)", | |
| } | |
| # ── TYPOGRAPHY ────────────────────────────────────────────────────────── | |
| # Google Fonts: DM Serif Display (display) + DM Sans (body) | |
| FONTS = { | |
| "display": "'DM Serif Display', Georgia, serif", | |
| "body": "'DM Sans', system-ui, sans-serif", | |
| "mono": "'JetBrains Mono', 'Fira Code', monospace", | |
| # Weights | |
| "regular": "400", | |
| "medium": "500", | |
| "semibold":"600", | |
| "bold": "700", | |
| "black": "900", | |
| } | |
| # ── SPACING ───────────────────────────────────────────────────────────── | |
| SPACE = { | |
| "xs": "4px", | |
| "sm": "8px", | |
| "md": "16px", | |
| "lg": "24px", | |
| "xl": "40px", | |
| "2xl": "64px", | |
| } | |
| # ── RADIUS ────────────────────────────────────────────────────────────── | |
| RADIUS = { | |
| "sm": "8px", | |
| "md": "12px", | |
| "lg": "16px", | |
| "xl": "24px", | |
| "full": "9999px", | |
| } | |
| # ── SHADOWS ───────────────────────────────────────────────────────────── | |
| SHADOWS = { | |
| "card": "0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset", | |
| "glow": "0 0 32px rgba(109, 40, 217, 0.3)", | |
| "glow_green": "0 0 20px rgba(16, 185, 129, 0.25)", | |
| "glow_red": "0 0 20px rgba(239, 68, 68, 0.25)", | |
| } | |
| # ── BIOMARKER STATUS CONFIG ───────────────────────────────────────────── | |
| BIOMARKER_STATUS = { | |
| "optimal": { | |
| "color": COLORS["optimal"], | |
| "bg": "rgba(16, 185, 129, 0.1)", | |
| "border": "rgba(16, 185, 129, 0.3)", | |
| "label": "OPTIMAL", | |
| "emoji": "🟢", | |
| }, | |
| "warning": { | |
| "color": COLORS["warning"], | |
| "bg": "rgba(245, 158, 11, 0.1)", | |
| "border": "rgba(245, 158, 11, 0.3)", | |
| "label": "SUB-OPTIMAL", | |
| "emoji": "🟡", | |
| }, | |
| "danger": { | |
| "color": COLORS["danger"], | |
| "bg": "rgba(239, 68, 68, 0.1)", | |
| "border": "rgba(239, 68, 68, 0.3)", | |
| "label": "PERLU PERHATIAN", | |
| "emoji": "🔴", | |
| }, | |
| "neutral": { | |
| "color": COLORS["neutral"], | |
| "bg": "rgba(107, 114, 128, 0.1)", | |
| "border": "rgba(107, 114, 128, 0.3)", | |
| "label": "NO DATA", | |
| "emoji": "⚪", | |
| }, | |
| } | |
| # ── PROTOCOL SECTION CONFIG ───────────────────────────────────────────── | |
| PROTOCOL_SECTIONS = { | |
| "iv_drip": { | |
| "icon": "💉", | |
| "title": "Rekomendasi IV Drip", | |
| "color": COLORS["accent_violet"], | |
| }, | |
| "supplements": { | |
| "icon": "💊", | |
| "title": "Suplemen Harian", | |
| "color": COLORS["accent_cyan"], | |
| }, | |
| "lifestyle": { | |
| "icon": "🧊", | |
| "title": "Lifestyle & Recovery", | |
| "color": COLORS["optimal"], | |
| }, | |
| "retest": { | |
| "icon": "📅", | |
| "title": "Jadwal Retest & Next Step", | |
| "color": COLORS["warning"], | |
| }, | |
| } | |