/* ============================================================ HAMROH DESIGN SYSTEM — Color & Type Tokens ============================================================ Hamroh (Uzbek: "companion / travel partner") is a Flutter mobile app for Uzbek citizens. Brand language is warm, trustworthy, grounded, and a touch optimistic — like a familiar voice in a crowded airport. ============================================================ */ /* Google Fonts (substitutions until brand fonts are confirmed): - Display: Bricolage Grotesque (variable, expressive) - Body: Manrope (Latin Extended — Uzbek) - Mono: JetBrains Mono (flight numbers, codes) ----------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ============================================================ COLORS — Primitives ------------------------------------------------------------ Two brand hues sit at the centre: a warm coral ("Mehmon" for guest/welcome) and a deep forest green ("Tog" for mountain/trust). The neutrals lean warm — slightly tinted stones rather than pure greys — so the UI feels held, not clinical. ============================================================ */ /* Brand — Coral (the warm wave; CTAs, accents, the dot above the "h") */ --coral-50: #FDF1EB; --coral-100: #FADFD2; --coral-200: #F6BFA6; --coral-300: #F2A88A; --coral-400: #ED9170; /* Brand peach — from logo circles */ --coral-500: #E07757; --coral-600: #C45F3F; --coral-700: #9C4A30; --coral-800: #6F3622; --coral-900: #3E1E13; /* Brand — Forest (the grounding stroke; nav, text accents, trust) */ --forest-50: #ECF2EE; --forest-100: #D4E0D7; --forest-200: #A9C0B0; --forest-300: #7DA088; --forest-400: #588167; --forest-500: #3F654C; /* Brand green — from logo letterform */ --forest-600: #34543F; --forest-700: #294230; --forest-800: #1C2E22; --forest-900: #0E1A13; /* Neutrals — soft greys with a faint warm undertone so they sit calmly next to coral and forest without going truly cool/blue. */ --stone-0: #FFFFFF; --stone-50: #F7F6F4; /* Page background */ --stone-100: #EFEDE9; /* Card / surface raised */ --stone-200: #E0DED9; /* Hairline divider */ --stone-300: #C7C5BF; /* Disabled / soft border */ --stone-400: #9C9A94; /* Tertiary text */ --stone-500: #6F6D67; /* Secondary text */ --stone-600: #4F4D47; /* Primary body text */ --stone-700: #34322E; /* Strong text */ --stone-800: #1F1E1B; /* Headlines on light */ --stone-900: #100F0D; /* Ink — true darkest */ /* Semantic — Status (tuned to live next to coral/forest) */ --success-100: #D7EBD8; --success-500: #3F8C56; --success-700: #2A5F3A; --warning-100: #FAE8C7; --warning-500: #D9941F; --warning-700: #8E5E10; --danger-100: #F8D5CC; --danger-500: #D04A2E; --danger-700: #82281A; --info-100: #D6E4F3; --info-500: #3D6FAE; --info-700: #234470; /* ============================================================ SEMANTIC TOKENS — what UI code actually consumes ============================================================ */ /* Surfaces */ --bg: var(--stone-50); --bg-elevated: var(--stone-0); --bg-sunk: var(--stone-100); --bg-inverse: var(--forest-700); --surface-card: var(--stone-0); --surface-overlay: rgba(22, 19, 15, 0.55); /* Foreground / text */ --fg-1: var(--stone-800); /* headlines, primary */ --fg-2: var(--stone-600); /* body */ --fg-3: var(--stone-500); /* secondary */ --fg-4: var(--stone-400); /* tertiary / hints */ --fg-on-coral: #FFFFFF; --fg-on-forest: #F7F6F4; /* Borders / dividers */ --border-1: var(--stone-200); --border-2: var(--stone-300); --border-strong: var(--stone-700); --focus-ring: rgba(63, 101, 76, 0.35); /* forest @ 35% */ /* Brand-driven accents */ --accent: var(--coral-400); --accent-press: var(--coral-500); --accent-soft: var(--coral-50); --primary: var(--forest-500); /* primary nav / brand ink */ --primary-press: var(--forest-600); --primary-soft: var(--forest-50); /* Status (semantic aliases) */ --ok: var(--success-500); --warn: var(--warning-500); --err: var(--danger-500); --link: var(--info-500); /* ============================================================ TYPOGRAPHY — Families + scale ============================================================ */ --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --font-body: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* Type scale (mobile-first; matches a 16pt iOS baseline) */ --t-display: 44px; /* hero numbers, splash */ --t-h1: 32px; --t-h2: 26px; --t-h3: 22px; --t-h4: 18px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 13px; --t-micro: 11px; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.08em; /* Weights */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ============================================================ SPACING — 4px base, geometric-ish progression ============================================================ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* ============================================================ RADII — generous, mirrors the logo's circular DNA ============================================================ */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* cards */ --r-xl: 22px; /* sheets, large cards */ --r-2xl: 28px; --r-pill: 999px; /* ============================================================ SHADOWS — soft, warm-tinted (no pure black) ============================================================ */ --shadow-1: 0 1px 2px rgba(58, 50, 37, 0.06), 0 1px 1px rgba(58, 50, 37, 0.04); --shadow-2: 0 4px 12px rgba(58, 50, 37, 0.08), 0 1px 2px rgba(58, 50, 37, 0.04); --shadow-3: 0 12px 28px rgba(58, 50, 37, 0.12), 0 2px 4px rgba(58, 50, 37, 0.05); --shadow-press: inset 0 1px 0 rgba(58, 50, 37, 0.08); /* ============================================================ MOTION — gentle, slightly bouncy (companionable) ============================================================ */ --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1); /* gentle overshoot */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ============================================================ SEMANTIC ELEMENT STYLES — drop-in defaults ============================================================ */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--w-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0; } h3, .h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } h4, .h4 { font-family: var(--font-body); font-size: var(--t-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } p, .body { font-family: var(--font-body); font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-normal); color: var(--fg-2); margin: 0; } .caption { font-size: var(--t-caption); color: var(--fg-3); line-height: var(--lh-normal); } .eyebrow { font-size: var(--t-micro); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-3); } code, .mono { font-family: var(--font-mono); font-size: 0.92em; font-feature-settings: 'tnum' 1, 'zero' 1; color: var(--fg-1); } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-press); } ::selection { background: var(--coral-100); color: var(--stone-900); }