/* ============================================================= Migotask — Design Tokens Colors, type, spacing, radii, shadows. Light theme (the only theme the brand assets define so far). ============================================================= */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); :root { /* ---------- BRAND ---------- Migotask's pictogram is a teal→deep-green gradient. The check mark in the mark sits at the bright-teal end. */ --brand-teal-300: #5fb6a8; /* light end of the gradient */ --brand-teal-500: #2f8b85; /* mid-tone teal, the check */ --brand-teal-700: #1f5d68; /* deep teal-green */ --brand-teal-900: #0f3a47; /* darkest end of gradient */ --brand-gradient: linear-gradient(135deg, var(--brand-teal-300) 0%, var(--brand-teal-700) 55%, var(--brand-teal-900) 100%); /* ---------- NEUTRAL SCALE ---------- The chrome is a near-black navy; the canvas is a warm off-white. */ --neutral-0: #ffffff; --neutral-25: #fbf8f5; /* warm canvas behind boards */ --neutral-50: #f6f2ec; /* sidebar separators in light */ --neutral-100: #eef0f3; --neutral-200: #e1e4ea; --neutral-300: #c9cdd6; --neutral-400: #9aa1ad; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #2f3744; --neutral-800: #1d2330; /* sidebar */ --neutral-900: #141925; /* deepest sidebar / titlebar */ --neutral-950: #0b0f17; /* ---------- PRIMARY ACTION ---------- Bright royal blue used for "+ New Project" buttons & active cells. */ --primary-300: #7aa9ff; --primary-500: #2c6df0; --primary-600: #1f5cd9; --primary-700: #1748b4; /* ---------- STATUS / SWIMLANE ACCENTS ---------- Card left-bar colors visible in the kanban. */ --status-backlog: #e3464a; /* red */ --status-progress: #2c6df0; /* blue */ --status-review: #f5b73a; /* amber */ --status-done: #25a36a; /* green */ /* ---------- SEMANTIC FEEDBACK ---------- */ --success-500: #25a36a; --warning-500: #f5b73a; --danger-500: #e3464a; --info-500: #2c6df0; /* ---------- SURFACES ---------- */ --surface-app: var(--neutral-25); /* main canvas */ --surface-card: #ffffff; --surface-raised: #ffffff; --surface-sidebar: var(--neutral-800); --surface-titlebar: var(--neutral-900); --surface-input: #ffffff; --surface-muted: var(--neutral-100); /* ---------- TEXT ---------- */ --fg-1: #1d2330; /* primary on light */ --fg-2: #4b5563; /* secondary */ --fg-3: #6b7280; /* tertiary / meta */ --fg-muted: #9aa1ad; /* placeholder */ --fg-onbrand: #ffffff; --fg-on-dark-1: #f4f5f7; /* sidebar primary */ --fg-on-dark-2: #b3b9c4; /* sidebar inactive */ --fg-link: var(--primary-600); /* ---------- BORDERS ---------- */ --border-1: #e1e4ea; --border-2: #d3d8e0; --border-strong: #b6bcc7; --border-sidebar: #2a3140; /* ---------- TYPOGRAPHY ---------- The app screenshots use a clean humanist sans-serif. The closest widely-available match is Inter — flagged in the README as a substitution; please supply the source font if available. */ --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale (px) */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-36: 36px; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; /* ---------- SPACING (4px grid) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ---------- RADII ---------- */ --radius-sm: 4px; --radius-md: 6px; /* default for cards, inputs */ --radius-lg: 8px; /* board cards, modals */ --radius-xl: 12px; --radius-pill: 999px; /* ---------- SHADOWS ---------- Subtle. The app uses very gentle shadows; cards lean on borders + the colored left-bar more than elevation. */ --shadow-xs: 0 1px 2px rgba(20, 25, 37, 0.04); --shadow-sm: 0 1px 2px rgba(20, 25, 37, 0.06), 0 1px 3px rgba(20, 25, 37, 0.04); --shadow-md: 0 4px 10px rgba(20, 25, 37, 0.06), 0 2px 4px rgba(20, 25, 37, 0.04); --shadow-lg: 0 12px 28px rgba(20, 25, 37, 0.10), 0 4px 8px rgba(20, 25, 37, 0.06); /* ---------- BORDER WIDTHS ---------- */ --bw-thin: 1px; --bw-accent: 4px; /* the colored left-bar on kanban cards */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; } /* ============================================================= Semantic helpers ============================================================= */ html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--surface-app); font-size: var(--fs-14); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { font-size: var(--fs-30); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg-1); } h2, .h2 { font-size: var(--fs-24); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.005em; color: var(--fg-1); } h3, .h3 { font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); } h4, .h4 { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); } .eyebrow { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-600); } p, .body { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-1); } .body-sm { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--fg-2); } .meta { font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--fg-3); } code, .mono { font-family: var(--font-mono); font-size: 0.92em; }