Neuropathy Herbalist
Healthcare practice website for Trevor Clark, herbalist specializing in peripheral neuropathy treatment. Blue primary (#1e3a8a) + green nature (#15803d) palette with DM Sans / Inter typography.
62 tokensOnboarded 2026-04-17
Color System
Typography
'DM Sans'
Display — The quick brown fox jumps
H1 — The quick brown fox jumps
H2 — The quick brown fox jumps
H3 — The quick brown fox jumps
'Inter'
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.
'JetBrains Mono'
const tokens = await extractFromCSS(url); const merged = mergeTokens(foundation, overrides); const css = toCSSVariables(merged);
Spacing & Shape
Spacing Scale
sm
8px
md
16px
lg
24px
xl
32px
Border Radius
sm
4px
md
8px
lg
12px
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
62Colors
26Components
66LiveBuildingFailed
Token density
Score Gauge
95
Design Drift
62
Token Count
75
Coverage
Avatar & Tooltip
Hover me
Token Reference
| DTCG Path | Type | Value | CSS Variable |
|---|---|---|---|
| color.primary.base | color | #1e3a8a | --color-primary-base |
| color.primary.hover | color | #3b82f6 | --color-primary-hover |
| color.primary.active | color | #0a1f5c | --color-primary-active |
| color.primary.light | color | #dbeafe | --color-primary-light |
| color.primary.muted | color | #93c5fd | --color-primary-muted |
| color.accent.base | color | #15803d | --color-accent-base |
| color.accent.hover | color | #22c55e | --color-accent-hover |
| color.accent.active | color | #14532d | --color-accent-active |
| color.accent.light | color | #dcfce7 | --color-accent-light |
| color.accent.muted | color | #86efac | --color-accent-muted |
| color.cta.base | color | #3b82f6 | --color-cta-base |
| color.cta.hover | color | #1e3a8a | --color-cta-hover |
| color.cta.secondary | color | #15803d | --color-cta-secondary |
| color.background.page | color | #fafafa | --color-background-page |
| color.background.card | color | #ffffff | --color-background-card |
| color.background.muted | color | #f4f4f5 | --color-background-muted |
| color.background.dark | color | #0a1f5c | --color-background-dark |
| color.text.primary | color | #0a0a0a | --color-text-primary |
| color.text.secondary | color | #52525b | --color-text-secondary |
| color.text.muted | color | #a1a1aa | --color-text-muted |
| color.text.inverse | color | #fafafa | --color-text-inverse |
| color.border.default | color | #e4e4e7 | --color-border-default |
| color.border.muted | color | #a1a1aa | --color-border-muted |
| color.status.success | color | #22c55e | --color-status-success |
| color.status.warning | color | #f59e0b | --color-status-warning |
| color.status.error | color | #ef4444 | --color-status-error |
| typography.fontFamily.heading | fontFamily | 'DM Sans', system-ui, sans-serif | --typography-fontFamily-heading |
| typography.fontFamily.body | fontFamily | 'Inter', system-ui, sans-serif | --typography-fontFamily-body |
| typography.fontFamily.mono | fontFamily | 'JetBrains Mono', monospace | --typography-fontFamily-mono |
| typography.fontSize.xs | dimension | 12px | --typography-fontSize-xs |
| typography.fontSize.sm | dimension | 14px | --typography-fontSize-sm |
| typography.fontSize.base | dimension | 16px | --typography-fontSize-base |
| typography.fontSize.lg | dimension | 18px | --typography-fontSize-lg |
| typography.fontSize.xl | dimension | 24px | --typography-fontSize-xl |
| typography.fontSize.2xl | dimension | 30px | --typography-fontSize-2xl |
| typography.fontSize.3xl | dimension | 36px | --typography-fontSize-3xl |
| typography.fontSize.4xl | dimension | 48px | --typography-fontSize-4xl |
| typography.fontWeight.normal | fontWeight | 400 | --typography-fontWeight-normal |
| typography.fontWeight.medium | fontWeight | 500 | --typography-fontWeight-medium |
| typography.fontWeight.semibold | fontWeight | 600 | --typography-fontWeight-semibold |
| typography.fontWeight.bold | fontWeight | 700 | --typography-fontWeight-bold |
| typography.lineHeight.tight | number | 1.25 | --typography-lineHeight-tight |
| typography.lineHeight.normal | number | 1.5 | --typography-lineHeight-normal |
| typography.lineHeight.relaxed | number | 1.75 | --typography-lineHeight-relaxed |
| spacing.xs | dimension | 4px | --spacing-xs |
| spacing.sm | dimension | 8px | --spacing-sm |
| spacing.md | dimension | 16px | --spacing-md |
| spacing.lg | dimension | 24px | --spacing-lg |
| spacing.xl | dimension | 32px | --spacing-xl |
| spacing.2xl | dimension | 48px | --spacing-2xl |
| spacing.3xl | dimension | 64px | --spacing-3xl |
| spacing.4xl | dimension | 96px | --spacing-4xl |
| borderRadius.sm | dimension | 4px | --borderRadius-sm |
| borderRadius.md | dimension | 8px | --borderRadius-md |
| borderRadius.lg | dimension | 12px | --borderRadius-lg |
| borderRadius.xl | dimension | 16px | --borderRadius-xl |
| borderRadius.full | dimension | 9999px | --borderRadius-full |
| shadow.sm | shadow | 0 1px 2px rgba(0,0,0,0.05) | --shadow-sm |
| shadow.md | shadow | 0 4px 6px -1px rgba(0,0,0,0.1) | --shadow-md |
| shadow.lg | shadow | 0 10px 15px -3px rgba(0,0,0,0.1) | --shadow-lg |
| shadow.xl | shadow | 0 20px 25px -5px rgba(0,0,0,0.1) | --shadow-xl |
| shadow.glow | shadow | 0 4px 12px rgba(59,130,246,0.4) | --shadow-glow |
{
"$schema": "https://design-tokens.org/schema.json",
"$description": "Neuropathy Herbalist — brand tokens extracted from Penpot design system",
"color": {
"primary": {
"base": {
"$value": "#1e3a8a",
"$type": "color",
"$description": "Rich blue — primary brand"
},
"hover": {
"$value": "#3b82f6",
"$type": "color",
"$description": "Bright blue — CTA hover"
},
"active": {
"$value": "#0a1f5c",
"$type": "color",
"$description": "Deep navy — active state"
},
"light": {
"$value": "#dbeafe",
"$type": "color",
"$description": "Pale blue — background accent"
},
"muted": {
"$value": "#93c5fd",
"$type": "color",
"$description": "Light blue — highlights"
}
},
"accent": {
"base": {
"$value": "#15803d",
"$type": "color",
"$description": "Sage green — healing/nature"
},
"hover": {
"$value": "#22c55e",
"$type": "color",
"$description": "Fresh green — vitality"
},
"active": {
"$value": "#14532d",
"$type": "color",
"$description": "Forest green — deep trust"
},
"light": {
"$value": "#dcfce7",
"$type": "color",
"$description": "Mint — calm background"
},
"muted": {
"$value": "#86efac",
"$type": "color",
"$description": "Light green — growth"
}
},
"cta": {
"base": {
"$value": "#3b82f6",
"$type": "color",
"$description": "Bright blue — primary CTA"
},
"hover": {
"$value": "#1e3a8a",
"$type": "color",
"$description": "Deep blue — CTA hover"
},
"secondary": {
"$value": "#15803d",
"$type": "color",
"$description": "Green — secondary CTA"
}
},
"background": {
"page": {
"$value": "#fafafa",
"$type": "color",
"$description": "Cloud Dancer — primary BG"
},
"card": {
"$value": "#ffffff",
"$type": "color",
"$description": "White — card surfaces"
},
"muted": {
"$value": "#f4f4f5",
"$type": "color",
"$description": "Off-white — section backgrounds"
},
"dark": {
"$value": "#0a1f5c",
"$type": "color",
"$description": "Deep navy — dark sections"
}
},
"text": {
"primary": {
"$value": "#0a0a0a",
"$type": "color",
"$description": "True black — body text"
},
"secondary": {
"$value": "#52525b",
"$type": "color",
"$description": "Gray — secondary text"
},
"muted": {
"$value": "#a1a1aa",
"$type": "color",
"$description": "Mid gray — placeholder/muted"
},
"inverse": {
"$value": "#fafafa",
"$type": "color",
"$description": "White — text on dark BG"
}
},
"border": {
"default": {
"$value": "#e4e4e7",
"$type": "color",
"$description": "Light gray — dividers"
},
"muted": {
"$value": "#a1a1aa",
"$type": "color",
"$description": "Mid gray — subtle borders"
}
},
"status": {
"success": {
"$value": "#22c55e",
"$type": "color"
},
"warning": {
"$value": "#f59e0b",
"$type": "color"
},
"error": {
"$value": "#ef4444",
"$type": "color"
}
}
},
"typography": {
"fontFamily": {
"heading": {
"$value": "'DM Sans', system-ui, sans-serif",
"$type": "fontFamily",
"$description": "Display font for headings"
},
"body": {
"$value": "'Inter', system-ui, sans-serif",
"$type": "fontFamily",
"$description": "Body text font"
},
"mono": {
"$value": "'JetBrains Mono', monospace",
"$type": "fontFamily",
"$description": "Monospace font"
}
},
"fontSize": {
"xs": {
"$value": "12px",
"$type": "dimension"
},
"sm": {
"$value": "14px",
"$type": "dimension"
},
"base": {
"$value": "16px",
"$type": "dimension"
},
"lg": {
"$value": "18px",
"$type": "dimension"
},
"xl": {
"$value": "24px",
"$type": "dimension"
},
"2xl": {
"$value": "30px",
"$type": "dimension"
},
"3xl": {
"$value": "36px",
"$type": "dimension"
},
"4xl": {
"$value": "48px",
"$type": "dimension"
}
},
"fontWeight": {
"normal": {
"$value": "400",
"$type": "fontWeight"
},
"medium": {
"$value": "500",
"$type": "fontWeight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight"
},
"bold": {
"$value": "700",
"$type": "fontWeight"
}
},
"lineHeight": {
"tight": {
"$value": "1.25",
"$type": "number"
},
"normal": {
"$value": "1.5",
"$type": "number"
},
"relaxed": {
"$value": "1.75",
"$type": "number"
}
}
},
"spacing": {
"xs": {
"$value": "4px",
"$type": "dimension"
},
"sm": {
"$value": "8px",
"$type": "dimension"
},
"md": {
"$value": "16px",
"$type": "dimension"
},
"lg": {
"$value": "24px",
"$type": "dimension"
},
"xl": {
"$value": "32px",
"$type": "dimension"
},
"2xl": {
"$value": "48px",
"$type": "dimension"
},
"3xl": {
"$value": "64px",
"$type": "dimension"
},
"4xl": {
"$value": "96px",
"$type": "dimension"
}
},
"borderRadius": {
"sm": {
"$value": "4px",
"$type": "dimension"
},
"md": {
"$value": "8px",
"$type": "dimension"
},
"lg": {
"$value": "12px",
"$type": "dimension"
},
"xl": {
"$value": "16px",
"$type": "dimension"
},
"full": {
"$value": "9999px",
"$type": "dimension"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0,0,0,0.05)",
"$type": "shadow"
},
"md": {
"$value": "0 4px 6px -1px rgba(0,0,0,0.1)",
"$type": "shadow"
},
"lg": {
"$value": "0 10px 15px -3px rgba(0,0,0,0.1)",
"$type": "shadow"
},
"xl": {
"$value": "0 20px 25px -5px rgba(0,0,0,0.1)",
"$type": "shadow"
},
"glow": {
"$value": "0 4px 12px rgba(59,130,246,0.4)",
"$type": "shadow"
}
}
}