Skip to main content
The design system tools give designers, developers, and content creators instant access to ColisMove’s visual identity and component library.

​
Tools overview

get_brand_guidelines

Brand identity, personality traits, tone of voice, and communication register by context.

get_design_tokens

OKLCH color system, typography (Inter/Geist), border radius scale, and CSS animations.

get_component_catalog

63 components across 6 categories — filterable by category (base, form, navigation, feedback, data, business).

get_visual_style

Rounded corners philosophy, shadows, glassmorphism, glow effects, and micro-interactions.

get_color_palette

Complete hex + OKLCH palette for light and dark modes, sidebar tokens, and status colors.

​
Example conversations

You ask:
I’m designing a marketing email for ColisMove. What colors and tone should I use?
The AI calls get_brand_guidelines and get_color_palette to give you:
  • Primary orange #E85A2A for CTAs
  • Brand personality: accessible, trustworthy, modern
  • Tone: warm and reassuring, avoid jargon
  • “Says” vs “Doesn’t say” examples
You ask:
I need to build a pricing comparison page. What components should I use?
The AI calls get_component_catalog with category “data” and “base” to recommend:
  • Cards for pricing tiers
  • Badges for plan labels
  • Buttons with primary/secondary variants
  • Available animations for hover effects
You ask:
What’s the dark mode background color?
The AI calls get_color_palette and returns the exact OKLCH and hex values for dark mode tokens.

​
Component categories

CategoryCountExamples
Base14Button, Card, Badge, Avatar, Separator
Form17Input, Select, Checkbox, DatePicker, Slider
Navigation9Sidebar, Tabs, Breadcrumb, Pagination
Feedback7Alert, Toast, Dialog, Progress, Skeleton
Data5Table, Chart, Calendar, DataTable, Timeline
Business10AnnouncementCard, BookingTimeline, KYCBadge, WalletCard
Ask get_component_catalog with a specific category to get detailed component specs including variants, sizes, and states.