Emllet design system
Use these shared components and tokens across Emllet’s website and salon portal.
Foundations
Color has a job. Blue indicates interaction; other colors explain a status.
Color
#202328#5B616C#FFFFFF#F5F6F8#DFE3E8#7B8491#2458D3Typography
Manrope, regular and semibold. Body copy starts at 16 px, with a comfortable reading width and room for longer labels.
Review your calls.
Review your calls.
Review your calls.
Review your calls.
Review your calls.
Review your calls.
Review your calls.
- Control height
- 48 px minimum
- Control radius
- 8 px
- Spacing rhythm
- 8 / 16 / 24 / 32 / 48 px
- State transition
- 160 ms · respects reduced motion
Actions
One primary action per decision. Outline supporting actions, underline text actions, and name destructive actions plainly.
Try an action to inspect its feedback. These examples make no changes.
Navigation uses a link. Changes use a button.
Component usage
<Button type="submit">Save changes</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="danger">Pause answering</Button>
<ButtonLink href="/demo">Request a demo</ButtonLink>Forms
Keep labels visible, make optional fields explicit, and preserve entries when saving fails. Pending labels reserve their width so controls stay in place.
Field states
Enter a complete phone number.
Explain why a control is unavailable.
Tab through the fields to inspect the blue focus ring. Labels and hints remain associated with their controls.
Feedback
Say what happened and what someone can do next. Text carries the meaning; color supports it.
Your changes still need review before callers use them.
Check the request and handling details before confirming an appointment.
- Attention
- Callback number not confirmed. Check the request before calling.
- Success
- Notification settings saved.
- Error
- Your changes could not be saved. Your entries are still here; try again.
- Empty
- No requests need a reply. New requests appear when a caller leaves their details.
A saved request
The homepage and salon portal use this component to show who called, what they need, and whether they confirmed their callback number.
Milo
Bath and tidy
Dana · +12025550142
Confirmed by caller
Dana would like a bath and tidy for Milo. Please call back to discuss availability. No appointment has been booked.
Call Dana to discuss availability. Your salon confirms the appointment.
Scripted sample. No customer data or live call controls.
Brand voice
Calm, capable, direct, and considerate. Write for the moment a salon owner needs to understand a call and choose the next step.
- Our promise
- Keep grooming. We’ll answer.
- Our descriptor
- AI phone answering for dog groomers.
- Useful actions
- Save notification settings. Review the request. Back to calls.
- Honest feedback
- Setup draft saved. Your changes still need review.
- Clear boundaries
- A request is not a confirmed appointment. A pause does not cancel a subscription.
Use plain language and sentence case. Name what happened and what comes next. Keep samples labeled, commercial terms explicit, and customer claims supported by evidence.
Use the system
Reuse shared components, and arrange them around the task someone needs to complete.
- Start with the task.
Put the next useful action near the information it depends on. Use dividers and space before adding another container.
- Keep meaning explicit.
Write specific labels. Pair status color with words. Never imply that a request is a confirmed appointment.
- Preserve the work.
Keep form entries after errors, show progress during saves, and reserve destructive actions for deliberate decisions.
- Make room for everyone.
Keep keyboard focus visible, support resized text, and let controls and navigation wrap on smaller screens.
The token download is the source for generated CSS variables. This page uses the shared controls shipped in the product.