Something went wrong. Try again.
🔥 🔥 🔥 A Free & Self-hostable Airtable Alternative nocodb.com
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051/* Usage: Figma variables can be used as is like below: color: var(--nc-content-brand) background: var(--nc-bg-brand) border: 1px solid var(--nc-border-brand)*/
:root { --spacing-00: 0px; --spacing-01: 2px; --spacing-02: 4px; --spacing-03: 8px; --spacing-04: 12px; --spacing-05: 16px; --spacing-06: 24px; --spacing-07: 32px; --spacing-08: 40px; --spacing-09: 48px; --spacing-10: 64px; --spacing-11: 80px; --spacing-12: 96px; --spacing-13: 160px;
--font-size-h1: 64px; --font-size-h2: 40px; --font-size-h3: 24px;}
/* Refrence tokens - Light */:root { color-scheme: light;
--color-bg: #ffffff; --color-text: #000000;
--rgb-base: 0, 0, 0;
--color-base-black: #000000; --rgb-color-base-black: 0, 0, 0;
--color-base-white: #ffffff; --rgb-color-base-white: 255, 255, 255;
--color-base-none: #ffffff00;
/* 🎨 Brand */ --color-brand-20: #f5f6ff; --rgb-color-brand-20: 245, 246, 255;
--color-brand-50: #f0f3ff; --rgb-color-brand-50: 240, 243, 255;
--color-brand-100: #d6e0ff; --rgb-color-brand-100: 214, 224, 255;
--color-brand-200: #adc2ff; --rgb-color-brand-200: 173, 194, 255;
--color-brand-300: #85a3ff; --rgb-color-brand-300: 133, 163, 255;
--color-brand-400: #5c85ff; --rgb-color-brand-400: 92, 133, 255;
--color-brand-500: #3366ff; --rgb-color-brand-500: 51, 102, 255;
--color-brand-600: #2952cc; --rgb-color-brand-600: 41, 82, 204;
--color-brand-700: #1f3d99; --rgb-color-brand-700: 31, 61, 153;
--color-brand-800: #142966; --rgb-color-brand-800: 20, 41, 102;
--color-brand-900: #0a1433; --rgb-color-brand-900: 10, 20, 51;
/* 🎨 Gray */ --color-gray-20: #fdfdfd; --rgb-color-gray-20: 253, 253, 253;
--color-gray-50: #f9f9fa; --rgb-color-gray-50: 249, 249, 250;
--color-gray-100: #f4f4f5; --rgb-color-gray-100: 244, 244, 245;
--color-gray-200: #e7e7e9; --rgb-color-gray-200: 231, 231, 233;
--color-gray-300: #d5d5d9; --rgb-color-gray-300: 213, 213, 217;
--color-gray-400: #9aa2af; --rgb-color-gray-400: 154, 162, 175;
--color-gray-500: #6a7184; --rgb-color-gray-500: 106, 113, 132;
--color-gray-600: #4a5268; --rgb-color-gray-600: 74, 82, 104;
--color-gray-700: #374151; --rgb-color-gray-700: 55, 65, 81;
--color-gray-800: #1f293a; --rgb-color-gray-800: 31, 41, 58;
--color-gray-900: #101015; --rgb-color-gray-900: 16, 16, 21;
/* 🎨 Green */ --color-green-20: #f4fff8; --rgb-color-green-20: 244, 255, 248;
--color-green-50: #ecfff2; --rgb-color-green-50: 236, 255, 242;
--color-green-100: #d4f7e0; --rgb-color-green-100: 212, 247, 224;
--color-green-200: #a9efc1; --rgb-color-green-200: 169, 239, 193;
--color-green-300: #7de6a3; --rgb-color-green-300: 125, 230, 163;
--color-green-400: #52de84; --rgb-color-green-400: 82, 222, 132;
--color-green-500: #27d665; --rgb-color-green-500: 39, 214, 101;
--color-green-600: #1fab51; --rgb-color-green-600: 27, 171, 81;
--color-green-700: #17803d; --rgb-color-green-700: 23, 128, 61;
--color-green-800: #105628; --rgb-color-green-800: 16, 86, 40;
--color-green-900: #082b14; --rgb-color-green-900: 8, 43, 20;
/* 🎨 Red */ --color-red-20: #fff7f6; --rgb-color-red-20: 255, 247, 246;
--color-red-50: #fff2f1; --rgb-color-red-50: 255, 242, 241;
--color-red-100: #ffdbd9; --rgb-color-red-100: 255, 219, 217;
--color-red-200: #ffb7b2; --rgb-color-red-200: 255, 183, 178;
--color-red-300: #ff928c; --rgb-color-red-300: 255, 146, 140;
--color-red-400: #ff6e65; --rgb-color-red-400: 255, 110, 101;
--color-red-500: #ff4a3f; --rgb-color-red-500: 255, 74, 63;
--color-red-600: #e8463c; --rgb-color-red-600: 232, 70, 60;
--color-red-700: #cb3f36; --rgb-color-red-700: 203, 63, 54;
--color-red-800: #b23830; --rgb-color-red-800: 178, 56, 48;
--color-red-900: #7d2721; --rgb-color-red-900: 125, 39, 33;
/* 🎨 Maroon */ --color-maroon-20: #fff6fb; --rgb-color-maroon-20: 255, 246, 251;
--color-maroon-50: #fff0f7; --rgb-color-maroon-50: 255, 240, 247;
--color-maroon-100: #ffdbec; --rgb-color-maroon-100: 255, 219, 236;
--color-maroon-200: #ffabd2; --rgb-color-maroon-200: 255, 171, 210;
--color-maroon-300: #ec7db1; --rgb-color-maroon-300: 236, 125, 177;
--color-maroon-400: #d45892; --rgb-color-maroon-400: 212, 88, 146;
--color-maroon-500: #b33771; --rgb-color-maroon-500: 179, 55, 113;
--color-maroon-600: #9d255d; --rgb-color-maroon-600: 157, 37, 93;
--color-maroon-700: #801044; --rgb-color-maroon-700: 128, 16, 68;
--color-maroon-800: #690735; --rgb-color-maroon-800: 105, 7, 53;
--color-maroon-900: #42001f; --rgb-color-maroon-900: 66, 0, 31;
/* 🎨 Blue */ --color-blue-20: #f6fbff; --rgb-color-blue-20: 246, 251, 255;
--color-blue-50: #edf9ff; --rgb-color-blue-50: 237, 249, 255;
--color-blue-100: #d7f2ff; --rgb-color-blue-100: 215, 242, 255;
--color-blue-200: #afe5ff; --rgb-color-blue-200: 175, 229, 255;
--color-blue-300: #86d9ff; --rgb-color-blue-300: 134, 217, 255;
--color-blue-400: #5eccff; --rgb-color-blue-400: 94, 204, 255;
--color-blue-500: #36bfff; --rgb-color-blue-500: 54, 191, 255;
--color-blue-600: #2b99cc; --rgb-color-blue-600: 43, 153, 204;
--color-blue-700: #207399; --rgb-color-blue-700: 32, 115, 153;
--color-blue-800: #164c66; --rgb-color-blue-800: 22, 76, 102;
--color-blue-900: #0b2633; --rgb-color-blue-900: 11, 38, 51;
/* 🎨 Orange */ --color-orange-20: #fff9f4; --rgb-color-orange-20: 255, 249, 244;
--color-orange-50: #fff5ef; --rgb-color-orange-50: 255, 245, 239;
--color-orange-100: #fee6d6; --rgb-color-orange-100: 254, 230, 214;
--color-orange-200: #fdcdad; --rgb-color-orange-200: 253, 205, 173;
--color-orange-300: #fcb483; --rgb-color-orange-300: 252, 180, 131;
--color-orange-400: #fb9b5a; --rgb-color-orange-400: 251, 155, 90;
--color-orange-500: #fa8231; --rgb-color-orange-500: 250, 130, 49;
--color-orange-600: #e1752c; --rgb-color-orange-600: 225, 117, 44;
--color-orange-700: #c86827; --rgb-color-orange-700: 200, 104, 39;
--color-orange-800: #964e1d; --rgb-color-orange-800: 150, 78, 29;
--color-orange-900: #4b270f; --rgb-color-orange-900: 75, 39, 15;
/* 🎨 Pink */ --color-pink-20: #fff6fd; --rgb-color-pink-20: 255, 246, 253;
--color-pink-50: #ffeefb; --rgb-color-pink-50: 255, 238, 251;
--color-pink-100: #fed8f4; --rgb-color-pink-100: 254, 216, 244;
--color-pink-200: #feb0e8; --rgb-color-pink-200: 254, 176, 232;
--color-pink-300: #fd89dd; --rgb-color-pink-300: 253, 137, 221;
--color-pink-400: #fd61d1; --rgb-color-pink-400: 253, 97, 209;
--color-pink-500: #fc3ac6; --rgb-color-pink-500: 252, 58, 198;
--color-pink-600: #ca2e9e; --rgb-color-pink-600: 202, 46, 158;
--color-pink-700: #972377; --rgb-color-pink-700: 151, 35, 119;
--color-pink-800: #65174f; --rgb-color-pink-800: 101, 23, 79;
--color-pink-900: #320c28; --rgb-color-pink-900: 50, 12, 40;
/* 🎨 Purple */ --color-purple-20: #f9f6fd; --rgb-color-purple-20: 249, 246, 253;
--color-purple-50: #f3ecfa; --rgb-color-purple-50: 243, 236, 250;
--color-purple-100: #e5d4f5; --rgb-color-purple-100: 229, 212, 245;
--color-purple-200: #cba8eb; --rgb-color-purple-200: 203, 168, 235;
--color-purple-300: #b17de1; --rgb-color-purple-300: 177, 125, 225;
--color-purple-400: #9751d7; --rgb-color-purple-400: 151, 81, 215;
--color-purple-500: #7d26cd; --rgb-color-purple-500: 125, 38, 205;
--color-purple-600: #641ea4; --rgb-color-purple-600: 100, 30, 164;
--color-purple-700: #4b177b; --rgb-color-purple-700: 75, 23, 123;
--color-purple-800: #320f52; --rgb-color-purple-800: 50, 15, 82;
--color-purple-900: #190829; --rgb-color-purple-900: 25, 8, 41;
/* 🎨 Yellow */ --color-yellow-20: #fffcf7; --rgb-color-yellow-20: 255, 252, 247;
--color-yellow-50: #fffbf2; --rgb-color-yellow-50: 255, 251, 242;
--color-yellow-100: #fff0d1; --rgb-color-yellow-100: 255, 240, 209;
--color-yellow-300: #fdd889; --rgb-color-yellow-300: 253, 216, 137;
--color-yellow-200: #fee5b0; --rgb-color-yellow-200: 254, 229, 176;
--color-yellow-400: #fdcb61; --rgb-color-yellow-400: 253, 203, 97;
--color-yellow-500: #fcbe3a; --rgb-color-yellow-500: 252, 190, 58;
--color-yellow-600: #ca982e; --rgb-color-yellow-600: 202, 152, 46;
--color-yellow-700: #977223; --rgb-color-yellow-700: 151, 114, 35;
--color-yellow-800: #654c17; --rgb-color-yellow-800: 101, 76, 23;
--color-yellow-900: #32260c; --rgb-color-yellow-900: 50, 38, 12;
/* Payment plan colors */ /* Free Plan */ --free-plan-color: var(--color-gray-50, #f9f9fa); --free-plan-accent: var(--color-gray-200, #e7e7e9); --free-plan-primary: var(--color-gray-800, #1f293a); --free-plan-bg-light: var(--color-gray-50, #f9f9fa); --free-plan-bg-dark: var(--color-gray-100, #f4f4f5); --free-plan-border: var(--color-gray-200, #e7e7e9); --free-plan-chart-fill-color: var(--color-gray-500, #6a7184); --free-plan-badge-bg-color: var(--color-gray-100, #f4f4f5); --free-plan-badge-text-color: var(--color-gray-800, #1f293a);
/* Plus Plan */ --plus-plan-color: var(--color-blue-50, #edf9ff); --plus-plan-accent: var(--color-blue-200, #afe5ff); --plus-plan-primary: var(--color-blue-700, #207399); --plus-plan-bg-light: var(--color-blue-50, #edf9ff); --plus-plan-bg-dark: var(--color-blue-100, #d7f2ff); --plus-plan-border: var(--color-blue-200, #afe5ff); --plus-plan-chart-fill-color: var(--color-blue-700, #207399); --plus-plan-badge-bg-color: var(--color-blue-100, #d7f2ff); --plus-plan-badge-text-color: var(--color-blue-700, #207399);
/* Business Plan */ --business-plan-color: var(--color-pink-50, #faf5ff); --business-plan-accent: var(--color-pink-200, #feb0e8); --business-plan-primary: var(--color-pink-700, #972377); --business-plan-bg-light: var(--color-pink-50, #ffeefb); --business-plan-bg-dark: var(--color-pink-100, #fed8f4); --business-plan-border: var(--color-pink-200, #feb0e8); --business-plan-chart-fill-color: var(--color-pink-700, #972377); --business-plan-badge-bg-color: var(--color-pink-50, #FFF0FB); --business-plan-badge-text-color: var(--color-pink-700, #C44DA0);
/* Enterprise Plan */ --enterprise-plan-color: #eaf7f7; --enterprise-plan-accent: #8fc8c8; --enterprise-plan-primary: #0d5a5a; --enterprise-plan-bg-light: #eaf7f7; --enterprise-plan-bg-dark: #cfeaea; --enterprise-plan-border: #8fc8c8; --enterprise-plan-chart-fill-color: #0d5a5a; --enterprise-plan-badge-bg-color: #cfeaea; --enterprise-plan-badge-text-color: #0d5a5a;
/* View icon colors */ --color-view-icon-grid: #36bfff; --color-view-icon-form: #7d26cd; --color-view-icon-calendar: #b33771; --color-view-icon-gallery: #fc3ac6; --color-view-icon-map: #06b6d4; --color-view-icon-kanban: #ff9052; --color-view-icon-list: #0fa14e; --color-view-icon-timeline: #6366f1; --color-view-icon-gantt: #d97706; --color-view-icon-view: #1ea47e;}
/* Refrence tokens - Dark test */[theme='dark'] { color-scheme: dark;
--color-bg: #121212; --color-text: #ffffff;
--rgb-base: 255, 255, 255;
--color-base-black: #ffffff; --rgb-color-base-black: 255, 255, 255;
--color-base-white: #171717; --rgb-color-base-white: 23, 23, 23;
--color-base-none: #ffffff00;
/* 🎨 Brand */ --color-brand-20: #0f1230; --rgb-color-brand-20: 15, 18, 48;
--color-brand-50: #141a3a; --rgb-color-brand-50: 20, 26, 58;
/* --color-brand-50: #141a57; --rgb-color-brand-50: 20, 26, 87; */
--color-brand-100: #19288f; --rgb-color-brand-100: 25, 40, 143;
--color-brand-200: #1727b6; --rgb-color-brand-200: 23, 39, 182;
--color-brand-300: #1b43f5; --rgb-color-brand-300: 27, 67, 245;
--color-brand-400: #3366ff; --rgb-color-brand-400: 51, 102, 255;
--color-brand-500: #598eff; --rgb-color-brand-500: 89, 142, 255;
--color-brand-600: #8eb6ff; --rgb-color-brand-600: 142, 182, 255;
--color-brand-700: #bcd2ff; --rgb-color-brand-700: 188, 210, 255;
--color-brand-800: #d9e5ff; --rgb-color-brand-800: 217, 229, 255;
--color-brand-900: #eef4ff; --rgb-color-brand-900: 238, 244, 255;
/* 🎨 Gray */ --color-gray-20: #0b0b0e; --rgb-color-gray-20: 11, 11, 14;
--color-gray-50: #1d1d1f; --rgb-color-gray-50: 29, 29, 31;
--color-gray-100: #2a2c2e; --rgb-color-gray-100: 42, 44, 46;
--color-gray-200: #3b3d40; --rgb-color-gray-200: 59, 61, 64;
--color-gray-300: #505257; --rgb-color-gray-300: 80, 82, 87;
--color-gray-400: #6c6f75; --rgb-color-gray-400: 108, 111, 117;
--color-gray-500: #989ca5; --rgb-color-gray-500: 152, 156, 165;
--color-gray-600: #c5cbd6; --rgb-color-gray-600: 197, 203, 214;
--color-gray-700: #d5dce8; --rgb-color-gray-700: 213, 220, 232;
--color-gray-800: #e2e9f6; --rgb-color-gray-800: 226, 233, 246;
--color-gray-900: #e9f0fd; --rgb-color-gray-900: 233, 240, 253;
/* 🎨 Green */ --color-green-20: #162312; --rgb-color-green-20: 22, 35, 18;
--color-green-50: #052e15; --rgb-color-green-50: 5, 46, 21;
--color-green-100: #15522c; --rgb-color-green-100: 21, 82, 44;
--color-green-200: #167f3c; --rgb-color-green-200: 22, 127, 60;
--color-green-300: #17a248; --rgb-color-green-300: 23, 162, 72;
--color-green-400: #27d665; --rgb-color-green-400: 39, 214, 101;
--color-green-500: #27d665; --rgb-color-green-500: 39, 214, 101;
--color-green-600: #87eeab; --rgb-color-green-600: 135, 238, 171;
--color-green-700: #dcfce7; --rgb-color-green-700: 220, 252, 231;
--color-green-800: #bcf6cf; --rgb-color-green-800: 188, 246, 207;
--color-green-900: #bcf6cf; --rgb-color-green-900: 188, 246, 207;
/* 🎨 Red */ --color-red-20: #2a1215; --rgb-color-red-20: 42, 18, 21;
--color-red-50: #4b0804; --rgb-color-red-50: 75, 8, 4;
--color-red-100: #881b14; --rgb-color-red-100: 136, 27, 20;
--color-red-200: #a5180f; --rgb-color-red-200: 165, 24, 15;
--color-red-300: #c8180d; --rgb-color-red-300: 200, 24, 13;
--color-red-400: #ff4a3f; --rgb-color-red-400: 255, 74, 63;
--color-red-500: #ff6d64; --rgb-color-red-500: 255, 109, 100;
--color-red-600: #ffa39d; --rgb-color-red-600: 255, 163, 157;
--color-red-700: #ffc8c5; --rgb-color-red-700: 255, 200, 197;
--color-red-800: #ffe1df; --rgb-color-red-800: 255, 225, 223;
--color-red-900: #fff2f1; --rgb-color-red-900: 255, 242, 241;
/* 🎨 Maroon */ --color-maroon-20: #2b121e; --rgb-color-maroon-20: 43, 18, 30;
--color-maroon-50: #441329; --rgb-color-maroon-50: 68, 19, 41;
--color-maroon-100: #72294a; --rgb-color-maroon-100: 114, 41, 74;
--color-maroon-200: #b33771; --rgb-color-maroon-200: 179, 55, 113;
--color-maroon-300: #be4480; --rgb-color-maroon-300: 190, 68, 128;
--color-maroon-400: #d2629f; --rgb-color-maroon-400: 210, 98, 159;
--color-maroon-500: #df87ba; --rgb-color-maroon-500: 223, 135, 186;
--color-maroon-600: #ecb5d6; --rgb-color-maroon-600: 236, 181, 214;
--color-maroon-700: #f4d6e9; --rgb-color-maroon-700: 244, 214, 233;
--color-maroon-800: #f4d6e9; --rgb-color-maroon-800: 244, 214, 233;
--color-maroon-900: #fbf4f8; --rgb-color-maroon-900: 251, 244, 248;
/* 🎨 Blue */ --color-blue-20: #111b26; --rgb-color-blue-20: 17, 27, 38;
--color-blue-50: #062e4b; --rgb-color-blue-50: 6, 46, 75;
--color-blue-100: #02588a; --rgb-color-blue-100: 2, 88, 138;
--color-blue-200: #0069a7; --rgb-color-blue-200: 0, 105, 167;
--color-blue-300: #0084ce; --rgb-color-blue-300: 0, 132, 206;
--color-blue-400: #06a5f1; --rgb-color-blue-400: 6, 165, 241;
--color-blue-500: #36bfff; --rgb-color-blue-500: 54, 191, 255;
--color-blue-600: #78d3ff; --rgb-color-blue-600: 120, 211, 255;
--color-blue-700: #b8e6ff; --rgb-color-blue-700: 184, 230, 255;
--color-blue-800: #dff2ff; --rgb-color-blue-800: 223, 242, 255;
--color-blue-900: #eff9ff; --rgb-color-blue-900: 239, 249, 255;
/* 🎨 Orange */ --color-orange-20: #2b1d12; --rgb-color-orange-20: 43, 29, 18;
--color-orange-50: #431107; --rgb-color-orange-50: 67, 17, 7;
--color-orange-100: #7c2812; --rgb-color-orange-100: 124, 40, 18;
--color-orange-200: #992e13; --rgb-color-orange-200: 153, 46, 19;
--color-orange-300: #c1380d; --rgb-color-orange-300: 193, 56, 13;
--color-orange-400: #f86817; --rgb-color-orange-400: 248, 104, 23;
--color-orange-500: #fa8231; --rgb-color-orange-500: 250, 130, 49;
--color-orange-600: #fcb475; --rgb-color-orange-600: 252, 180, 117;
--color-orange-700: #fed3aa; --rgb-color-orange-700: 254, 211, 170;
--color-orange-800: #ffebd5; --rgb-color-orange-800: 255, 235, 213;
--color-orange-900: #fff6ed; --rgb-color-orange-900: 255, 246, 237;
/* 🎨 Pink */ --color-pink-20: #26121f; --rgb-color-pink-20: 38, 18, 31;
--color-pink-50: #570037; --rgb-color-pink-50: 87, 0, 55;
--color-pink-100: #8d0e5e; --rgb-color-pink-100: 141, 14, 94;
--color-pink-200: #aa0a6e; --rgb-color-pink-200: 170, 10, 110;
--color-pink-300: #ce0887; --rgb-color-pink-300: 206, 8, 135;
--color-pink-400: #fc3ac6; --rgb-color-pink-400: 252, 58, 198;
--color-pink-500: #ff65da; --rgb-color-pink-500: 255, 101, 218;
--color-pink-600: #ffa0eb; --rgb-color-pink-600: 255, 160, 235;
--color-pink-700: #ffcbf5; --rgb-color-pink-700: 255, 203, 245;
--color-pink-800: #fee5f9; --rgb-color-pink-800: 254, 229, 249;
--color-pink-900: #fef1fb; --rgb-color-pink-900: 254, 241, 251;
/* 🎨 Purple */ --color-purple-20: #12061f; --rgb-color-purple-20: 18, 6, 31;
--color-purple-50: #2a1938; --rgb-color-purple-50: 42, 25, 56; /* --color-purple-50: #3a0962; --rgb-color-purple-50: 58, 9, 98; */
--color-purple-100: #571e85; --rgb-color-purple-100: 87, 30, 133;
--color-purple-200: #6924a5; --rgb-color-purple-200: 105, 36, 165;
--color-purple-300: #9137e6; --rgb-color-purple-300: 145, 55, 230;
--color-purple-400: #a658f4; --rgb-color-purple-400: 166, 88, 244;
--color-purple-500: #be86fa; --rgb-color-purple-500: 190, 134, 250;
--color-purple-600: #d7b6fc; --rgb-color-purple-600: 215, 182, 252;
--color-purple-700: #e8d6fe; --rgb-color-purple-700: 232, 214, 254;
--color-purple-800: #f3e8ff; --rgb-color-purple-800: 243, 232, 255;
--color-purple-900: #faf5ff; --rgb-color-purple-900: 250, 245, 255;
/* 🎨 Yellow */ --color-yellow-20: #2b2111; --rgb-color-yellow-20: 43, 33, 17;
--color-yellow-50: #451403; --rgb-color-yellow-50: 69, 20, 3;
--color-yellow-100: #782c0f; --rgb-color-yellow-100: 120, 44, 15;
--color-yellow-200: #b44409; --rgb-color-yellow-200: 180, 68, 9;
--color-yellow-300: #d96506; --rgb-color-yellow-300: 217, 101, 6;
--color-yellow-400: #f58a0b; --rgb-color-yellow-400: 245, 138, 11;
--color-yellow-500: #fbad24; --rgb-color-yellow-500: 251, 173, 36;
--color-yellow-600: #fcbe3a; --rgb-color-yellow-600: 252, 190, 58;
--color-yellow-700: #fddc8a; --rgb-color-yellow-700: 253, 220, 138;
--color-yellow-800: #feeec7; --rgb-color-yellow-800: 254, 238, 199;
--color-yellow-900: #fff9eb; --rgb-color-yellow-900: 255, 249, 235;
/* Payment plan colors */ /* Free Plan */ --free-plan-color: var(--color-gray-50, #1d1d1f); --free-plan-accent: var(--color-gray-200, #3b3d40); --free-plan-primary: var(--color-gray-800, #e2e9f6); --free-plan-bg-light: var(--color-gray-50, #1d1d1f); --free-plan-bg-dark: var(--color-gray-100, #2a2c2e); --free-plan-border: var(--color-gray-200, #3b3d40); --free-plan-chart-fill-color: var(--color-gray-500, #989ca5); --free-plan-badge-bg-color: var(--color-gray-100, #f4f4f5); --free-plan-badge-text-color: var(--color-gray-800, #1f293a);
/* Plus Plan */ --plus-plan-color: #062e4b; --plus-plan-accent: #1c5062; --plus-plan-primary: #7cd0ff; --plus-plan-bg-light: #122b36; --plus-plan-bg-dark: #0b1e26; --plus-plan-border: #1e4a5b; --plus-plan-chart-fill-color: #63c2f5; --plus-plan-badge-bg-color: var(--color-blue-100, #d7f2ff); --plus-plan-badge-text-color: var(--color-blue-700, #207399);
/* Business Plan */ --business-plan-color: #25172f; --business-plan-accent: #5b2350; --business-plan-primary: #e28ce0; --business-plan-bg-light: #2e1b39; --business-plan-bg-dark: #1d1224; --business-plan-border: #5e2b54; --business-plan-chart-fill-color: #c45cc0; --business-plan-badge-bg-color: var(--color-pink-50, #FFF0FB); --business-plan-badge-text-color: var(--color-pink-700, #C44DA0);
/* Enterprise Plan */ --enterprise-plan-color: #0e2424; --enterprise-plan-accent: #1f4a4a; --enterprise-plan-primary: #5fc8c8; --enterprise-plan-bg-light: #0e2424; --enterprise-plan-bg-dark: #071818; --enterprise-plan-border: #1f4a4a; --enterprise-plan-chart-fill-color: #5fc8c8; --enterprise-plan-badge-bg-color: #cfeaea; --enterprise-plan-badge-text-color: #0d5a5a;
/* View icon colors */ --color-view-icon-grid: #5fccff; --color-view-icon-form: #a35bff; --color-view-icon-calendar: #ff5a9d; --color-view-icon-gallery: #ff66da; --color-view-icon-map: #67d6e8; --color-view-icon-kanban: #ffad70; --color-view-icon-list: #34d980; --color-view-icon-timeline: #818cf8; --color-view-icon-gantt: #fbbf24; --color-view-icon-view: #36cfaa;}
/* System tokens */:root { --nc-bg-brand-inverted: var(--color-brand-50); --rgb-nc-bg-brand-inverted: var(--rgb-color-brand-50);}[theme='dark'] { --nc-bg-brand-inverted: var(--color-gray-200); --rgb-nc-bg-brand-inverted: var(--rgb-color-gray-200);}
:root,[theme='dark'] { /* Mode-independent brand accent: backs hand-written #3366ff literals (checkbox fill, focus rings, box-shadows, text selection) that aren't part of the --color-brand-* ramp. Same value in light & dark, mirroring those literals. White-labelling overrides this one var to recolour them all. */ --nc-brand-accent: #3366ff; --nc-brand-accent-rgb: 51, 102, 255; /* Darker hover shade of the accent — also mode-independent (constant in light & dark), mirroring the hand-written #2952cc hover literals. Do NOT use --color-brand-600 for these: that ramp stop inverts in dark mode. */ --nc-brand-accent-hover: #2952cc;
--nc-content-gray-extreme: var(--color-base-black); --nc-content-gray-emphasis: var(--color-gray-900); --nc-content-gray: var(--color-gray-800); --nc-content-gray-subtle: var(--color-gray-700); --nc-content-gray-subtle2: var(--color-gray-600); --nc-content-gray-muted: var(--color-gray-500); --nc-content-gray-disabled: var(--color-gray-400);
--nc-content-brand: var(--color-brand-500); --nc-content-brand-hover: var(--color-gray-300); --nc-content-brand-disabled: var(--color-brand-600);
--nc-content-inverted-primary: var(--color-base-white); --nc-content-inverted-secondary: var(--color-gray-700); --nc-content-inverted-secondary-hover: var(--color-gray-700);
--nc-bg-gray-extralight: var(--color-gray-50); --nc-bg-gray-light: var(--color-gray-100); --nc-bg-gray-medium: var(--color-gray-200); --nc-bg-gray-dark: var(--color-gray-300); --nc-bg-gray-extra-dark: var(--color-gray-400);
--nc-bg-default: var(--color-base-white); --nc-bg-brand: var(--color-brand-50);
--nc-bg-coloured-pink: var(--color-pink-50); --nc-bg-coloured-pink-dark: var(--color-pink-100);
--nc-bg-coloured-purple: var(--color-purple-50); --nc-bg-coloured-purple-dark: var(--color-purple-100);
--nc-bg-coloured-red: var(--color-red-50); --nc-bg-coloured-red-dark: var(--color-red-100);
--nc-bg-coloured-green: var(--color-green-50); --nc-bg-coloured-green-dark: var(--color-green-100);
--nc-bg-coloured-yellow: var(--color-yellow-50); --nc-bg-coloured-yellow-dark: var(--color-yellow-100);
--nc-bg-coloured-maroon: var(--color-maroon-50); --nc-bg-coloured-maroon-dark: var(--color-maroon-100);
--nc-bg-coloured-blue: var(--color-blue-50); --nc-bg-coloured-blue-dark: var(--color-blue-100);
--nc-bg-coloured-orange: var(--color-orange-50); --nc-bg-coloured-orange-dark: var(--color-orange-100);
--nc-content-red-dark: var(--color-red-700); --nc-content-red-medium: var(--color-red-500); --nc-content-red-light: var(--color-red-300);
--nc-content-green-dark: var(--color-green-700); --nc-content-green-medium: var(--color-green-500); --nc-content-green-light: var(--color-green-300);
--nc-content-yellow-dark: var(--color-yellow-700); --nc-content-yellow-medium: var(--color-yellow-500); --nc-content-yellow-light: var(--color-yellow-300);
--nc-content-blue-dark: var(--color-blue-700); --nc-content-blue-medium: var(--color-blue-500); --nc-content-blue-light: var(--color-blue-300);
--nc-content-pink-dark: var(--color-pink-700); --nc-content-pink-medium: var(--color-pink-500); --nc-content-pink-light: var(--color-pink-300);
--nc-content-purple-dark: var(--color-purple-700); --nc-content-purple-medium: var(--color-purple-500); --nc-content-purple-light: var(--color-purple-300);
--nc-content-orange-dark: var(--color-orange-700); --nc-content-orange-medium: var(--color-orange-500); --nc-content-orange-light: var(--color-orange-300);
--nc-content-maroon-dark: var(--color-maroon-700); --nc-content-maroon-medium: var(--color-maroon-500); --nc-content-maroon-light: var(--color-maroon-300);
--nc-content-inverted-primary-hover: var(--color-base-white); --nc-content-inverted-primary-disabled: var(--color-gray-400); --nc-content-inverted-secondary-disabled: var(--color-gray-400);
--nc-fill-primary: var(--color-brand-500); --nc-fill-primary-hover: var(--color-brand-600); --nc-fill-primary-disabled: var(--color-gray-300); --nc-fill-primary-disabled-2: var(--color-brand-200);
--nc-fill-secondary: var(--color-base-white); --nc-fill-secondary-hover: var(--color-gray-50); --nc-fill-secondary-disabled: var(--color-base-white);
--nc-fill-warning: var(--color-red-500); --nc-fill-warning-hover: var(--color-red-600); --nc-fill-warning-disabled: var(--color-gray-50);
--nc-fill-success: var(--color-green-500); --nc-fill-success-hover: var(--color-green-600); --nc-fill-success-disabled: var(--color-gray-50);
--nc-fill-coloured-red-dark: var(--color-red-700); --nc-fill-coloured-red-medium: var(--color-red-500); --nc-fill-coloured-red-light: var(--color-red-300);
--nc-fill-coloured-green-dark: var(--color-green-700); --nc-fill-coloured-green-medium: var(--color-green-500); --nc-fill-coloured-green-light: var(--color-green-300);
--nc-fill-coloured-yellow-dark: var(--color-yellow-700); --nc-fill-coloured-yellow-medium: var(--color-yellow-500); --nc-fill-coloured-yellow-light: var(--color-yellow-300);
--nc-fill-coloured-blue-dark: var(--color-blue-700); --nc-fill-coloured-blue-medium: var(--color-blue-500); --nc-fill-coloured-blue-light: var(--color-blue-300);
--nc-fill-coloured-pink-dark: var(--color-pink-700); --nc-fill-coloured-pink-medium: var(--color-pink-500); --nc-fill-coloured-pink-light: var(--color-pink-300);
--nc-fill-coloured-purple-dark: var(--color-purple-700); --nc-fill-coloured-purple-medium: var(--color-purple-500); --nc-fill-coloured-purple-light: var(--color-purple-300);
--nc-fill-coloured-orange-dark: var(--color-orange-700); --nc-fill-coloured-orange-medium: var(--color-orange-500); --nc-fill-coloured-orange-light: var(--color-orange-300);
--nc-fill-coloured-maroon-dark: var(--color-maroon-700); --nc-fill-coloured-maroon-medium: var(--color-maroon-500); --nc-fill-coloured-maroon-light: var(--color-maroon-300);
--nc-fill-nc-component-button-text: #ffffff;
--nc-border-brand: var(--color-brand-500);
--nc-border-gray-extra-light: var(--color-gray-50); --nc-border-gray-light: var(--color-gray-100); --nc-border-gray-medium: var(--color-gray-200); --nc-border-gray-dark: var(--color-gray-300); --nc-border-gray-extra-dark: var(--color-gray-400);
--nc-border-coloured-red: var(--color-red-500); --nc-border-coloured-green: var(--color-green-500); --nc-border-coloured-yellow: var(--color-yellow-500); --nc-border-coloured-maroon: var(--color-maroon-500); --nc-border-coloured-blue: var(--color-blue-500); --nc-border-coloured-orange: var(--color-orange-500); --nc-border-coloured-pink: var(--color-pink-500); --nc-border-coloured-purple: var(--color-purple-500);
--measurements-radius-x-small: var(--spacing-02); --measurements-radius-small: var(--spacing-03); --measurements-radius-medium: var(--spacing-04); --measurements-radius-large: var(--spacing-05); --measurements-radius-x-large: var(--spacing-06); --measurements-radius-xx-large: var(--spacing-07); --measurements-radius-rounded: var(--spacing-13);}