The Research Associate Group
Clinical research and healthcare consulting firm — corporate navy blue brand with professional restraint, DM Sans typography — Extracted from https://theresearchassociategroup.com/
108 tokensOnboarded 2026-05-20
Color System
Typography
"Droid Sans Mono"
Display — The quick brown fox jumps
H1 — The quick brown fox jumps
H2 — The quick brown fox jumps
H3 — The quick brown fox jumps
"DM Sans"
Bold: Design tokens bridge the gap between design tools and code.
Regular: They encode visual decisions — colors, typography, spacing — as structured data that both designers and developers can share.
"Droid Sans Mono"
const tokens = await extractFromCSS(url); const merged = mergeTokens(foundation, overrides); const css = toCSSVariables(merged);
Spacing & Shape
Spacing Scale
sm
4px
md
16px
lg
24px
xl
32px
Border Radius
sm
4px
md
6px
lg
8px
Component Gallery
Shared UI components themed with this project's design tokens via CSS custom property cascade.
Button
Badge & Tag
DefaultSuccessWarningErrorInfo
DefaultDefaultSuccessWarningError
Alert
Tokens extracted successfully from source site.
Some token values may need manual refinement.
Build failed — check console for details.
Re-analyze to update tokens from the live site.
Form Controls
Data Display
Tokens
108Colors
3Components
66LiveBuildingFailed
Token density
Score Gauge
95
Design Drift
100
Token Count
75
Coverage
Avatar & Tooltip
Hover me
Token Reference
| DTCG Path | Type | Value | CSS Variable |
|---|---|---|---|
| color.primary.base | unknown | #252c59 | --color-primary-base |
| color.primary.dark | unknown | #1a1f40 | --color-primary-dark |
| color.primary.light | unknown | #3d4680 | --color-primary-light |
| color.primary.hover | unknown | #1e2450 | --color-primary-hover |
| color.primary.active | unknown | #161a38 | --color-primary-active |
| color.primary.muted | unknown | rgba(37, 44, 89, 0.15) | --color-primary-muted |
| color.accent.blue | unknown | #0693e3 | --color-accent-blue |
| color.accent.green | unknown | #238238 | --color-accent-green |
| color.accent.teal | unknown | #1a8a8a | --color-accent-teal |
| color.background.dark | unknown | #252c59 | --color-background-dark |
| color.background.darkAlt | unknown | #1a1f40 | --color-background-darkAlt |
| color.background.card | unknown | #f8f9fa | --color-background-card |
| color.background.elevated | unknown | #ffffff | --color-background-elevated |
| color.background.light | unknown | #f0f2f5 | --color-background-light |
| color.background.white | unknown | #ffffff | --color-background-white |
| color.background.input | unknown | #f5f6f8 | --color-background-input |
| color.background.overlay | unknown | rgba(37, 44, 89, 0.65) | --color-background-overlay |
| color.text.primary | unknown | #000000 | --color-text-primary |
| color.text.secondary | unknown | #32373c | --color-text-secondary |
| color.text.tertiary | unknown | #636973 | --color-text-tertiary |
| color.text.muted | unknown | #abb8c3 | --color-text-muted |
| color.text.inverse | unknown | #ffffff | --color-text-inverse |
| color.border.default | unknown | #d1d5db | --color-border-default |
| color.border.subtle | unknown | #e5e7eb | --color-border-subtle |
| color.border.focus | unknown | #252c59 | --color-border-focus |
| color.border.accent | unknown | #0693e3 | --color-border-accent |
| color.status.success | unknown | #238238 | --color-status-success |
| color.status.warning | unknown | #eab308 | --color-status-warning |
| color.status.error | unknown | #cf2e2e | --color-status-error |
| color.status.info | unknown | #0693e3 | --color-status-info |
| color.neutral.0 | unknown | #ffffff | --color-neutral-0 |
| color.neutral.1 | unknown | #f8f9fa | --color-neutral-1 |
| color.neutral.2 | unknown | #e5e7eb | --color-neutral-2 |
| color.neutral.3 | unknown | #d1d5db | --color-neutral-3 |
| color.neutral.4 | unknown | #abb8c3 | --color-neutral-4 |
| color.neutral.5 | unknown | #636973 | --color-neutral-5 |
| color.neutral.6 | unknown | #363636 | --color-neutral-6 |
| color.neutral.7 | unknown | #000000 | --color-neutral-7 |
| gradient.brandNavy | unknown | linear-gradient(135deg, #252c59 0%, #1a1f40 100%) | --gradient-brandNavy |
| gradient.brandAccent | unknown | linear-gradient(135deg, #252c59 0%, #0693e3 100%) | --gradient-brandAccent |
| gradient.subtleWash | unknown | linear-gradient(180deg, #f0f2f5 0%, #ffffff 100%) | --gradient-subtleWash |
| typography.fontFamily.heading | unknown | "Droid Sans Mono", "DM Sans", Helvetica, Arial, sans-serif | --typography-fontFamily-heading |
| typography.fontFamily.body | unknown | "DM Sans", Helvetica, Arial, Lucida, sans-serif | --typography-fontFamily-body |
| typography.fontFamily.mono | unknown | "Droid Sans Mono", ui-monospace, SFMono-Regular, monospace | --typography-fontFamily-mono |
| typography.fontSize.xs | unknown | 11px | --typography-fontSize-xs |
| typography.fontSize.sm | unknown | 13px | --typography-fontSize-sm |
| typography.fontSize.base | unknown | 16px | --typography-fontSize-base |
| typography.fontSize.md | unknown | 18px | --typography-fontSize-md |
| typography.fontSize.lg | unknown | 20px | --typography-fontSize-lg |
| typography.fontSize.xl | unknown | 24px | --typography-fontSize-xl |
| typography.fontSize.2xl | unknown | 30px | --typography-fontSize-2xl |
| typography.fontSize.3xl | unknown | 36px | --typography-fontSize-3xl |
| typography.fontSize.4xl | unknown | 42px | --typography-fontSize-4xl |
| typography.fontSize.display | unknown | 56px | --typography-fontSize-display |
| typography.fontWeight.regular | unknown | 400 | --typography-fontWeight-regular |
| typography.fontWeight.medium | unknown | 500 | --typography-fontWeight-medium |
| typography.fontWeight.semibold | unknown | 600 | --typography-fontWeight-semibold |
| typography.fontWeight.bold | unknown | 700 | --typography-fontWeight-bold |
| typography.lineHeight.tight | unknown | 1.2 | --typography-lineHeight-tight |
| typography.lineHeight.snug | unknown | 1.35 | --typography-lineHeight-snug |
| typography.lineHeight.base | unknown | 1.5 | --typography-lineHeight-base |
| typography.lineHeight.relaxed | unknown | 1.6 | --typography-lineHeight-relaxed |
| typography.letterSpacing.tight | unknown | -0.02em | --typography-letterSpacing-tight |
| typography.letterSpacing.normal | unknown | 0em | --typography-letterSpacing-normal |
| typography.letterSpacing.wide | unknown | 0.05em | --typography-letterSpacing-wide |
| spacing.0 | unknown | 0px | --spacing-0 |
| spacing.1 | unknown | 4px | --spacing-1 |
| spacing.2 | unknown | 7px | --spacing-2 |
| spacing.3 | unknown | 8px | --spacing-3 |
| spacing.4 | unknown | 11px | --spacing-4 |
| spacing.5 | unknown | 16px | --spacing-5 |
| spacing.6 | unknown | 24px | --spacing-6 |
| spacing.7 | unknown | 32px | --spacing-7 |
| spacing.8 | unknown | 36px | --spacing-8 |
| spacing.9 | unknown | 48px | --spacing-9 |
| spacing.10 | unknown | 54px | --spacing-10 |
| spacing.11 | unknown | 64px | --spacing-11 |
| spacing.12 | unknown | 81px | --spacing-12 |
| spacing.16 | unknown | 96px | --spacing-16 |
| spacing.20 | unknown | 128px | --spacing-20 |
| spacing.24 | unknown | 160px | --spacing-24 |
| borderRadius.none | unknown | 0px | --borderRadius-none |
| borderRadius.xs | unknown | 2px | --borderRadius-xs |
| borderRadius.sm | unknown | 4px | --borderRadius-sm |
| borderRadius.md | unknown | 6px | --borderRadius-md |
| borderRadius.lg | unknown | 8px | --borderRadius-lg |
| borderRadius.xl | unknown | 12px | --borderRadius-xl |
| borderRadius.full | unknown | 9999px | --borderRadius-full |
| shadow.subtle | unknown | 0 1px 2px rgba(0, 0, 0, 0.06) | --shadow-subtle |
| shadow.default | unknown | 6px 6px 9px rgba(0, 0, 0, 0.2) | --shadow-default |
| shadow.elevated | unknown | 12px 12px 50px rgba(0, 0, 0, 0.4) | --shadow-elevated |
| shadow.sharp | unknown | 6px 6px 0px rgba(0, 0, 0, 0.2) | --shadow-sharp |
| shadow.brandGlow | unknown | 0 0 24px rgba(37, 44, 89, 0.25) | --shadow-brandGlow |
| shadow.accentGlow | unknown | 0 0 20px rgba(6, 147, 227, 0.3) | --shadow-accentGlow |
| transition.fast | unknown | 150ms ease | --transition-fast |
| transition.default | unknown | 250ms ease | --transition-default |
| transition.slow | unknown | 400ms ease-in-out | --transition-slow |
| breakpoint.mobile | unknown | 480px | --breakpoint-mobile |
| breakpoint.mobileLandscape | unknown | 640px | --breakpoint-mobileLandscape |
| breakpoint.tablet | unknown | 768px | --breakpoint-tablet |
| breakpoint.desktop | unknown | 1024px | --breakpoint-desktop |
| breakpoint.wide | unknown | 1280px | --breakpoint-wide |
| frontier.mesh.accent | color | #252c59 | --frontier-mesh-accent |
| frontier.mesh.r | number | 37 | --frontier-mesh-r |
| frontier.mesh.g | number | 44 | --frontier-mesh-g |
| frontier.mesh.b | number | 89 | --frontier-mesh-b |
| frontier.scene.ambient | color | #06070d | --frontier-scene-ambient |
| frontier.svg.stroke | color | #252c59 | --frontier-svg-stroke |
{
"color": {
"primary": {
"base": {
"$value": "#252c59"
},
"dark": {
"$value": "#1a1f40"
},
"light": {
"$value": "#3d4680"
},
"hover": {
"$value": "#1e2450"
},
"active": {
"$value": "#161a38"
},
"muted": {
"$value": "rgba(37, 44, 89, 0.15)"
}
},
"accent": {
"blue": {
"$value": "#0693e3"
},
"green": {
"$value": "#238238"
},
"teal": {
"$value": "#1a8a8a"
}
},
"background": {
"dark": {
"$value": "#252c59"
},
"darkAlt": {
"$value": "#1a1f40"
},
"card": {
"$value": "#f8f9fa"
},
"elevated": {
"$value": "#ffffff"
},
"light": {
"$value": "#f0f2f5"
},
"white": {
"$value": "#ffffff"
},
"input": {
"$value": "#f5f6f8"
},
"overlay": {
"$value": "rgba(37, 44, 89, 0.65)"
}
},
"text": {
"primary": {
"$value": "#000000"
},
"secondary": {
"$value": "#32373c"
},
"tertiary": {
"$value": "#636973"
},
"muted": {
"$value": "#abb8c3"
},
"inverse": {
"$value": "#ffffff"
}
},
"border": {
"default": {
"$value": "#d1d5db"
},
"subtle": {
"$value": "#e5e7eb"
},
"focus": {
"$value": "#252c59"
},
"accent": {
"$value": "#0693e3"
}
},
"status": {
"success": {
"$value": "#238238"
},
"warning": {
"$value": "#eab308"
},
"error": {
"$value": "#cf2e2e"
},
"info": {
"$value": "#0693e3"
}
},
"neutral": {
"0": {
"$value": "#ffffff"
},
"1": {
"$value": "#f8f9fa"
},
"2": {
"$value": "#e5e7eb"
},
"3": {
"$value": "#d1d5db"
},
"4": {
"$value": "#abb8c3"
},
"5": {
"$value": "#636973"
},
"6": {
"$value": "#363636"
},
"7": {
"$value": "#000000"
}
}
},
"gradient": {
"brandNavy": {
"$value": "linear-gradient(135deg, #252c59 0%, #1a1f40 100%)"
},
"brandAccent": {
"$value": "linear-gradient(135deg, #252c59 0%, #0693e3 100%)"
},
"subtleWash": {
"$value": "linear-gradient(180deg, #f0f2f5 0%, #ffffff 100%)"
}
},
"typography": {
"fontFamily": {
"heading": {
"$value": "\"Droid Sans Mono\", \"DM Sans\", Helvetica, Arial, sans-serif"
},
"body": {
"$value": "\"DM Sans\", Helvetica, Arial, Lucida, sans-serif"
},
"mono": {
"$value": "\"Droid Sans Mono\", ui-monospace, SFMono-Regular, monospace"
}
},
"fontSize": {
"xs": {
"$value": "11px"
},
"sm": {
"$value": "13px"
},
"base": {
"$value": "16px"
},
"md": {
"$value": "18px"
},
"lg": {
"$value": "20px"
},
"xl": {
"$value": "24px"
},
"2xl": {
"$value": "30px"
},
"3xl": {
"$value": "36px"
},
"4xl": {
"$value": "42px"
},
"display": {
"$value": "56px"
}
},
"fontWeight": {
"regular": {
"$value": "400"
},
"medium": {
"$value": "500"
},
"semibold": {
"$value": "600"
},
"bold": {
"$value": "700"
}
},
"lineHeight": {
"tight": {
"$value": "1.2"
},
"snug": {
"$value": "1.35"
},
"base": {
"$value": "1.5"
},
"relaxed": {
"$value": "1.6"
}
},
"letterSpacing": {
"tight": {
"$value": "-0.02em"
},
"normal": {
"$value": "0em"
},
"wide": {
"$value": "0.05em"
}
}
},
"spacing": {
"0": {
"$value": "0px"
},
"1": {
"$value": "4px"
},
"2": {
"$value": "7px"
},
"3": {
"$value": "8px"
},
"4": {
"$value": "11px"
},
"5": {
"$value": "16px"
},
"6": {
"$value": "24px"
},
"7": {
"$value": "32px"
},
"8": {
"$value": "36px"
},
"9": {
"$value": "48px"
},
"10": {
"$value": "54px"
},
"11": {
"$value": "64px"
},
"12": {
"$value": "81px"
},
"16": {
"$value": "96px"
},
"20": {
"$value": "128px"
},
"24": {
"$value": "160px"
}
},
"borderRadius": {
"none": {
"$value": "0px"
},
"xs": {
"$value": "2px"
},
"sm": {
"$value": "4px"
},
"md": {
"$value": "6px"
},
"lg": {
"$value": "8px"
},
"xl": {
"$value": "12px"
},
"full": {
"$value": "9999px"
}
},
"shadow": {
"subtle": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.06)"
},
"default": {
"$value": "6px 6px 9px rgba(0, 0, 0, 0.2)"
},
"elevated": {
"$value": "12px 12px 50px rgba(0, 0, 0, 0.4)"
},
"sharp": {
"$value": "6px 6px 0px rgba(0, 0, 0, 0.2)"
},
"brandGlow": {
"$value": "0 0 24px rgba(37, 44, 89, 0.25)"
},
"accentGlow": {
"$value": "0 0 20px rgba(6, 147, 227, 0.3)"
}
},
"transition": {
"fast": {
"$value": "150ms ease"
},
"default": {
"$value": "250ms ease"
},
"slow": {
"$value": "400ms ease-in-out"
}
},
"breakpoint": {
"mobile": {
"$value": "480px"
},
"mobileLandscape": {
"$value": "640px"
},
"tablet": {
"$value": "768px"
},
"desktop": {
"$value": "1024px"
},
"wide": {
"$value": "1280px"
}
},
"frontier": {
"mesh": {
"accent": {
"$type": "color",
"$value": "#252c59"
},
"r": {
"$type": "number",
"$value": 37
},
"g": {
"$type": "number",
"$value": 44
},
"b": {
"$type": "number",
"$value": 89
}
},
"scene": {
"ambient": {
"$type": "color",
"$value": "#06070d"
}
},
"svg": {
"stroke": {
"$type": "color",
"$value": "#252c59"
}
}
}
}