Skip to main content
Design system

Component gallery

Every component the design system ships, with the corrections the build spec requires. Switch language to check the same page in the other reading direction.

Ported from the Calendaty Landing Design System. Five colour tokens and the focus ring differ deliberately — see docs/DERIVED-TOKENS.md.

Colour tokens

Green is the spine, peach the one accent, terracotta rare. Every pairing is measured on every build.

  • --color-cream
  • --color-white
  • --color-inset
  • --color-hairline
  • --color-control
  • --color-ink
  • --color-body
  • --color-muted
  • --color-green
  • --color-green-hover
  • --color-green-08
  • --color-green-12
  • --color-mid-green
  • --color-avatar
  • --color-peach
  • --color-peach-text
  • --color-terracotta
  • --color-terracotta-fill
  • --color-terracotta-08
  • --color-terracotta-text
  • --color-danger
  • --color-danger-08

Type ladder

Two families per locale. Size comes from the class, never from the heading level.

Meetings, handled.

Hero · Space Grotesk 700 · 56 / 1.1 · −0.02em · Ink

Find the time, instantly

Section heading · Space Grotesk 700 · 34 / 1.2 · −0.02em · Ink

Smart scheduling

Card title · Space Grotesk 500 · 18 / 1.3 · Ink

Calendaty's agent finds the time, sends the invite, and keeps everyone in sync — so a meeting takes one message, not ten.

Body large · IBM Plex Sans 400 · 17 / 1.55 · Secondary

It reads your calendar, understands working hours and time zones, and proposes slots that actually work for both sides.

Body · IBM Plex Sans 400 · 15 / 1.55 · Secondary

No credit card required · Cancel anytime

Caption · IBM Plex Sans 400 · 12 · Tertiary
Scheduling, handled Eyebrow · IBM Plex Sans 600 · 11 · uppercase · 0.06em · green
Book a meeting Button label · IBM Plex Sans 500 · 14

In Arabic one family carries both roles and weight carries the hierarchy. Uppercase and letter-spacing are switched off, leading opens up, and Latin runs are wrapped so their punctuation stays put.

Buttons

Primary and secondary only — a quiet action is a link. A button that navigates is an anchor. One primary per moment.

Primary Book a meeting
Secondary
Small
Disabled
With icon See how it works

Badges

Peach at most once per section; terracotta zero or once on the whole page.

Design system Pricing Motif Payment failed

Cards

The base surface: white on cream. A card that lifts on hover is always a real link, never a div with a click handler.

Ask the agent

Tell me who and how long — I'll find the slot.

Booking page

The classic booking page is still there for people who would rather pick a time themselves.

Deposit received

Deposits, receipts and failed payments are handled without you chasing anyone.

Section heading

Eyebrow, headline, subhead. The subhead caps at 460px so the measure stays readable.

Scheduling, handled

Meetings that book themselves

Calendaty's agent finds the time, sends the invite, and keeps everyone in sync.

Why teams switch

Quiet by design

One calm system from first message to confirmed meeting.

Chat bubbles

The finished conversation is in the HTML. Script only replays it, and only on screen, and never under reduced motion.

How a booking happens

Hi — do you have anything for a haircut on Thursday afternoon?
Thursday works. 2:30 PM or 4:00 PM with Sara — both open.
2:30 please
Booked for Thursday 2:30 PM. A 20% deposit holds the slot; here is the link.
Confirmed and added to your calendar

Meeting card

Confirmed and cancelled. A cancellation is neutral, not danger — it is information, not a failure.

Meeting confirmed
OCT
16
Haircut with Sara
Thursday · 2:30 – 3:15 PM
S N Invite sent to Sara
Meeting cancelled
OCT
16
Haircut with Sara
Thursday · 2:30 – 3:15 PM
S Sara has been notified

Payment cards

Paid in full, deposit taken, and both failure states. Status is carried by icon and label, never by colour alone.

Payment received
$120.00
Paid in full · Visa ending 4242
Receipt #INV-2831 View receipt
Deposit received
$40.00
Deposit of 33% · $120.00 total
Balance $80.00 due at the appointment
Receipt #INV-2831 View receipt
Payment failed
$120.00
Card declined · Visa ending 4242
No charge was made
Deposit failed
$40.00
Insufficient funds · Visa ending 4242
No charge was made

Tabs

Full APG pattern: roving tabindex, Home and End, and arrow keys that follow the reading direction.

Tell me who and how long — I'll find the slot.
2:30 please

Form controls

Every control has a real label, an autocomplete hint, and an error tied to it by aria-describedby.

Prices include tax.

Enter an email address, like sara@example.com, so we can send the confirmation.

Thursday, 16 October

Focus ring

The same ring on cream, white, inset and green — the one fix the spec calls its priority.

Tab into the controls below to see the focus ring on each surface.

On cream
On white
On inset
On green

Avatars

Initials sit on the darker green so white text clears 4.5:1, and each one carries the attendee's name.

S N A

Motif

The only background graphic. One layer visible at a time — no blobs, no mesh gradients, no abstract shapes.

Calendar grid · 38px · green at 4.5% over cream Lines only · layered over a white surface

Motion

One calm language — nothing bouncy or attention-grabbing.

  • Entrances gentle fade-and-rise as elements enter on scroll — 16px, opacity 0 to 1, 0.5s ease-out, siblings staggered 60ms.
  • Agent demo the conversation replays line by line, and the finished transcript is already in the HTML.
  • Hover soft lifts — cards 2px, buttons 1px — with a slightly stronger shadow.
  • Timing 0.16 to 0.20s ease for state changes. Nothing bouncy, springy, or attention-grabbing.

FAQ

Native details and summary. No script, and the same data feeds the FAQPage schema.

How is Calendaty different from Calendly?

Calendly gives people a link to pick a slot. Calendaty adds an AI agent that answers questions, recommends the right service, and turns inquiries into booked, paid appointments — plus Arabic and local payments built in.

Can I switch from Calendly without losing my setup?

Yes. Import your event types, availability, and booking links in a few clicks. Your existing links keep working while you move over, so there is no downtime for your customers.

Do I need a developer to set it up?

No. Connect your calendar, tell the agent about your services and hours, and share your link. Most businesses are live the same afternoon.

How does the AI agent learn my business?

You give it your services, prices, staff, and policies once. It answers customer questions from that knowledge and only ever books what you have made available.

Which payment methods are supported?

Cards and deposits everywhere, plus local methods like Mada and installment options in supported regions — so customers pay the way they expect.

Does it work in Arabic and right-to-left?

Yes. Calendaty is fully bilingual with native Arabic and RTL layouts for both your booking page and the AI agent.