📰 Published by TokenDrift — editorial teardown
Twenty's design tokens: 77/100 — one file explains most of the gap

We scanned Twenty's open-source CRM repo (53k stars, React + Linaria) with TokenDrift. 80% adoption across ~18.5k files, with the drift concentrated in a handful of files — including one that defines its own CSS custom properties at the top but falls back to a dozen+ different raw hex values throughout the rest of the file instead of using them.

77
Drift Score / 100

teardown-twenty2

Generated 2026-07-12T16:15:58.897Z · TokenDrift 0.1.1 · scoreVersion 1
18566 files scanned · 1429928 lines · 1248 violations
Fix these 10 files to eliminate 41% of drift

Score breakdown

80%
Token adoption (color 71%, spacing 92%)
29.1 / 30
Violation density
8.1 / 20
Violation concentration

Top offending files

FileViolations
packages/twenty-companion/src/index.css132
packages/twenty-website/src/tokens/app-preview/app-preview-tones.ts124
packages/twenty-website/src/tokens/feature-scenes/product-stepper-scene.ts54
packages/twenty-website/src/platform/visuals/halftone-studio/studio/controls/controls-panel-shell.ts41
packages/twenty-website/src/tokens/feature-scenes/familiar-interface-scene.ts30
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx27
packages/twenty-website/src/sections/product-stepper/LayoutVisual/components/layout-chrome.ts27
packages/twenty-website/src/tokens/app-preview/app-preview-stage.ts26
packages/twenty-website/src/tokens/feature-scenes/live-data-scene.ts23
packages/twenty-emails/src/common-style.ts22

Violations (showing first 500 of 1248)

LocationCategoryKindValueSnippet
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:21 color hex #73D08D color: '#73D08D',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:33 color hex #F4D345 color: '#F4D345',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:52 color hex #C4A2E0 color: '#C4A2E0',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:69 color hex #999 const ArrowUpRight = ({ color = '#999' }: { color?: string }) => (
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:115 color hex #FFFFFF background: '#FFFFFF',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:117 color rgb rgba(0, 0, 0, 0.04) boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:167 color hex #0000000A background: isHovered ? '#0000000A' : 'transparent',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:176 color hex #333 color: '#333',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:216 color hex #333 color: '#333',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:225 color hex #888 color: '#888',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:242 color hex #333 color: '#333',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:246 color hex #e0e0e0 border: '1px solid #e0e0e0',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:247 color hex #fafafa background: '#fafafa',
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:251 color hex #f0f0f0 e.currentTarget.style.background = '#f0f0f0';
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:252 color hex #ccc e.currentTarget.style.borderColor = '#ccc';
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:255 color hex #fafafa e.currentTarget.style.background = '#fafafa';
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:256 color hex #e0e0e0 e.currentTarget.style.borderColor = '#e0e0e0';
packages/create-twenty-app/src/constants/template/src/front-components/main-page.tsx:260 color hex #333 <ArrowUpRight color="#333" />
packages/twenty-apps/examples/document-generator/src/front-components/document-viewer.front-component.tsx:18 color hex #eef1f6 … '100%', overflow: 'auto', background: '#eef1f6', padding: '24px' },
packages/twenty-apps/examples/document-generator/src/front-components/document-viewer.front-component.tsx:22 color hex #ffffff background: '#ffffff',
packages/twenty-apps/examples/document-generator/src/front-components/document-viewer.front-component.tsx:24 color rgb rgba(24, 39, 75, 0.08) boxShadow: '0 10px 40px rgba(24, 39, 75, 0.08)',
packages/twenty-apps/examples/document-generator/src/front-components/document-viewer.front-component.tsx:29 color hex #6b7280 …g: '40px', textAlign: 'center', color: '#6b7280', fontFamily: 'sans-serif' },
packages/twenty-apps/examples/document-generator/src/front-components/document-viewer.front-component.tsx:41 color hex #1961ed color: '#1961ed',
packages/twenty-apps/examples/document-generator/src/front-components/document-viewer.front-component.tsx:42 color hex #ffffff background: '#ffffff',
packages/twenty-apps/examples/document-generator/src/front-components/document-viewer.front-component.tsx:43 color hex #d7deee border: '1px solid #d7deee',
packages/twenty-apps/examples/document-generator/src/logic-functions/utils/generate-document-pdf.ts:20 color rgb rgb(0.098, 0.38, 0.929) const ACCENT = rgb(0.098, 0.38, 0.929); // #1961ED
packages/twenty-apps/examples/document-generator/src/logic-functions/utils/generate-document-pdf.ts:20 color hex #1961ED const ACCENT = rgb(0.098, 0.38, 0.929); // #1961ED
packages/twenty-apps/examples/document-generator/src/logic-functions/utils/generate-document-pdf.ts:21 color rgb rgb(0.06, 0.08, 0.16) const INK = rgb(0.06, 0.08, 0.16);
packages/twenty-apps/examples/document-generator/src/logic-functions/utils/generate-document-pdf.ts:22 color rgb rgb(0.28, 0.31, 0.42) const MUTED = rgb(0.28, 0.31, 0.42);
packages/twenty-apps/examples/document-generator/src/logic-functions/utils/generate-document-pdf.ts:287 color rgb rgb(0.9, 0.92, 0.96) color: rgb(0.9, 0.92, 0.96),
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:7 color hex #1f2430 const INK = '#1f2430';
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:8 color hex #10152a const HEADING = '#10152a';
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:9 color hex #1961ed const ACCENT = '#1961ed';
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:16 spacing px 22px ul: { margin: '0 0 14px', paddingLeft: '22px' },
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:17 spacing px 22px ol: { margin: '0 0 14px', paddingLeft: '22px' },
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:23 color hex #f1f3f9 background: '#f1f3f9',
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:29 spacing px 18px padding: '4px 18px',
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:31 color hex #f6f8fd background: '#f6f8fd',
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:32 color hex #47506a color: '#47506a',
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:34 color hex #e6e9f2 hr: { border: 0, borderTop: '1px solid #e6e9f2', margin: '24px 0' },
packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx:36 color hex #f1f3f9 background: '#f1f3f9',
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:45 color hex #1f2430 color: #1f2430;
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:50 color hex #ffffff background: #ffffff;
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:52 color rgb rgba(24, 39, 75, 0.08) box-shadow: 0 10px 40px rgba(24, 39, 75, 0.08);
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:56 color hex #10152a …h1, .doc-body h2, .doc-body h3 { color: #10152a; line-height: 1.3; margin: 32px …
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:61 color hex #1961ed .doc-body a { color: #1961ed; text-decoration: none; }
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:64 spacing px 3px margin: 16px 0; padding: 4px 20px; border-left: 3px solid #1961ed;
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:64 color hex #1961ed margin: 16px 0; padding: 4px 20px; border-left: 3px solid #1961ed;
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:65 color hex #47506a color: #47506a; background: #f6f8fd;
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:65 color hex #f6f8fd color: #47506a; background: #f6f8fd;
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:69 color hex #f1f3f9 background: #f1f3f9; padding: 2px 6px; border-radius: 4px;
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:71 color hex #e6e9f2 .doc-body hr { border: 0; border-top: 1px solid #e6e9f2; margin: 32px 0; }
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:73 color hex #fff body { background: #fff; }
packages/twenty-apps/examples/document-generator/src/utils/render-document.ts:91 color hex #eef1f6 margin: 0; background: #eef1f6;
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:21 color hex #999 DRAFT: '#999',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:22 color hex #e88c30 SENT: '#e88c30',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:23 color hex #4caf50 DELIVERED: '#4caf50',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:24 color hex #e05252 RETURNED: '#e05252',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:51 color hex #333 style={{ fontSize: '15px', fontWeight: 600, color: '#333' }}
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:62 color hex #fff color: '#fff',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:63 color hex #999 backgroundColor: STATUS_COLORS[status] ?? '#999',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:75 color hex #555 color: '#555',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:105 color hex #e05252 style={{ fontSize: '11px', color: state === 'error' ? '#e05252' : '#888' }}
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:105 color hex #888 style={{ fontSize: '11px', color: state === 'error' ? '#e05252' : '#888' }}
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:246 color hex #b0a89a color: '#b0a89a',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:261 color hex #b0a89a color: '#b0a89a',
packages/twenty-apps/examples/postcard/src/components/card.front-component.tsx:267 color hex #ccc <div style={{ marginTop: '8px', fontSize: '11px', color: '#ccc' }}>
packages/twenty-apps/fixtures/rich-app/src/utils/card-display.component.tsx:10 color hex #ccc style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}
packages/twenty-apps/internal/twenty-partners/src/logic-functions/on-partner-application-created.logic-function.ts:14 color hex #4a38f5 // Twenty brand blue (#4a38f5) as a Discord embed integer color.
packages/twenty-apps/public/call-recorder/src/application-config.ts:123 color hex #ffffff 'Hex color (e.g. #ffffff) drawn behind the workspace logo…
packages/twenty-apps/public/call-recorder/src/logic-functions/constants/default-call-recorder-bot-image-background.ts:1 color hex #1d1d1d export const DEFAULT_CALL_RECORDER_BOT_IMAGE_BACKGROUND = '#1d1d1d';
packages/twenty-apps/public/call-recorder/src/logic-functions/domain/build-bot-image.util.ts:18 color hex #feebec const RECORDING_STATUS_BADGE_BACKGROUND = '#feebec';
packages/twenty-apps/public/call-recorder/src/logic-functions/domain/build-bot-image.util.ts:19 color hex #ce2c31 const RECORDING_STATUS_BADGE_COLOR = '#ce2c31';
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:85 color hex #f1f1f1 bg: '#f1f1f1',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:86 color hex #ffffff card: '#ffffff',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:87 color hex #fcfcfc surface: '#fcfcfc',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:88 color hex #ebebeb border: '#ebebeb',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:89 color hex #d6d6d6 borderStrong: '#d6d6d6',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:90 color hex #333333 text: '#333333',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:91 color hex #666666 textSecondary: '#666666',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:92 color hex #999999 textTertiary: '#999999',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:93 color hex #cccccc placeholder: '#cccccc',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:94 color hex #5865f2 accent: '#5865f2',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:95 color hex #e05252 error: '#e05252',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:142 spacing px 3px padding: '3px 8px',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:163 spacing px 3px padding: '3px 9px',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:163 spacing px 9px padding: '3px 9px',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:241 spacing px 5px padding: '5px 10px',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:247 color hex #ffffff color: '#ffffff',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:252 spacing px 5px padding: '5px 14px',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:282 color hex #2ea043 backgroundColor: '#2ea043',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:287 color hex #fff color: '#fff',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:306 spacing px 5px padding: '5px 14px',
packages/twenty-apps/public/twenty-discord/src/components/send-message-form.front-component.tsx:359 spacing px 5px padding: '5px 12px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:181 color hex #f1f1f1 bg: '#f1f1f1',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:182 color hex #ffffff card: '#ffffff',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:183 color hex #fcfcfc surface: '#fcfcfc',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:184 color hex #ebebeb border: '#ebebeb',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:185 color hex #d6d6d6 borderStrong: '#d6d6d6',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:186 color hex #333333 text: '#333333',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:187 color hex #666666 textSecondary: '#666666',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:188 color hex #999999 textTertiary: '#999999',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:189 color hex #cccccc placeholder: '#cccccc',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:190 color hex #606acc accent: '#606acc',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:191 color hex #e05252 error: '#e05252',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:238 spacing px 3px padding: '3px 8px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:302 spacing px 5px gap: '5px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:311 spacing px 3px padding: '3px 9px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:311 spacing px 9px padding: '3px 9px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:338 spacing px 7px padding: '2px 7px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:351 spacing px 7px padding: '2px 7px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:357 color hex #eef0fb backgroundColor: '#eef0fb',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:372 spacing px 3px padding: '3px 9px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:372 spacing px 9px padding: '3px 9px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:396 spacing px 5px padding: '5px 10px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:402 color hex #ffffff color: '#ffffff',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:407 spacing px 5px padding: '5px 14px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:437 color hex #2ea043 backgroundColor: '#2ea043',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:442 color hex #fff color: '#fff',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:463 spacing px 5px padding: '5px 14px',
packages/twenty-apps/public/twenty-linear/src/components/create-issue-form.front-component.tsx:515 spacing px 5px padding: '5px 12px',
packages/twenty-companion/src/index.css:55 color hex #deb #drag-region, #debug-drag-region {
packages/twenty-companion/src/index.css:101 spacing px 35px padding: 8px 8px 8px 35px;
packages/twenty-companion/src/index.css:104 color hex #f2f2f2 background-color: #f2f2f2;
packages/twenty-companion/src/index.css:143 color hex #007aff background-color: #007aff;
packages/twenty-companion/src/index.css:144 color named white color: white;
packages/twenty-companion/src/index.css:148 color hex #ccc background-color: #ccc;
packages/twenty-companion/src/index.css:149 color hex #666 color: #666;
packages/twenty-companion/src/index.css:159 color hex #ddd background-color: #ddd;
packages/twenty-companion/src/index.css:185 spacing px 15px margin-bottom: 15px;
packages/twenty-companion/src/index.css:186 spacing px 25px margin-top: 25px;
packages/twenty-companion/src/index.css:200 spacing px 15px padding: 15px;
packages/twenty-companion/src/index.css:203 color rgb rgba(0, 0, 0, 0.1) box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
packages/twenty-companion/src/index.css:209 color hex #f5f5f5 background-color: #f5f5f5;
packages/twenty-companion/src/index.css:213 spacing px 15px margin-right: 15px;
packages/twenty-companion/src/index.css:238 color hex #0077ff color: #0077ff;
packages/twenty-companion/src/index.css:260 color hex #999 color: #999;
packages/twenty-companion/src/index.css:269 color rgb rgba(255, 0, 0, 0.1) background-color: rgba(255, 0, 0, 0.1);
packages/twenty-companion/src/index.css:270 color hex #ff3b30 color: #ff3b30;
packages/twenty-companion/src/index.css:293 color named purple background-color: var(--light-purple);
packages/twenty-companion/src/index.css:297 color named green background-color: var(--light-green);
packages/twenty-companion/src/index.css:340 spacing px 15px padding: 15px;
packages/twenty-companion/src/index.css:345 spacing px 30px margin-bottom: 30px;
packages/twenty-companion/src/index.css:356 spacing px 5px padding: 5px;
packages/twenty-companion/src/index.css:362 color rgb rgba(0, 0, 0, 0.03) background-color: rgba(0, 0, 0, 0.03);
packages/twenty-companion/src/index.css:366 color rgb rgba(0, 0, 0, 0.05) background-color: rgba(0, 0, 0, 0.05);
packages/twenty-companion/src/index.css:381 spacing px 15px gap: 15px;
packages/twenty-companion/src/index.css:390 spacing px 5px gap: 5px;
packages/twenty-companion/src/index.css:396 spacing px 5px gap: 5px;
packages/twenty-companion/src/index.css:397 color hex #6947BD color: #6947BD;
packages/twenty-companion/src/index.css:401 spacing px 3px padding: 3px 10px;
packages/twenty-companion/src/index.css:403 color named purple background: var(--light-purple);
packages/twenty-companion/src/index.css:410 color hex #e0d0f5 background: #e0d0f5;
packages/twenty-companion/src/index.css:411 color hex #5235a0 color: #5235a0;
packages/twenty-companion/src/index.css:419 color hex #333 color: #333;
packages/twenty-companion/src/index.css:420 color named white background-color: white;
packages/twenty-companion/src/index.css:433 spacing px 15px padding: 15px;
packages/twenty-companion/src/index.css:456 spacing px 30px margin-bottom: 30px;
packages/twenty-companion/src/index.css:462 spacing px 15px margin-bottom: 15px;
packages/twenty-companion/src/index.css:469 spacing px 15px margin-bottom: 15px;
packages/twenty-companion/src/index.css:523 spacing px 5px padding: 5px;
packages/twenty-companion/src/index.css:524 color named white background-color: white;
packages/twenty-companion/src/index.css:526 color rgb rgba(0, 0, 0, 0.08) box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
packages/twenty-companion/src/index.css:533 color hex #f5f5f5 background: #f5f5f5;
packages/twenty-companion/src/index.css:540 color hex #666 color: #666;
packages/twenty-companion/src/index.css:541 spacing px 15px padding: 0 15px;
packages/twenty-companion/src/index.css:547 color hex #eaeaea background-color: #eaeaea;
packages/twenty-companion/src/index.css:551 color hex #666 color: #666;
packages/twenty-companion/src/index.css:552 color hex #f5f5f5 background: #f5f5f5;
packages/twenty-companion/src/index.css:560 color hex #eaeaea background-color: #eaeaea;
packages/twenty-companion/src/index.css:564 color hex #fff color: #fff;
packages/twenty-companion/src/index.css:565 color hex #ff3b30 background-color: #ff3b30;
packages/twenty-companion/src/index.css:569 color hex #d93129 background-color: #d93129;
packages/twenty-companion/src/index.css:573 color hex #00957B color: #00957B;
packages/twenty-companion/src/index.css:574 color hex #E3F3F1 background: #E3F3F1;
packages/twenty-companion/src/index.css:583 color hex #d1eae7 background-color: #d1eae7;
packages/twenty-companion/src/index.css:602 color rgb rgba(0,0,0,0.7) background-color: rgba(0,0,0,0.7);
packages/twenty-companion/src/index.css:603 color named white color: white;
packages/twenty-companion/src/index.css:619 color hex #1e1e1e background-color: #1e1e1e;
packages/twenty-companion/src/index.css:620 color hex #e0e0e0 color: #e0e0e0;
packages/twenty-companion/src/index.css:625 color rgb rgba(0, 0, 0, 0.2) box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
packages/twenty-companion/src/index.css:637 spacing px 15px padding: 10px 15px;
packages/twenty-companion/src/index.css:638 color hex #333 background-color: #333;
packages/twenty-companion/src/index.css:639 color hex #444 border-bottom: 1px solid #444;
packages/twenty-companion/src/index.css:646 color hex #fff color: #fff;
packages/twenty-companion/src/index.css:652 color hex #e0e0e0 color: #e0e0e0;
packages/twenty-companion/src/index.css:653 spacing px 5px padding: 5px;
packages/twenty-companion/src/index.css:663 color rgb rgba(255, 255, 255, 0.1) background-color: rgba(255, 255, 255, 0.1);
packages/twenty-companion/src/index.css:668 spacing px 70px top: 70px;
packages/twenty-companion/src/index.css:672 color hex #333 background: #333;
packages/twenty-companion/src/index.css:673 color hex #fff color: #fff;
packages/twenty-companion/src/index.css:682 color rgb rgba(0, 0, 0, 0.2) box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
packages/twenty-companion/src/index.css:686 color hex #444 background: #444;
packages/twenty-companion/src/index.css:707 color hex #4CAF50 color: #4CAF50;
packages/twenty-companion/src/index.css:713 color rgb rgba(76, 175, 80, 0.7) box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
packages/twenty-companion/src/index.css:716 color rgb rgba(76, 175, 80, 0) box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
packages/twenty-companion/src/index.css:719 color rgb rgba(76, 175, 80, 0) box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
packages/twenty-companion/src/index.css:726 spacing px 100px bottom: 100px;
packages/twenty-companion/src/index.css:729 color rgb rgba(30, 30, 30, 0.9) background-color: rgba(30, 30, 30, 0.9);
packages/twenty-companion/src/index.css:730 color hex #fff color: #fff;
packages/twenty-companion/src/index.css:733 color rgb rgba(0, 0, 0, 0.2) box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
packages/twenty-companion/src/index.css:746 color hex #0077FF color: #0077FF;
packages/twenty-companion/src/index.css:755 spacing px 3px border-left: 3px solid #0077FF;
packages/twenty-companion/src/index.css:755 color hex #0077FF border-left: 3px solid #0077FF;
packages/twenty-companion/src/index.css:759 spacing px 3px border-left: 3px solid #4CAF50;
packages/twenty-companion/src/index.css:759 color hex #4CAF50 border-left: 3px solid #4CAF50;
packages/twenty-companion/src/index.css:764 color hex #4CAF50 color: #4CAF50;
packages/twenty-companion/src/index.css:788 spacing px 15px gap: 15px;
packages/twenty-companion/src/index.css:789 spacing px 15px padding: 15px;
packages/twenty-companion/src/index.css:794 color hex #252525 background-color: #252525;
packages/twenty-companion/src/index.css:808 spacing px 15px padding: 8px 15px;
packages/twenty-companion/src/index.css:809 color hex #333 background-color: #333;
packages/twenty-companion/src/index.css:810 color hex #444 border-bottom: 1px solid #444;
packages/twenty-companion/src/index.css:817 color hex #fff color: #fff;
packages/twenty-companion/src/index.css:823 color hex #e0e0e0 color: #e0e0e0;
packages/twenty-companion/src/index.css:827 spacing px 3px padding: 3px 8px;
packages/twenty-companion/src/index.css:831 color rgb rgba(255, 255, 255, 0.1) background-color: rgba(255, 255, 255, 0.1);
packages/twenty-companion/src/index.css:850 color hex #666 color: #666;
packages/twenty-companion/src/index.css:856 color hex #1a1a1a background-color: #1a1a1a;
packages/twenty-companion/src/index.css:866 spacing px 5px padding: 5px 0;
packages/twenty-companion/src/index.css:872 color hex #2a2a2a background-color: #2a2a2a;
packages/twenty-companion/src/index.css:877 color hex #2d3b4a background-color: #2d3b4a;
packages/twenty-companion/src/index.css:878 spacing px 3px border-left: 3px solid #0077FF;
packages/twenty-companion/src/index.css:878 color hex #0077FF border-left: 3px solid #0077FF;
packages/twenty-companion/src/index.css:883 color hex #0077FF color: #0077FF;
packages/twenty-companion/src/index.css:888 color hex #e0e0e0 color: #e0e0e0;
packages/twenty-companion/src/index.css:895 color hex #888 color: #888;
packages/twenty-companion/src/index.css:904 spacing px 5px padding: 5px 0;
packages/twenty-companion/src/index.css:913 color hex #2a2a2a background-color: #2a2a2a;
packages/twenty-companion/src/index.css:926 color hex #e0e0e0 color: #e0e0e0;
packages/twenty-companion/src/index.css:932 color hex #4CAF50 color: #4CAF50;
packages/twenty-companion/src/index.css:934 color rgb rgba(76, 175, 80, 0.1) background-color: rgba(76, 175, 80, 0.1);
packages/twenty-companion/src/index.css:940 spacing px 15px margin-bottom: 15px;
packages/twenty-companion/src/index.css:941 color hex #1a1a1a background-color: #1a1a1a;
packages/twenty-companion/src/index.css:958 color rgb rgba(0, 0, 0, 0.6) background-color: rgba(0, 0, 0, 0.6);
packages/twenty-companion/src/index.css:959 color named white color: white;
packages/twenty-companion/src/index.css:970 color rgb rgba(0, 0, 0, 0.6) background-color: rgba(0, 0, 0, 0.6);
packages/twenty-companion/src/index.css:971 color named white color: white;
packages/twenty-companion/src/index.css:989 color hex #2a2a2a background-color: #2a2a2a;
packages/twenty-companion/src/index.css:990 spacing px 3px border-left: 3px solid #555;
packages/twenty-companion/src/index.css:990 color hex #555 border-left: 3px solid #555;
packages/twenty-companion/src/index.css:995 color hex #0077FF border-left-color: #0077FF;
packages/twenty-companion/src/index.css:999 color hex #4CAF50 border-left-color: #4CAF50;
packages/twenty-companion/src/index.css:1003 color hex #FF3B30 border-left-color: #FF3B30;
packages/twenty-companion/src/index.css:1004 color rgb rgba(255, 59, 48, 0.1) background-color: rgba(255, 59, 48, 0.1);
packages/twenty-companion/src/index.css:1008 color hex #999 color: #999;
packages/twenty-companion/src/index.css:1015 color hex #0077FF color: #0077FF;
packages/twenty-companion/src/index.css:1020 color hex #4CAF50 color: #4CAF50;
packages/twenty-companion/src/index.css:1025 color hex #FF3B30 color: #FF3B30;
packages/twenty-companion/src/index.css:1029 color hex #e0e0e0 color: #e0e0e0;
packages/twenty-companion/src/index.css:1030 spacing px 5px margin-top: 5px;
packages/twenty-companion/src/index.css:1054 color rgb rgba(0, 0, 0, 0.1) box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
packages/twenty-companion/src/index.css:1066 spacing px 5px padding: 5px;
packages/twenty-companion/src/main.js:80 color hex #f9f9f9 backgroundColor: '#f9f9f9',
packages/twenty-companion/src/pages/note-editor/styles.css:91 spacing px 35px padding: 8px 8px 8px 35px;
packages/twenty-companion/src/pages/note-editor/styles.css:94 color hex #f2f2f2 background-color: #f2f2f2;
packages/twenty-companion/src/pages/note-editor/styles.css:130 color hex #ddd background-color: #ddd;
packages/twenty-companion/src/pages/note-editor/styles.css:154 spacing px 30px margin-bottom: 30px;
packages/twenty-companion/src/pages/note-editor/styles.css:165 spacing px 15px gap: 15px;
packages/twenty-companion/src/pages/note-editor/styles.css:174 spacing px 5px gap: 5px;
packages/twenty-companion/src/pages/note-editor/styles.css:208 spacing px 30px margin-bottom: 30px;
packages/twenty-companion/src/pages/note-editor/styles.css:214 spacing px 15px margin-bottom: 15px;
packages/twenty-companion/src/pages/note-editor/styles.css:221 spacing px 15px margin-bottom: 15px;
packages/twenty-companion/src/pages/note-editor/styles.css:276 color rgb rgba(0, 0, 0, 0.1) box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
packages/twenty-companion/src/pages/note-editor/styles.css:301 color hex #333 color: #333;
packages/twenty-companion/src/pages/note-editor/styles.css:302 spacing px 25px margin: 25px 0 15px 0;
packages/twenty-companion/src/pages/note-editor/styles.css:302 spacing px 15px margin: 25px 0 15px 0;
packages/twenty-companion/src/pages/note-editor/styles.css:307 color hex #444 color: #444;
packages/twenty-companion/src/pages/note-editor/styles.css:317 color hex #0077ff color: #0077ff;
packages/twenty-companion/src/pages/note-editor/styles.css:327 color hex #f4f4f4 background-color: #f4f4f4;
packages/twenty-companion/src/renderer.js:235 color hex #6947BD …H11V16H13V18ZM17 18H15V16H17V18Z" fill="#6947BD"/>
packages/twenty-companion/src/renderer.js:243 color hex #4CAF50 …H8V12H16V14ZM13 9V3.5L18.5 9H13Z" fill="#4CAF50"/>
packages/twenty-companion/src/renderer.js:437 color hex #999 …5 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" fill="#999"/>
packages/twenty-companion/src/renderer.js:939 color hex #f0f0f0 <rect width="40" height="40" rx="20" fill="#f0f0f0"/>
packages/twenty-companion/src/renderer.js:940 color hex #a0a0a0 … 15C15 17.7614 17.2386 20 20 20Z" fill="#a0a0a0"/>
packages/twenty-companion/src/renderer.js:941 color hex #a0a0a0 …22C24.4183 22 28 26.0294 28 31" stroke="#a0a0a0" stroke-width="4"/>
packages/twenty-companion/src/renderer.js:1017 color hex #999 …5 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" fill="#999"/>
packages/twenty-companion/src/renderer.js:1251 color hex #039 .replace(/'/g, '&#039;')
packages/twenty-docs/custom.css:3 color hex #141414 background-color: #141414 !important;
packages/twenty-docs/custom.css:4 color hex #ffffff color: #ffffff !important;
packages/twenty-docs/custom.css:17 color hex #ffffff background-color: #ffffff !important;
packages/twenty-docs/custom.css:18 color hex #141414 color: #141414 !important;
packages/twenty-emails/src/common-style.ts:4 color hex #000000 gray100: '#000000',
packages/twenty-emails/src/common-style.ts:5 color hex #141414 gray90: '#141414',
packages/twenty-emails/src/common-style.ts:6 color hex #171717 gray85: '#171717',
packages/twenty-emails/src/common-style.ts:7 color hex #1b1b1b gray80: '#1b1b1b',
packages/twenty-emails/src/common-style.ts:8 color hex #1d1d1d gray75: '#1d1d1d',
packages/twenty-emails/src/common-style.ts:9 color hex #222222 gray70: '#222222',
packages/twenty-emails/src/common-style.ts:10 color hex #292929 gray65: '#292929',
packages/twenty-emails/src/common-style.ts:11 color hex #333333 gray60: '#333333',
packages/twenty-emails/src/common-style.ts:12 color hex #4c4c4c gray55: '#4c4c4c',
packages/twenty-emails/src/common-style.ts:13 color hex #666666 gray50: '#666666',
packages/twenty-emails/src/common-style.ts:14 color hex #818181 gray45: '#818181',
packages/twenty-emails/src/common-style.ts:15 color hex #999999 gray40: '#999999',
packages/twenty-emails/src/common-style.ts:16 color hex #b3b3b3 gray35: '#b3b3b3',
packages/twenty-emails/src/common-style.ts:17 color hex #cccccc gray30: '#cccccc',
packages/twenty-emails/src/common-style.ts:18 color hex #d6d6d6 gray25: '#d6d6d6',
packages/twenty-emails/src/common-style.ts:19 color hex #ebebeb gray20: '#ebebeb',
packages/twenty-emails/src/common-style.ts:20 color hex #f1f1f1 gray15: '#f1f1f1',
packages/twenty-emails/src/common-style.ts:21 color hex #fcfcfc gray10: '#fcfcfc',
packages/twenty-emails/src/common-style.ts:22 color hex #ffffff gray0: '#ffffff',
packages/twenty-emails/src/common-style.ts:26 color hex #5e90f2 blue40: '#5e90f2',
packages/twenty-emails/src/common-style.ts:59 color rgb rgba(0, 0, 0, 0.08) medium: 'rgba(0, 0, 0, 0.08)',
packages/twenty-emails/src/common-style.ts:60 color rgb rgba(0, 0, 0, 0.04) light: 'rgba(0, 0, 0, 0.04)',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:44 color hex #666 <p style={{ margin: '0 0 24px', fontSize: 13, color: '#666' }}>
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:59 color hex #e4e4e7 borderBottom: '2px solid #e4e4e7',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:91 color hex #f0f0f0 style={{ borderBottom: '1px solid #f0f0f0' }}
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:110 color hex #3b82f6 backgroundColor: '#3b82f6',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:119 color hex #8b5cf6 backgroundColor: '#8b5cf6',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:131 color hex #3b82f6 color: '#3b82f6',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:141 color hex #8b5cf6 color: '#8b5cf6',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:151 color hex #16a34a color: '#16a34a',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:168 color hex #888 color: '#888',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:177 color hex #3b82f6 backgroundColor: '#3b82f6',
packages/twenty-front-component-renderer/src/__stories__/BundleSizes.stories.tsx:190 color hex #8b5cf6 backgroundColor: '#8b5cf6',
packages/twenty-front-component-renderer/src/__stories__/FrontComponentRenderer.stories.tsx:59 color hex #f0f4f8 backgroundColor: '#f0f4f8',
packages/twenty-front-component-renderer/src/__stories__/FrontComponentRenderer.stories.tsx:69 color hex #48bb78 expect(badge).toHaveStyle({ backgroundColor: '#48bb78' });
packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-copy-to-clipboard.front-component.tsx:10 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-navigate.front-component.tsx:10 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-progress.front-component.tsx:10 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-side-panel-close.front-component.tsx:10 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-side-panel-open.front-component.tsx:10 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-snackbar.front-component.tsx:10 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-unmount.front-component.tsx:10 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-click.front-component.tsx:13 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-click.front-component.tsx:20 color hex #f3f4f6 backgroundColor: '#f3f4f6',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-dblclick.front-component.tsx:13 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-dblclick.front-component.tsx:20 color hex #f3f4f6 backgroundColor: '#f3f4f6',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-mouseenter-leave.front-component.tsx:12 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-mouseenter-leave.front-component.tsx:19 color hex #f3f4f6 backgroundColor: '#f3f4f6',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-pointermove.front-component.tsx:12 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-pointermove.front-component.tsx:19 color hex #f3f4f6 backgroundColor: '#f3f4f6',
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/circle/circle-click.front-component.tsx:22 color hex #2563eb fill="#2563eb"
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/ellipse/ellipse-click.front-component.tsx:23 color hex #2563eb fill="#2563eb"
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/g/g-click.front-component.tsx:25 color hex #2563eb <rect x="20" y="20" width="160" height="80" fill="#2563eb" />
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/g/g-focus-blur.front-component.tsx:26 color hex #2563eb <rect x="20" y="20" width="160" height="80" fill="#2563eb" />
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/line/line-click.front-component.tsx:23 color hex #2563eb stroke="#2563eb"
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/path/path-click.front-component.tsx:20 color hex #2563eb fill="#2563eb"
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/polygon/polygon-click.front-component.tsx:20 color hex #2563eb fill="#2563eb"
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/polyline/polyline-click.front-component.tsx:20 color hex #2563eb stroke="#2563eb"
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/rect/rect-click.front-component.tsx:23 color hex #2563eb fill="#2563eb"
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/svg/svg-click.front-component.tsx:26 color hex #2563eb <rect x="20" y="20" width="160" height="80" fill="#2563eb" />
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/svg/svg-focus-blur.front-component.tsx:27 color hex #2563eb <rect x="20" y="20" width="160" height="80" fill="#2563eb" />
packages/twenty-front-component-renderer/src/__stories__/html-tag/svg/svg/svg-pointer.front-component.tsx:31 color hex #2563eb <rect x="20" y="20" width="160" height="80" fill="#2563eb" />
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/event-log.tsx:38 color hex #d4d4d8 border: '1px solid #d4d4d8',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/event-log.tsx:40 color hex #fafafa backgroundColor: '#fafafa',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/event-log.tsx:43 color hex #1f2937 color: '#1f2937',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/front-component-card.tsx:5 color hex #ffffff backgroundColor: '#ffffff',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/front-component-card.tsx:6 color hex #e5e7eb border: '2px solid #e5e7eb',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/front-component-card.tsx:16 color hex #111827 color: '#111827',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/front-component-card.tsx:24 color hex #6b7280 color: '#6b7280',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:3 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:12 color hex #374151 color: '#374151',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:17 color hex #2563eb backgroundColor: '#2563eb',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:41 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:52 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:60 color hex #2563eb backgroundColor: '#2563eb',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:61 color hex #ffffff color: '#ffffff',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:69 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/shared/front-components/styles.ts:75 color hex #d1d5db border: '1px solid #d1d5db',
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:7 color hex #fefce8 background-color: #fefce8;
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:8 color hex #facc15 border: 2px solid #facc15;
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:18 color hex #854d0e color: #854d0e;
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:25 color hex #a16207 color: #a16207;
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:50 color hex #ca8a04 color: #ca8a04;
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:62 color hex #eab308 variant === 'outline' ? 'transparent' : '#eab308'};
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:63 color hex #854d0e color: ${({ variant }) => (variant === 'outline' ? '#854d0e' : 'white')};
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:65 color hex #d4a90a variant === 'outline' ? '1px solid #d4a90a' : 'none'};
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:82 color hex #eab308 <Chip color="#eab308">Badge</Chip>
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:83 color hex #a855f7 <Chip color="#a855f7">Styled</Chip>
packages/twenty-front-component-renderer/src/__stories__/showcase/emotion-example.front-component.tsx:84 color hex #f97316 <Chip color="#f97316">Outline</Chip>
packages/twenty-front-component-renderer/src/__stories__/showcase/interactive.front-component.tsx:12 color hex #faf5ff backgroundColor: '#faf5ff',
packages/twenty-front-component-renderer/src/__stories__/showcase/interactive.front-component.tsx:13 color hex #9f7aea border: '2px solid #9f7aea',
packages/twenty-front-component-renderer/src/__stories__/showcase/interactive.front-component.tsx:19 color hex #553c9a color: '#553c9a',
packages/twenty-front-component-renderer/src/__stories__/showcase/interactive.front-component.tsx:32 color hex #6b46c1 color: '#6b46c1',
packages/twenty-front-component-renderer/src/__stories__/showcase/interactive.front-component.tsx:43 color hex #805ad5 backgroundColor: '#805ad5',
packages/twenty-front-component-renderer/src/__stories__/showcase/interactive.front-component.tsx:44 color named white color: 'white',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:21 color hex #fffaf0 backgroundColor: '#fffaf0',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:22 color hex #ed8936 borderLeft: '4px solid #ed8936',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:28 color hex #c05621 color: '#c05621',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:44 color hex #c6f6d5 backgroundColor: mounted ? '#c6f6d5' : '#fed7d7',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:44 color hex #fed7d7 backgroundColor: mounted ? '#c6f6d5' : '#fed7d7',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:45 color hex #276749 color: mounted ? '#276749' : '#c53030',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:45 color hex #c53030 color: mounted ? '#276749' : '#c53030',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:54 color hex #bee3f8 backgroundColor: '#bee3f8',
packages/twenty-front-component-renderer/src/__stories__/showcase/lifecycle.front-component.tsx:55 color hex #2b6cb0 color: '#2b6cb0',
packages/twenty-front-component-renderer/src/__stories__/showcase/mui-example.front-component.tsx:15 color hex #e3f2fd backgroundColor: '#e3f2fd',
packages/twenty-front-component-renderer/src/__stories__/showcase/mui-example.front-component.tsx:16 color hex #42a5f5 border: '2px solid #42a5f5',
packages/twenty-front-component-renderer/src/__stories__/showcase/mui-example.front-component.tsx:28 color hex #1565c0 color: '#1565c0',
packages/twenty-front-component-renderer/src/__stories__/showcase/mui-example.front-component.tsx:37 color hex #1976d2 color: '#1976d2',
packages/twenty-front-component-renderer/src/__stories__/showcase/mui-example.front-component.tsx:51 color hex #1565c0 style={{ fontSize: 24, fontWeight: 800, margin: 0, color: '#1565c0' }}
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:14 color hex #f0f9ff background: '#f0f9ff',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:16 color hex #38bdf8 border: '2px solid #38bdf8',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:23 color hex #64748b color: '#64748b',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:31 color hex #0c4a6e color: '#0c4a6e',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:46 color hex #0369a1 color: '#0369a1',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:69 color hex #e0f2fe background: '#e0f2fe',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:85 color hex #0284c7 backgroundColor: '#0284c7',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:86 color named white color: 'white',
packages/twenty-front-component-renderer/src/__stories__/showcase/sdk-context-example.front-component.tsx:97 color hex #475569 style={{ fontSize: 14, color: '#475569' }}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:18 color hex #cbd5e1 .border-slate-300{border-color:#cbd5e1}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:19 color hex #fff .bg-white{background-color:#fff}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:20 color hex #0f172a .bg-slate-900{background-color:#0f172a}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:21 color hex #f1f5f9 .bg-slate-100{background-color:#f1f5f9}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:22 color hex #ef4444 .bg-red-500{background-color:#ef4444}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:23 color hex #10b981 .bg-emerald-500{background-color:#10b981}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:24 color hex #8b5cf6 .bg-violet-500{background-color:#8b5cf6}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:26 spacing rem 75rem .px-3{padding-left:.75rem;padding-right:.75rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:26 spacing rem 75rem .px-3{padding-left:.75rem;padding-right:.75rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:28 spacing rem 25rem .py-1{padding-top:.25rem;padding-bottom:.25rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:28 spacing rem 25rem .py-1{padding-top:.25rem;padding-bottom:.25rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:39 color hex #0f172a .text-slate-900{color:#0f172a}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:40 color hex #fff .text-white{color:#fff}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:41 color hex #64748b .text-slate-500{color:#64748b}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:42 color hex #334155 .text-slate-700{color:#334155}
packages/twenty-front-component-renderer/src/__stories__/showcase/shadcn-example.front-component.tsx:46 color hex #e2e8f0 .border-slate-200{border-color:#e2e8f0}
packages/twenty-front-component-renderer/src/__stories__/showcase/static.front-component.tsx:8 color hex #f0f4f8 backgroundColor: '#f0f4f8',
packages/twenty-front-component-renderer/src/__stories__/showcase/static.front-component.tsx:13 color hex #1a365d <h2 style={{ color: '#1a365d', fontWeight: 700, marginBottom: 12 }}>
packages/twenty-front-component-renderer/src/__stories__/showcase/static.front-component.tsx:16 color hex #4a5568 <p style={{ color: '#4a5568', fontSize: 14, lineHeight: 1.5 }}>
packages/twenty-front-component-renderer/src/__stories__/showcase/static.front-component.tsx:24 color hex #48bb78 backgroundColor: '#48bb78',
packages/twenty-front-component-renderer/src/__stories__/showcase/static.front-component.tsx:25 color named white color: 'white',
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:7 color hex #fdf2f8 background-color: #fdf2f8;
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:8 color hex #ec4899 border: 2px solid #ec4899;
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:18 color hex #9d174d color: #9d174d;
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:25 color hex #be185d color: #be185d;
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:50 color hex #db2777 color: #db2777;
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:62 color hex #ec4899 $variant === 'outline' ? 'transparent' : '#ec4899'};
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:63 color hex #9d174d color: ${({ $variant }) => ($variant === 'outline' ? '#9d174d' : 'white')};
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:65 color hex #ec4899 $variant === 'outline' ? '1px solid #ec4899' : 'none'};
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:82 color hex #ec4899 <Chip $color="#ec4899">Badge</Chip>
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:83 color hex #8b5cf6 <Chip $color="#8b5cf6">Styled</Chip>
packages/twenty-front-component-renderer/src/__stories__/showcase/styled-components-example.front-component.tsx:84 color hex #f59e0b <Chip $color="#f59e0b">Outline</Chip>
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:12 color hex #60a5fa .border-blue-400{border-color:#60a5fa}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:13 color hex #eff6ff .bg-blue-50{background-color:#eff6ff}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:14 color hex #2563eb .bg-blue-600{background-color:#2563eb}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:15 color hex #dbeafe .bg-blue-100{background-color:#dbeafe}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:16 color hex #a855f7 .bg-purple-500{background-color:#a855f7}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:17 color hex #f97316 .bg-orange-500{background-color:#f97316}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:18 color hex #22c55e .bg-green-500{background-color:#22c55e}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:19 spacing rem 75rem .px-3{padding-left:.75rem;padding-right:.75rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:19 spacing rem 75rem .px-3{padding-left:.75rem;padding-right:.75rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:21 spacing rem 25rem .py-1{padding-top:.25rem;padding-bottom:.25rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:21 spacing rem 25rem .py-1{padding-top:.25rem;padding-bottom:.25rem}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:30 color hex #1e40af .text-blue-800{color:#1e40af}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:31 color hex #2563eb .text-blue-600{color:#2563eb}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:32 color hex #1d4ed8 .text-blue-700{color:#1d4ed8}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:33 color hex #fff .text-white{color:#fff}
packages/twenty-front-component-renderer/src/__stories__/showcase/tailwind-example.front-component.tsx:43 color hex #bfdbfe .border-blue-200{border-color:#bfdbfe}
packages/twenty-front-component-renderer/src/__stories__/showcase/twenty-ui-example.front-component.tsx:14 color hex #fafafa background: '#fafafa',
packages/twenty-front-component-renderer/src/__stories__/showcase/twenty-ui-example.front-component.tsx:16 color hex #e4e4e7 border: '2px solid #e4e4e7',
packages/twenty-front/.storybook/preview.tsx:44 color hex #d9d9d9 …2"><rect width="192" height="192" fill="#d9d9d9"/></svg>';
packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx:44 spacing px 5px margin: 5px;
packages/twenty-front/src/modules/ai/components/AiChatMessage.tsx:60 spacing px 3px padding: 1px 3px;
packages/twenty-front/src/modules/ai/components/AiChatMessage.tsx:104 spacing px 3px border-left: 3px solid ${themeCssVariables.border.color.medium};
packages/twenty-front/src/modules/ai/components/AiChatThreadListItem.tsx:20 spacing px 3px border-left: 3px solid transparent;
packages/twenty-front/src/modules/ai/components/AiChatThreadListItem.tsx:28 spacing px 3px right: 3px;
packages/twenty-front/src/modules/ai/components/LazyMarkdownRendererStyledComponents.tsx:60 spacing px 18px margin-top: 18px;
packages/twenty-front/src/modules/apollo/utils/formatTitle.ts:5 color hex #03A9F4 query: '#03A9F4',
packages/twenty-front/src/modules/apollo/utils/formatTitle.ts:7 color hex #61A600 mutation: '#61A600',
packages/twenty-front/src/modules/apollo/utils/formatTitle.ts:9 color hex #61A600 subscription: '#61A600',
packages/twenty-front/src/modules/apollo/utils/formatTitle.ts:11 color hex #F51818 error: '#F51818',
packages/twenty-front/src/modules/apollo/utils/formatTitle.ts:13 color hex #61A600 default: '#61A600',
packages/twenty-front/src/modules/apollo/utils/loggerLink.ts:80 color hex #F51818 'color: #F51818; font-weight: lighter',
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx:69 color rgb rgba(0, 0, 0, 0.04) 0px 2px 4px rgba(0, 0, 0, 0.04),
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx:70 color rgb rgba(0, 0, 0, 0.12) 2px 4px 16px rgba(0, 0, 0, 0.12);
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx:71 spacing px 26px left: 26px;
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx:96 color named blue background-color: blue;
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx:122 color rgb rgba(0, 0, 0, 0.08) 0px 0px 4px rgba(0, 0, 0, 0.08),
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx:123 color rgb rgba(0, 0, 0, 0.04) 0px 2px 4px rgba(0, 0, 0, 0.04);
packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx:131 spacing px 5px margin-bottom: 5px;
packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemsInlineMeasurements.tsx:29 spacing px 9999px top: -9999px;
packages/twenty-front/src/modules/file/components/FileIcon.tsx:29 spacing px 5px padding: 5px;
packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx:56 spacing px 5px bottom: -5px;
packages/twenty-front/src/modules/navigation-menu-item/display/view/components/ObjectIconWithViewOverlay.tsx:39 spacing px 5px bottom: -5px;
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx:50 spacing px 3px padding: 3px;
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx:14 spacing px 9px padding-left: 9px;
packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getFieldMetadataTypeLabel.ts:8 color hex #1097 … we have a proper type for field (issue #1097)
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx:8 spacing px 7px right: -7px;
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx:9 spacing px 7px top: -7px;
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx:18 spacing px 7px right: 7px;
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx:7 spacing px 7px left: -7px;
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx:9 spacing px 7px top: -7px;
packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx:22 spacing px 250px left: 250px;
packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx:27 spacing px 5px top: 5px;
packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableVirtualizedDebugHelper.tsx:26 color named red border: '1px solid red',
packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableVirtualizedDebugHelper.tsx:27 color named white backgroundColor: 'white',
packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingImportPreviewSyncBadge.tsx:21 spacing px 83px top: 83px;
packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx:68 color rgb rgba(0, 0, 0, 0.04) 0px 2px 4px rgba(0, 0, 0, 0.04),
packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx:69 color rgb rgba(0, 0, 0, 0.12) 2px 4px 16px rgba(0, 0, 0, 0.12);
packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx:94 color named blue background-color: blue;
packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx:120 color rgb rgba(0, 0, 0, 0.08) 0px 0px 4px rgba(0, 0, 0, 0.08),
packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx:121 color rgb rgba(0, 0, 0, 0.04) 0px 2px 4px rgba(0, 0, 0, 0.04);
packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx:129 spacing px 5px margin-bottom: 5px;
packages/twenty-front/src/modules/settings/billing/components/internal/ResourceCreditPackagePickerModal.tsx:47 spacing px 11px padding: 11px;
packages/twenty-front/src/modules/settings/billing/hooks/useStripeAppearance.ts:24 color rgb rgba(${rgb}, ${alpha}) return isDefined(alpha) ? `rgba(${rgb}, ${alpha})` : `rgb(${rgb})`;
packages/twenty-front/src/modules/settings/billing/hooks/useStripeAppearance.ts:24 color rgb rgb(${rgb}) return isDefined(alpha) ? `rgba(${rgb}, ${alpha})` : `rgb(${rgb})`;
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx:100 spacing px 3px margin-right: 3px;
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx:54 spacing px 7px margin-bottom: 7px;
packages/twenty-front/src/modules/ui/input/components/TextInput.tsx:412 spacing px 5px padding: 0 5px;
packages/twenty-front/src/modules/ui/input/components/internal/date/components/StyledDatePickerContainer.tsx:86 spacing px 3px top: 3px;

Get notified when this score changes

We'll email you if this repo is rescanned with a different score. No spam, one-click unsubscribe.