Make the next step clear.
Reserve the brand accent for one primary action per view.
CancelSave changes
WHY A clear hierarchy makes the important action easy to find.
Your design system.Understood by AI.
Bring your brand, design rules and components into one system.
Give your AI the context to build interfaces that feel like you.
A website, a screenshot, your brand files. Start with what’s yours.
Change the identity. Keep the components. Give your agent the rules behind both.
85 components4 native primitivesMCP connectedDesign rules for AI
Made for humans. Ready for agents.
Better context.
Better context.
Better interfaces.
Your brand sets the direction. Your rules explain the decisions. Your agent builds with the components that bring them to life.
Use Frontfriend with your 
Claude, 
Codex, 
Gemini agent
Claude, Codex, Gemini agentYou
Build our billing page
using our design system.
01 / MCP
Answers from your system.
Share relevant design rules, tokens and component APIs with the agent working in your application.
Connect MCP 02 / DESIGN SKILLSA process behind the prompt.
Set up context, design screens and audit existing interfaces with workflows grounded in your system.
Explore the skills 03 / CONTRACTSDecisions that stay decided.
Keep page intent, constraints and rationale close to the code, so the next iteration builds on what matters.
Read about contracts The thinking behind the interface
A color is a value.
A color is a value.
Knowing when to use it is a rule.
Give your AI more than a palette. Share the decisions that make your product look, feel and sound like you.
Give every state a meaning.
Explain an error in words. Never rely on color alone.
We couldn’t save your changes.Check your connection and try again.
WHY People need to know what happened and what to do next.
Sound like your product.
Use plain, specific language. Name the action your user is taking.
WHY Familiar words help people move with confidence.
Your brand is the starting point
From your website.
From your website.
To your design system.
Bring a URL, a screenshot or your brand files. Frontfriend turns your visual identity into suggested colors, type and component foundations. Review them, make them yours, and add the rules that define your product.
Try Brand Import See how it worksstripe.comTHE STARTING POINT
stripe Visual DNA
Aa
Revenue, in focus.A character all its own.
#635BFF
#0A2540
#A5B4FC
#F6F9FC
Your private registry. Cloud infrastructure included.
Your components.
Your components.
We run the registry.
Create and manage your private component registry on Frontfriend’s cloud.
Hosting, access, versioning and CLI workflows. Already connected to your design
system.
The cloud is taken care of.
Frontfriend hosts your private registry and handles authenticated delivery. Your team focuses on the components.
The commands are ready.
Use the Frontfriend CLI to connect your projects, download components and keep design context in sync.
Manage it all in one place.
Keep custom components, versions, dependencies and access in your design system. Choose the versions each release uses.
Start with 85 components across four primitive technologies. Extend the system with your own.
- Accordion
- Action Bar
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Avatar Group
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Checkbox Field
- Collapsible
- Combobox
- Command
- Context Menu
- Date Input
- Date Picker
- Date Slider
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- File Upload
- Form
- Hover Card
- Icon
- Input
- Input Group
- Input Otp
- Item
- Kbd
- Label
- List
- Marker
- Menubar
- Message
- Message Scroller
- Multi Select
- Native Select
- Navbar
- Navigation Menu
- Number Field
- Page
- Pagination
- Pdf Viewer
- Phone Input
- Popover
- Progress
- Radio Group
- Radio Group Field
- Range Calendar
- Resizable
- Scroll Area
- Segmented
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Stepper
- Switch
- Tab Bar
- Table
- Tabs
- Tags Input
- Textarea
- Theme Picker
- Theme Provider
- Time Picker
- Toast
- Toggle
- Toggle Group
- Tooltip
A component library with your point of view.
Shape it with your brand. Extend it with your components. Guide your AI with your rules.
One system, from intent to interface
Your people.
Explore the documentation
Your people.
Your agents. Your stack.
Give each brand its own system. Carry its identity and rules into React and Vue, with native components for the stack each application uses.
Control the details.
Fine-tune color, type, spacing and component properties in Theme Studio.
Keep the code.
Component source lives in your repository, on the primitives you choose.
Move at your own pace.
Review system changes and adopt them deliberately in each application.
YOUR DESIGN SYSTEM ◧ Base UI◐ Radix◌ Aria▽ Reka
One brand across stacks. Different brands from the same components.
Make it yours.
Teach your AI how.
Your brand, your rules, your components. Ready for your next prompt.