Tokens
Every token, grouped and searchable, with its light and dark value straight from tokens.json.
Neutrals
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--background paper | #f9f9f9 | #0a0a09 | Page background. The canvas everything sits on. | |
--foreground ink | #1a1a19 | #fafafa | Default text color. Softened v3 (was pure #000000 — harsh on paper). | |
--card | #ffffff | #0f0f0e | Raised surface: cards, tiles, panels. | |
--card-foreground | #1a1a19 | #fafafa | Text on card surfaces. | |
--popover | #ffffff | #0a0a09 | Floating surface: menus, popovers, tooltips. | |
--popover-foreground | #1a1a19 | #fafafa | Text on popover surfaces. | |
--muted mist | #f4f4f4 | #292826 | Low-emphasis fill: subtle backgrounds, hovers. | |
--muted-foreground slate | #8e8a88 | #a7a4a0 | Secondary text: captions, hints, metadata. Warm/cool temperature is Vetoable B. | |
--accent | #f4f4f4 | #292826 | Hover/active fill for interactive neutrals. | |
--accent-foreground | #1a1a19 | #fafafa | Text on accent fill. | |
--secondary | #f4f4f4 | #292826 | Secondary button / chip fill. | |
--secondary-foreground | #1a1a19 | #fafafa | Text on secondary fill. | |
--border line | #e8e7e4 | #292826 | Hairlines, dividers, input borders. Warmed v3 (was #e5e5e5). | |
--input | #e8e7e4 | #292826 | Form control borders. Warmed v3 (was #e5e5e5). | |
--border-strong | #d9d9d9 | #3a3a38 | Emphasized hairline: hover-lifted borders. Light value intentionally aliases input-border-soft. | |
--ring | #00c951 | #22e24a | Pulse-green focus ring — brand identity on every focusable element (v3; was neutral ink/#d4d1cc). | |
--table-header-bg | rgba(249, 250, 251, 0.95) | rgba(20, 20, 19, 0.95) | Sticky table header fill (recruiter-bot gray-50/95 + backdrop-blur). Tables only. | |
--table-row-hover | rgba(249, 250, 251, 0.5) | rgba(255, 255, 255, 0.04) | Table row hover fill (recruiter-bot gray-50/50). | |
--table-row-selected | rgba(0, 201, 81, 0.06) | rgba(34, 226, 74, 0.1) | Selected table row tint (recruiter-bot primary @ 6%). | |
--table-stat-fg | #51566a | #a7a4a0 | Muted stat text in table cells (recruiter-bot #51566a). | |
--control-active | #292929 | #fafafa | Active segmented-control pill fill (recruiter-bot #292929). | |
--control-active-fg | #ffffff | #0a0a09 | Text on the active segmented-control pill. | |
--control-muted-fg | #77777f | #a7a4a0 | Inactive segmented-control / control text (recruiter-bot #77777f). | |
--control-hover | #f2f1f6 | #292826 | Control hover fill (recruiter-bot #f2f1f6). | |
--input-border-soft | #d9d9d9 | #3a3a38 | Soft input border on hand-rolled fields like SearchField (recruiter-bot #d9d9d9). | |
--glow-purple-core decorative | rgba(243, 232, 255, 1) | rgba(243, 232, 255, 0.5) | GradientBackdrop purple blob core stop (recruiter-bot AnimatedHero). | |
--glow-purple-mid decorative | rgba(243, 232, 255, 0.6) | rgba(243, 232, 255, 0.3) | GradientBackdrop purple blob mid stop. | |
--glow-green-core decorative | rgba(231, 254, 239, 1) | rgba(231, 254, 239, 0.5) | GradientBackdrop green blob core stop (recruiter-bot AnimatedHero). | |
--glow-green-mid decorative | rgba(231, 254, 239, 0.7) | rgba(231, 254, 239, 0.35) | GradientBackdrop green blob mid stop. | |
--glow-fade decorative | rgba(252, 252, 252, 0) | rgba(10, 10, 9, 0) | GradientBackdrop outer transparent stop. | |
--cracked-gradient-start decorative | #e7fef0 | #063d2e | Cracked-developers card gradient start (approx; exact rb tailwind values unavailable in extract). | |
--cracked-gradient-mid decorative | #a6fec3 | #0d7c72 | Cracked-developers card gradient mid. | |
--cracked-gradient-end decorative | #d4ffe4 | #036a56 | Cracked-developers card gradient end. | |
--glow-primary-core decorative | rgba(0, 201, 81, 0.9) | rgba(34, 226, 74, 0.9) | Saturated primary halo core stop (cracked avatar glow, ported from recruiter-bot ProfileHeader). | |
--glow-primary-mid decorative | rgba(0, 201, 81, 0.3) | rgba(34, 226, 74, 0.3) | Saturated primary halo mid stop. | |
--loader-card-border | rgba(20, 22, 34, 0.1) | rgba(255, 255, 255, 0.1) | Hairline border on floating loader cards (recruiter-bot SearchConnectingState verbatim, dark-adapted). | |
--trust-github-bg | #a6fec3 | #a6fec3 | Trust taxonomy: GitHub-inferred signal chip background. Green means read from code. | |
--trust-github-fg | #036a56 | #036a56 | Trust taxonomy: GitHub-inferred signal chip text. | |
--trust-linkedin-bg | #fdf6dd | #fdf6dd | Trust taxonomy: LinkedIn-confirmed signal chip background (recruiter-bot AgentResultRow gold). Gold means confirmed by a second source. | |
--trust-linkedin-fg | #8a6d1a | #8a6d1a | Trust taxonomy: LinkedIn-confirmed signal chip text. | |
--trust-score-bg | #f7e3f8 | #f7e3f8 | Trust taxonomy: computed score/percentile chip background. Purple means Vamo computed it. | |
--trust-score-fg | #9321be | #9321be | Trust taxonomy: computed score/percentile chip text. | |
--trust-streak-bg | #ffebd4 | #ffebd4 | Trust taxonomy: activity/streak chip background. Orange means observed over time. | |
--trust-streak-fg | #ef6207 | #ef6207 | Trust taxonomy: activity/streak chip text. | |
--viz-cat-1 | #00c951 | #22e24a | Data-viz categorical series 1. Pulse green is always series 1. | |
--viz-cat-2 | #005cf0 | #5c9dff | Data-viz categorical series 2 (info blue). | |
--viz-cat-3 | #ef6207 | #ef6207 | Data-viz categorical series 3 (jd orange). | |
--viz-cat-4 | #9321be | #9321be | Data-viz categorical series 4 (project purple). | |
--viz-cat-5 | #0d7c72 | #0d7c72 | Data-viz categorical series 5 (location teal). | |
--viz-cat-6 | #b0870f | #d1a92e | Data-viz categorical series 6 (gold; completes the trust palette). | |
--viz-grid | #eeeeee | #292826 | Chart gridlines and axis rules. | |
--viz-axis-fg | #8e8a88 | #a7a4a0 | Chart axis labels and tick text (aliases slate / muted-foreground). | |
--overlay | rgba(250, 250, 249, 0.55) | rgba(0, 0, 0, 0.55) | Modal/sheet backdrop scrim. Light mode uses a paper-tinted veil (never a dark gray blanket); the blur on overlay surfaces does the separation. |
Green
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--primary pulse | #00c951 | #22e24a | The one accent per view. Canonical primary, adopted from recruiter-bot's dominant surface green. Scarce by design. | |
--primary-legacy deprecated | #00d632 | #22e24a | Deprecated alias of the old shadcn primary. Kept for one minor; use --primary. | |
--primary-foreground | #05301c | #05301c | Text/icon on a primary fill. v4: deep green (same hue as primary) instead of near-black — black-on-green read as a hazard sign. | |
--primary-hover pulse-hover | #00b048 | #35d65f | Primary fill on hover. | |
--primary-active pulse-deep | #009a40 | #3fc37c | Primary fill while pressed/active. The dark tier of the green family. v4 light fix: in-hue press tier (was #036a56 teal — a hue jump off the green family). | |
--primary-mint mint | #a6fec3 | #a6fec3 | Mint accent surface: soft green backgrounds, positive chips. | |
--primary-tint tint | #d4ffe4 | #063d2e | Palest green wash: hover tints, selected rows. |
Semantic
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--destructive | hsl(0 72.2% 50.6%) | hsl(0 62.8% 40.6%) | Danger: destructive actions, error states. | |
--destructive-foreground | hsl(0 0% 98%) | hsl(0 0% 98%) | Text on destructive fill. | |
--success | hsl(142 76% 36%) | hsl(142 84% 44%) | Positive confirmation state. Consumed by Badge/Alert variants. | |
--success-foreground | hsl(0 0% 98%) | hsl(0 0% 98%) | Text on success fill. | |
--warning | hsl(38 92% 50%) | hsl(38 92% 60%) | Caution / attention state. Consumed by Badge/Alert variants. | |
--warning-foreground | hsl(0 0% 98%) | hsl(0 0% 10%) | Text on warning fill. | |
--info | #005cf0 | #5c9dff | Informational state. Consumed by Badge/Alert variants. | |
--info-foreground | hsl(0 0% 98%) | hsl(0 0% 98%) | Text on info fill. |
Category pills
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--category-lang-bg | #a6fec3 | #a6fec3 | Language filter chip background. | |
--category-lang-fg | #036a56 | #036a56 | Language filter chip text. | |
--category-domain-bg | #c4e0ff | #c4e0ff | Domain filter chip background. | |
--category-domain-fg | #005cf0 | #005cf0 | Domain filter chip text. | |
--category-jd-bg | #ffebd4 | #ffebd4 | Job-description filter chip background. | |
--category-jd-fg | #ef6207 | #ef6207 | Job-description filter chip text. | |
--category-project-bg | #f7e3f8 | #f7e3f8 | Project filter chip background. | |
--category-project-fg | #9321be | #9321be | Project filter chip text. | |
--category-location-bg | #d9f3f0 | #d9f3f0 | Location filter chip background. | |
--category-location-fg | #0d7c72 | #0d7c72 | Location filter chip text. |
Contribution ramp
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--contrib-1 decorative | #f3f4f6 | #161b22 | GitHub contribution empty cell (Tailwind gray-100 light; GitHub-dark base tile dark — v3 value fix, light tile glared on dark paper). Never UI or text. | |
--contrib-2 decorative | #86efac | #86efac | GitHub contribution <5 (Tailwind green-300 — corrected v2 to match source). Never UI or text. | |
--contrib-3 decorative | #4ade80 | #4ade80 | GitHub contribution <10 (Tailwind green-400 — corrected v2 to match source). Never UI or text. | |
--contrib-4 decorative | #22c55e | #22c55e | GitHub contribution <20 (Tailwind green-500 — corrected v2 to match source). Never UI or text. | |
--contrib-5 decorative | #16a34a | #16a34a | GitHub contribution 20+ (Tailwind green-600 — corrected v2 to match source). Never UI or text. | |
--contrib-6 decorative | #23803d | #23803d | GitHub contribution motif only. Never UI or text. | |
--contrib-7 decorative | #176030 | #176030 | GitHub contribution motif only. Never UI or text. | |
--contrib-8 decorative | #0d3f1f | #0d3f1f | GitHub contribution motif only. Never UI or text. | |
--contrib-9 decorative | #062514 | #062514 | GitHub contribution motif only. Never UI or text. |
Sidebar
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--sidebar | #ffffff | #0f0f0e | Sidebar surface. | |
--sidebar-foreground | #454341 | #f5f4f2 | Sidebar text. | |
--sidebar-accent | #f4f4f4 | #292826 | Sidebar item hover/active fill. | |
--sidebar-accent-foreground | #1a1a19 | #f5f4f2 | Text on sidebar accent. | |
--sidebar-border | #e5e5e5 | #292826 | Sidebar dividers. | |
--sidebar-ring | #00c951 | #22e24a | Sidebar focus ring — pulse green (v3; was leftover stock shadcn blue). |
Shadows
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--shadow-card | 0 1px 4px 0 rgb(0 0 0 / 0.06) | 0 1px 4px 0 rgb(0 0 0 / 0.4) | Card / tile elevation. The resting surface tier. | |
--shadow-popover | 0 3.5px 17.5px 0 rgb(0 0 0 / 0.09) | 0 3.5px 17.5px 0 rgb(0 0 0 / 0.5) | Floating tier: menus, popovers, tooltips, selects. | |
--shadow-composer | 0 20px 86px 0 rgb(0 0 0 / 0.06) | 0 20px 86px 0 rgb(0 0 0 / 0.6) | Overlay tier: the composer and other large lifted panels. | |
--shadow-loader-card | 0 8px 24px 0 rgb(0 0 0 / 0.08) | 0 8px 24px 0 rgb(0 0 0 / 0.5) | Floating loader card elevation (recruiter-bot SearchConnectingState verbatim, dark-adapted). | |
--shadow-press | 0 1px 2px 0 rgb(0 0 0 / 0.10) | 0 1px 2px 0 rgb(0 0 0 / 0.5) | Pressed-state shadow: the tightened elevation an element drops to while active. |
Scales
Type
text-2xs10px / 14px
text-xs11px / 16px
text-sm12px / 16px
text-md13px / 18px
text-base14px / 20px
text-lg16px / 22px
text-xl20px / 26px
text-display45px / 48px
Radius
radius-xs5px
radius-sm6px
radius-md8px
radius-lg12px
radius-xl14px