/* ============================================================ BYTEFLOWAI DESIGN SYSTEM · DESIGN TOKENS Neumorphic surface · LinkedIn Blue primary Base: #E0E5EC · No teal, no gradients ============================================================ */ /* Google Fonts (load in ): Body uses the system default stack. Inter is only needed for headings and the BYTEFLOWAI wordmark. */ :root { /* ---- Surface ---- */ --bg: #E0E5EC; --bg-light: #F5F5F5; --bg-dark: #1A1A1A; /* ---- Brand ---- */ --brand: #0A66C2; --brand-dark: #084E99; --brand-light: #1A7FD4; /* ---- Neutrals ---- */ --fg: #3D4852; --muted: #6B7280; --accent-gray: #4A5568; --text-dark: #000000; --text-light: #FFFFFF; /* ---- Semantic (operational states) ---- */ --danger: #E57373; --warn: #E07B39; /* No success color defined. Teal is not part of this system. For positive states, use --brand or an iconic checkmark without a distinct color. */ /* ---- Shadow base hex (solid, no alpha) ---- */ --sd: #B8BEC7; --sl: #FFFFFF; /* ---- Raised shadows (outward depth) ---- */ --sh-lg: 8px 8px 16px var(--sd), -8px -8px 16px var(--sl); --sh-md: 6px 6px 12px var(--sd), -6px -6px 12px var(--sl); --sh-sm: 4px 4px 8px var(--sd), -4px -4px 8px var(--sl); /* ---- Inset shadows (inward depth, pressed) ---- */ --sh-in: inset 6px 6px 12px var(--sd), inset -6px -6px 12px var(--sl); --sh-in-deep: inset 8px 8px 16px var(--sd), inset -8px -8px 16px var(--sl); --sh-in-sm: inset 3px 3px 6px var(--sd), inset -3px -3px 6px var(--sl); /* ---- Button depth (3px soft) ---- */ --sh-btn: 3px 3px 6px var(--sd), -3px -3px 6px var(--sl); /* ---- Radius ---- */ --r-card: 28px; --r-card-lg: 32px; --r-micro: 14px; --r-btn: 12px; --r-pill: 9999px; /* ---- Spacing scale ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* ---- Typography (canonical for all artifacts) ---- */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-wordmark: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --fs-display: 28px; --fs-h2: 20px; --fs-h3: 18px; --fs-body: 16px; --fs-secondary: 14px; --fs-small: 12px; --fs-eyebrow: 11px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --t-fast: 150ms; --t-base: 300ms; --t-slow: 500ms; /* ---- Layout ---- */ --content-max: 960px; --content-max-sm: 900px; --page-pad-y: 40px; --page-pad-x: 24px; --breakpoint-mobile: 600px; } /* ============================================================ RESET + BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } .display { font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; } .wordmark { font-family: var(--font-wordmark); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; } .eyebrow { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-gray); } /* ============================================================ SURFACE UTILITIES ============================================================ */ .raised { background: var(--bg); box-shadow: var(--sh-md); border-radius: var(--r-card); } .raised-lg { background: var(--bg); box-shadow: var(--sh-lg); border-radius: var(--r-card-lg); } .raised-sm { background: var(--bg); box-shadow: var(--sh-sm); border-radius: var(--r-micro); } .inset { background: var(--bg); box-shadow: var(--sh-in); border-radius: var(--r-micro); } .inset-deep { background: var(--bg); box-shadow: var(--sh-in-deep); border-radius: var(--r-micro); } .inset-sm { background: var(--bg); box-shadow: var(--sh-in-sm); border-radius: var(--r-micro); } /* ============================================================ BUTTON ============================================================ */ .btn { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-secondary); font-weight: var(--fw-semibold); border: none; border-radius: var(--r-btn); box-shadow: var(--sh-btn); padding: 10px 18px; cursor: pointer; transition: box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .btn:hover { box-shadow: var(--sh-md); color: var(--brand); transform: translateY(-1px); } .btn:active { box-shadow: var(--sh-in-sm); transform: translateY(0); } .btn-primary { background: var(--brand); color: var(--text-light); box-shadow: var(--sh-sm); } .btn-primary:hover { background: var(--brand-dark); color: var(--text-light); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 600px) { :root { --page-pad-y: 24px; --page-pad-x: 16px; --fs-display: 22px; } }