@font-face { font-family: 'Inter'; src: url('https://files.buildwithfern.com/deel-prod.docs.buildwithfern.com/0be2399ea925f1f83ff974764761da9860ec50742ed29a5d4c1ffd0c5c7ac3a8/docs/assets/fonts/inter/Inter-Variable.ttf') format('ttf'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('https://files.buildwithfern.com/deel-prod.docs.buildwithfern.com/6136f73372fedc37b80fd1a8ec3e21734073ff17376f3672718f186779672e7a/docs/assets/fonts/inter/Inter-Italic-Variable.ttf') format('ttf'); font-weight: 400 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Bagoss'; src: url('https://files.buildwithfern.com/deel-prod.docs.buildwithfern.com/d5d9c71f6a8b347301ad13a8b316d0399652a12bf6012d8b95cd70650eddfca7/docs/assets/fonts/bagoss-condensed/bagoss-variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --header-height: 108px; --header-height-real: 64px; --mobile-header-height-real: 64px; --content-width: 640px; --sidebar-width: 288px; --page-width: 100vw; --logo-height: 20px; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-heading: 'Bagoss', 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } :root { /* for backwards compatibility */ --typography-body-font-family: var(--font-body); --typography-heading-font-family: var(--font-heading); --typography-code-font-family: var(--font-code); } .light, :root { --accent-1: #fcfdff; --accent-2: #f5f9ff; --accent-3: #eaf2ff; --accent-4: #ddeaff; --accent-5: #cce0ff; --accent-6: #b9d2ff; --accent-7: #a1bfff; --accent-8: #7ea5ff; --accent-9: #1d3476; --accent-10: #2d478b; --accent-11: #4a6dc6; --accent-12: #172d6e; --accent-a1: #0055ff03; --accent-a2: #0066ff0a; --accent-a3: #0062ff15; --accent-a4: #0062ff22; --accent-a5: #0064ff33; --accent-a6: #005cff46; --accent-a7: #0052ff5e; --accent-a8: #004eff81; --accent-a9: #001a64e2; --accent-a10: #002072d2; --accent-a11: #0032afb5; --accent-a12: #001860e8; --accent-contrast: #fff; --accent-surface: #f3f8ffcc; --accent-indicator: #1d3476; --accent-track: #1d3476; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --accent-1: oklch(99.3% 0.0039 266); --accent-2: oklch(98.1% 0.0113 266); --accent-3: oklch(96% 0.0233 266); --accent-4: oklch(93.7% 0.0438 266); --accent-5: oklch(90.6% 0.0635 266); --accent-6: oklch(86.4% 0.0818 266); --accent-7: oklch(80.9% 0.1053 266); --accent-8: oklch(73.4% 0.1442 266); --accent-9: oklch(34.9% 0.1169 266); --accent-10: oklch(41.5% 0.1169 266); --accent-11: oklch(55.4% 0.1442 266); --accent-12: oklch(32.3% 0.1169 266); --accent-a1: color(display-p3 0.0235 0.349 1 / 0.012); --accent-a2: color(display-p3 0.0235 0.349 0.8941 / 0.036); --accent-a3: color(display-p3 0.0078 0.3569 0.9529 / 0.079); --accent-a4: color(display-p3 0.0078 0.349 0.9412 / 0.126); --accent-a5: color(display-p3 0.0039 0.3255 0.9373 / 0.185); --accent-a6: color(display-p3 0.0039 0.2941 0.9412 / 0.255); --accent-a7: color(display-p3 0.0039 0.2627 0.9451 / 0.346); --accent-a8: color(display-p3 0.0039 0.251 0.9451 / 0.475); --accent-a9: color(display-p3 0 0.0784 0.3608 / 0.867); --accent-a10: color(display-p3 0 0.0941 0.4078 / 0.8); --accent-a11: color(display-p3 0 0.1529 0.6353 / 0.679); --accent-a12: color(display-p3 0 0.0706 0.3451 / 0.891); --accent-contrast: #fff; --accent-surface: color(display-p3 0.9569 0.9725 1 / 0.8); --accent-indicator: oklch(34.9% 0.1169 266); --accent-track: oklch(34.9% 0.1169 266); } } } .light, :root { --grayscale-1: #fdfcfd; --grayscale-2: #faf9fb; --grayscale-3: #f2eff3; --grayscale-4: #eae7ec; --grayscale-5: #e3dfe6; --grayscale-6: #dbd8e0; --grayscale-7: #d0cdd7; --grayscale-8: #bcbac7; --grayscale-9: #8e8c99; --grayscale-10: #84828e; --grayscale-11: #65636d; --grayscale-12: #211f26; --grayscale-a1: #55005503; --grayscale-a2: #2b005506; --grayscale-a3: #30004010; --grayscale-a4: #20003618; --grayscale-a5: #20003820; --grayscale-a6: #14003527; --grayscale-a7: #10003332; --grayscale-a8: #08003145; --grayscale-a9: #05001d73; --grayscale-a10: #0500197d; --grayscale-a11: #0400119c; --grayscale-a12: #020008e0; --grayscale-contrast: #000; --grayscale-surface: #ffffffcc; --grayscale-indicator: #8e8c99; --grayscale-track: #8e8c99; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --grayscale-1: color(display-p3 0.991 0.988 0.992); --grayscale-2: color(display-p3 0.98 0.976 0.984); --grayscale-3: color(display-p3 0.946 0.938 0.952); --grayscale-4: color(display-p3 0.915 0.906 0.925); --grayscale-5: color(display-p3 0.886 0.876 0.901); --grayscale-6: color(display-p3 0.856 0.846 0.875); --grayscale-7: color(display-p3 0.814 0.804 0.84); --grayscale-8: color(display-p3 0.735 0.728 0.777); --grayscale-9: color(display-p3 0.555 0.549 0.596); --grayscale-10: color(display-p3 0.514 0.508 0.552); --grayscale-11: color(display-p3 0.395 0.388 0.424); --grayscale-12: color(display-p3 0.128 0.122 0.147); --grayscale-a1: #55005503; --grayscale-a2: #2b005506; --grayscale-a3: #30004010; --grayscale-a4: #20003618; --grayscale-a5: #20003820; --grayscale-a6: #14003527; --grayscale-a7: #10003332; --grayscale-a8: #08003145; --grayscale-a9: #05001d73; --grayscale-a10: #0500197d; --grayscale-a11: #0400119c; --grayscale-a12: #020008e0; --grayscale-contrast: #000; --grayscale-surface: color(display-p3 1 1 1 / 80%); --grayscale-indicator: color(display-p3 0.555 0.549 0.596); --grayscale-track: color(display-p3 0.555 0.549 0.596); } } } .dark { --accent-1: #0a0818; --accent-2: #16122a; --accent-3: #271756; --accent-4: #35127c; --accent-5: #3f1c8e; --accent-6: #49299d; --accent-7: #5735b4; --accent-8: #683fd6; --accent-9: #5938b7; --accent-10: #4b2b9f; --accent-11: #b3a5ff; --accent-12: #e0dcff; --accent-a1: #0000f60b; --accent-a2: #694efc1e; --accent-a3: #6836fd4d; --accent-a4: #671cfd75; --accent-a5: #6d2cfe88; --accent-a6: #743efe98; --accent-a7: #7a49ffb0; --accent-a8: #7b49ffd4; --accent-a9: #7b4cffb3; --accent-a10: #7541fe9a; --accent-a11: #b3a5ff; --accent-a12: #e0dcff; --accent-contrast: #fff; --accent-surface: #211a4680; --accent-indicator: #5938b7; --accent-track: #5938b7; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --accent-1: oklch(14.8% 0.0339 288.6); --accent-2: oklch(20.1% 0.0459 288.6); --accent-3: oklch(26.9% 0.1076 288.6); --accent-4: oklch(31.7% 0.16 288.6); --accent-5: oklch(35.7% 0.1715 288.6); --accent-6: oklch(39.8% 0.1753 288.6); --accent-7: oklch(44.8% 0.1884 288.6); --accent-8: oklch(50.7% 0.2167 288.6); --accent-9: oklch(45.7% 0.1884 288.6); --accent-10: oklch(40.4% 0.1753 288.6); --accent-11: oklch(77.6% 0.2057 288.6); --accent-12: oklch(91.4% 0.0657 288.6); --accent-a1: color(display-p3 0 0 0.9843 / 0.038); --accent-a2: color(display-p3 0.4078 0.3333 1 / 0.108); --accent-a3: color(display-p3 0.4 0.2314 1 / 0.287); --accent-a4: color(display-p3 0.3882 0.1294 1 / 0.436); --accent-a5: color(display-p3 0.4078 0.1961 1 / 0.507); --accent-a6: color(display-p3 0.4431 0.2627 1 / 0.569); --accent-a7: color(display-p3 0.4627 0.3098 1 / 0.66); --accent-a8: color(display-p3 0.4745 0.3098 1 / 0.797); --accent-a9: color(display-p3 0.4667 0.3137 0.9961 / 0.673); --accent-a10: color(display-p3 0.451 0.2706 1 / 0.577); --accent-a11: color(display-p3 0.7098 0.6627 1 / 0.976); --accent-a12: color(display-p3 0.8863 0.8745 1 / 0.988); --accent-contrast: #fff; --accent-surface: color(display-p3 0.1176 0.102 0.2588 / 0.5); --accent-indicator: oklch(45.7% 0.1884 288.6); --accent-track: oklch(45.7% 0.1884 288.6); } } } .dark { --grayscale-1: #111113; --grayscale-2: #18191b; --grayscale-3: #212225; --grayscale-4: #272a2d; --grayscale-5: #2e3135; --grayscale-6: #363a3f; --grayscale-7: #43484e; --grayscale-8: #5a6169; --grayscale-9: #696e77; --grayscale-10: #777b84; --grayscale-11: #b0b4ba; --grayscale-12: #edeef0; --grayscale-a1: #00000000; --grayscale-a2: #d8f4f609; --grayscale-a3: #ddeaf814; --grayscale-a4: #d3edf81d; --grayscale-a5: #d9edfe25; --grayscale-a6: #d6ebfd30; --grayscale-a7: #d9edff40; --grayscale-a8: #d9edff5d; --grayscale-a9: #dfebfd6d; --grayscale-a10: #e5edfd7b; --grayscale-a11: #f1f7feb5; --grayscale-a12: #fcfdffef; --grayscale-contrast: #fff; --grayscale-surface: rgba(0, 0, 0, 0.05); --grayscale-indicator: #696e77; --grayscale-track: #696e77; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --grayscale-1: color(display-p3 0.067 0.067 0.074); --grayscale-2: color(display-p3 0.095 0.098 0.105); --grayscale-3: color(display-p3 0.13 0.135 0.145); --grayscale-4: color(display-p3 0.156 0.163 0.176); --grayscale-5: color(display-p3 0.183 0.191 0.206); --grayscale-6: color(display-p3 0.215 0.226 0.244); --grayscale-7: color(display-p3 0.265 0.28 0.302); --grayscale-8: color(display-p3 0.357 0.381 0.409); --grayscale-9: color(display-p3 0.415 0.431 0.463); --grayscale-10: color(display-p3 0.469 0.483 0.514); --grayscale-11: color(display-p3 0.692 0.704 0.728); --grayscale-12: color(display-p3 0.93 0.933 0.94); --grayscale-a1: #00000000; --grayscale-a2: #d8f4f609; --grayscale-a3: #ddeaf814; --grayscale-a4: #d3edf81d; --grayscale-a5: #d9edfe25; --grayscale-a6: #d6ebfd30; --grayscale-a7: #d9edff40; --grayscale-a8: #d9edff5d; --grayscale-a9: #dfebfd6d; --grayscale-a10: #e5edfd7b; --grayscale-a11: #f1f7feb5; --grayscale-a12: #fcfdffef; --grayscale-contrast: #fff; --grayscale-surface: color(display-p3 0 0 0 / 5%); --grayscale-indicator: color(display-p3 0.415 0.431 0.463); --grayscale-track: color(display-p3 0.415 0.431 0.463); } } } .light, :root { color-scheme: light; --accent: rgba(29, 52, 118, 1); --background: rgba(255, 255, 255, 1); --border: rgba(232, 235, 242, 1); --sidebar-background: rgba(255, 255, 255, 1); --header-background: rgba(255, 255, 255, 1); --card-background: initial; --theme-color: #fff; } .dark { color-scheme: dark; --accent: rgba(89, 56, 183, 1); --background: rgba(11, 10, 14, 1); --border: rgba(27, 27, 27, 1); --sidebar-background: rgba(11, 10, 14, 1); --header-background: rgba(11, 10, 14, 1); --card-background: initial; --theme-color: #0b0a0e; } /* ========================================================================= Landing page — design tokens & fonts Source: design_handoff_developer_docs/designs/colors_and_type.css and the inline

Added

Changed