Design Systems
Upload your design system to a project. JuhJuh applies your colors, typography, and component patterns automatically during AI ticket execution.
Design systems tell JuhJuh how your UI should look. Upload your brand guidelines, component specs, or style tokens to a project, and every AI execution that touches frontend code will follow them. No more fixing colors after the fact.
How it works¶
You add a design system to a project. When a ticket involves UI work (templates, CSS, components, styling), JuhJuh detects it and loads your design system into the execution context. The AI reads your tokens, patterns, and component rules before writing a single line of code.
Each project can have multiple design systems. A color palette for the marketing site, a component library for the dashboard, platform-specific guidelines for iOS and Android. They all live in one place and get applied when relevant.
Adding a design system¶
- Open your project
- Scroll to Design Systems
- Choose how to add your guidelines:
Paste text. Copy your design tokens, color values, spacing scale, or component specs directly. Good for quick additions or when your guidelines live in a wiki or Notion page. Maximum 50,000 characters.
Upload a file. Drop in a PDF, Word document, or text file containing your full design system. JuhJuh extracts the content automatically. Supported formats: PDF, DOCX, DOC, TXT, and Markdown. Maximum file size: 10 MB.
- Name the design system (e.g., "Brand Colors", "Component Library", "Mobile Design Tokens")
- Choose a platform: Web, Mobile, iOS, Android, or All Platforms
- Click Save
Uploaded files are processed in the background. You will see a processing indicator until extraction finishes. Text-pasted design systems are available immediately.
Platform targeting¶
Each design system targets a specific platform. When JuhJuh detects that a ticket involves frontend work, it loads only the design systems relevant to the platform context. A ticket modifying an iOS view pulls in your iOS and All Platforms design systems, but skips Web-only guidelines.
| Platform | When it is loaded |
|---|---|
| Web | Tickets touching HTML, CSS, web templates, or browser-based UI |
| Mobile | Tickets involving cross-platform mobile code |
| iOS | iOS-specific tickets |
| Android | Android-specific tickets |
| All Platforms | Always loaded when any UI work is detected |
What to include¶
A good design system gives the AI enough context to produce consistent, on-brand output. Here are the most useful things to include.
Color tokens. Primary, secondary, neutral, semantic (error, warning, success), and their dark mode variants. Include hex values or CSS variable names.
Typography. Font families, sizes, weights, and line heights for headings, body text, labels, and captions.
Spacing and layout. Your spacing scale (4px, 8px, 12px, 16px, etc.), grid system, container widths, and breakpoints.
Component patterns. How buttons, forms, cards, modals, tables, and navigation should look. Include states: hover, active, disabled, loading.
Dark mode rules. If your product supports dark mode, include the color mappings and any component-level overrides.
Do's and don'ts. Explicit rules like "never use red for non-error states" or "always use rounded corners on cards" help the AI avoid common mistakes.
Viewing and managing¶
All design systems for a project appear in the Design Systems section of the project dashboard. Each entry shows:
- Name and source type (file or text)
- Platform badge
- Character count
- Expandable content preview
Click any design system to expand its full content. The preview renders Markdown formatting, so your guidelines stay readable.
To remove a design system, click the delete icon and confirm. Only organization admins can delete design systems.
API access¶
Manage design systems programmatically through the API.
| Method | Endpoint | Action |
|---|---|---|
GET |
/api/v1/projects/{key}/design-systems/ |
List all design systems |
POST |
/api/v1/projects/{key}/design-systems/ |
Create a new design system |
GET |
/api/v1/projects/{key}/design-systems/{id}/ |
Get a specific design system |
PATCH |
/api/v1/projects/{key}/design-systems/{id}/ |
Update a design system |
DELETE |
/api/v1/projects/{key}/design-systems/{id}/ |
Delete a design system |
Filter by platform or search by name using query parameters:
GET /api/v1/projects/ACME/design-systems/?platform=web&search=colors
Permissions¶
| Action | Required role |
|---|---|
| View design systems | Project member |
| Create or edit | Member with manage settings permission |
| Delete | Organization admin |
See Permissions for the full role and permission reference.
Tips¶
- Keep design systems focused. One for colors and tokens, one for components, one for platform-specific rules. Smaller, targeted documents are more useful to the AI than a single 200-page PDF.
- Update when your brand evolves. Design systems are not snapshots. When your tokens or component patterns change, update the design system in JuhJuh so future executions use the latest guidelines.
- Use platform targeting. If your iOS and Android apps share a design system, use All Platforms. If they diverge, create separate entries for each. The AI only loads what is relevant.
- Include dark mode. If your app supports it, always include dark mode color mappings. Without them, the AI may generate light-only styles.
Related¶
- Projects for organizing repositories and project-level settings
- Tickets for the execution lifecycle where design systems are applied
- Agents for custom AI agents that can also reference design systems
- Permissions for role and access control details
- Brand Voice for controlling the writing style of AI output
- API for managing design systems programmatically