Documentation Index
Fetch the complete documentation index at: https://docs.tokencraft.dev/llms.txt
Use this file to discover all available pages before exploring further.
Basic Usage Examples
Practical examples showing how to use Tokencraft with Claude. Start with the connection test above, then try these patterns.
Common Questions New Users Ask
”How do I find token IDs?”
Don’t worry about IDs! Use these helper tools first:
list_resources - Shows everything with IDsfind_tokens_by_type - Search by type (color, spacing, etc.)search_tokens - Search by name or value
”What’s the difference between tokensets and modes?”
- Tokenset: A collection of related tokens (Colors, Typography, Spacing)
- Mode: Different values for the same tokens (Light/Dark themes, Compact/Regular sizing)
Ask Claude directly:
- “Export as CSS variables”
- “Generate iOS Swift colors”
- “Create Android XML colors”
- “Give me JSON format”
Test the Connection
Start with the basics to make sure everything works:
You: Show me my workspaces
Claude: You have 3 workspaces:
1. Design System - Main product design system
2. Mobile App - Mobile application tokens
3. Marketing Site - Marketing website design tokens
Which would you like to explore?
Progressive Examples
Start simple, then go deeper:
1. Find Something Specific
You: What's my primary color?
Claude: Your primary color is #3b82f6 in light mode, #60a5fa in dark mode.
2. Explore Your System
You: Show me all color tokens
Claude: You have 45 color tokens across 3 workspaces:
- Brand colors: primary, secondary, accent
- Semantic colors: success, warning, error
- Neutral colors: backgrounds, text, borders
3. Get Technical Details
You: Give me the exact RGB values for the primary color
Claude: Primary color (#3b82f6):
- RGB: 59, 130, 246
- HSL: 217°, 91%, 60%
- Used in 8 different tokens
4. Export for Development
You: Export all colors as CSS variables
Claude: Here's your CSS:
```css
:root {
--color-primary: #3b82f6;
--color-secondary: #5856d6;
--color-success: #34c759;
/* ... 42 more colors */
}
Deep Dive Examples
List Workspaces
You: What Tokencraft workspaces do I have?
Claude: You have 3 workspaces:
1. **Design System** (Created Jan 15, 2025)
Main product design system
2. **Mobile App** (Created Jan 10, 2025)
Mobile application tokens
3. **Marketing Site** (Created Jan 5, 2025)
Marketing website design tokens
Which one would you like to explore?
Explore a Workspace
You: Show me what's in the Design System workspace
Claude: **Design System Workspace**
This workspace contains 3 tokensets:
1. **Colors** - 50 tokens
Color tokens for the design system
Modes: Light, Dark, High Contrast
2. **Typography** - 25 tokens
Font and text tokens
Modes: Base
3. **Spacing** - 15 tokens
Layout and spacing tokens
Modes: Base, Compact
Total: 90 tokens across all tokensets
View a Tokenset
You: Show me the Colors tokenset
Claude: **Colors Tokenset**
**Description:** Color tokens for the design system
**Modes:**
- Light (default) - 50 tokens
- Dark - 50 tokens
- High Contrast - 45 tokens
**Token Categories:**
- Primary colors (8 tokens)
- Secondary colors (6 tokens)
- Background colors (12 tokens)
- Text colors (10 tokens)
- Semantic colors (14 tokens)
Would you like to see the tokens for a specific mode?
List Tokens
You: Show me the tokens in the Light mode
Claude: **Light Mode - Colors** (50 tokens)
**Primary Colors:**
- colors.primary.500: #3b82f6 (Primary brand color)
- colors.primary.600: #2563eb
- colors.primary.700: #1d4ed8
**Background Colors:**
- colors.background.default: #ffffff
- colors.background.subtle: #f9fafb
- colors.background.muted: #f3f4f6
**Text Colors:**
- colors.text.primary: #111827
- colors.text.secondary: #6b7280
- colors.text.tertiary: #9ca3af
[... and 41 more tokens]
Searching Tokens
By Name
You: Find all tokens with "primary" in the name
Claude: Found 8 tokens with "primary":
**Light Mode:**
- colors.primary.500: #3b82f6 (Primary brand color)
- colors.primary.600: #2563eb
- colors.primary.700: #1d4ed8
- button.primary.background → colors.primary.500
**Dark Mode:**
- colors.primary.500: #60a5fa
- colors.primary.600: #3b82f6
- colors.primary.700: #2563eb
- button.primary.background → colors.primary.500
By Type
You: Show me all dimension tokens
Claude: **Dimension Tokens** (15 total)
**Spacing:**
- spacing.base: 16px
- spacing.xs: 4px
- spacing.sm: 8px
- spacing.md: 12px
- spacing.lg: 24px
- spacing.xl: 32px
**Sizing:**
- size.button.sm: 32px
- size.button.md: 40px
- size.button.lg: 48px
[... and 6 more]
By Value
You: What tokens use the color #3b82f6?
Claude: The color #3b82f6 is used by:
**Direct values:**
- colors.primary.500: #3b82f6
**Aliases (reference colors.primary.500):**
- button.primary.background
- link.default.color
- focus.ring.color
This is your primary brand color, used in 3 other tokens via aliases.
Exporting Tokens
Export as CSS
You: Export the Light mode colors as CSS
Claude: Here's your CSS export:
```css
:root {
/* Primary brand color */
--colors-primary-500: #3b82f6;
--colors-primary-600: #2563eb;
--colors-background-default: #ffffff;
--colors-text-primary: #111827;
/* ... */
}
You: I need the colors in both JSON and CSS
Claude: **JSON Export:**
```json
{
"colors": {
"primary": {
"500": {
"value": "#3b82f6",
"type": "color"
}
}
}
}
:root {
--colors-primary-500: #3b82f6;
}
Analyzing Your Design System
Token Statistics
You: Give me statistics about my design tokens
Claude: **Design Token Statistics**
Total Workspaces: 3
Total Tokensets: 10
Total Tokens: 245
**By Type:**
- Colors: 120 (49%)
- Dimensions: 65 (27%)
- Typography: 40 (16%)
- Other: 20 (8%)
**By Workspace:**
- Design System: 90 tokens (37%)
- Mobile App: 85 tokens (35%)
- Marketing Site: 70 tokens (29%)
**Modes:**
- 6 tokensets with Light/Dark modes
- 4 tokensets with single mode
Compare Modes
You: Compare the primary color between Light and Dark modes
Claude: **Primary Color Comparison**
**Light Mode:**
- colors.primary.500: #3b82f6 (RGB: 59, 130, 246)
- Brightness: 62%
**Dark Mode:**
- colors.primary.500: #60a5fa (RGB: 96, 165, 250)
- Brightness: 75%
**Difference:**
The dark mode version is 37 points lighter in RGB and 21% brighter,
making it more visible on dark backgrounds.
