Circle UI

Showcase

Product-facing surfaces composed from registry components — booking timelines, flows, navigation, and sticky actions, rendered in their target context.

Booking
booking-timeline

Appointment Journey

End-to-end booking timeline composed from the new Figma-matched primitives.

Open block
Before the title
Title
Some content below the title that we can generally fill with more info
Onboarding Flow
Treatment information
Contracts
On the day
Prepare for your appointment
Take note of the following in advance of your appointment
Important
  • The treatment cannot take place if you're sick
  • Avoid heavy meals from 2h before
  • If you are actively exercising, choose only moderate training on the day of the IHHT treatment
Wed 18th, 10:15AM
Arrive 15 minutes early
Our practice is accessible by car, bus or train. Learn more
SS41, S42, S45, S46
UU2, U3, U9, U12
BUS166, M43
52.5200, 13.4050

GiesebrechtstraBe 20,

10629 Berlin

Mi. 18., 10:30 Uhr
Dein Termin beginnt
Flow
flow

Onboarding Step

Question-step flow with head, options, and sticky actions.

Open block

Treatment selection

Choose your IV plan

Flow
top-bar

Top Navigation

Flow top bar surface for mobile-first task journeys.

Open block
CIRCLE
Upcoming appointment
Wed 18 Mar · Prenzlauer Berg
Intake
Directions
Flow
floating-flow-actions

Sticky Footer Actions

Pinned call-to-action surface for long form and booking flows.

Open block
Review intake details
Confirm practitioner
Choose appointment slot
Brand
media

Media Assets

Simple logo and press asset section with a featured brand mark and download framing.

Open block
Media kit
Logo assets

Simple brand asset section for press, product, and partner use.

A lightweight media surface with the core logo files, clear usage labels, and one hero asset that can be opened at full size.

Arc mark
Arc mark
App icon
SVG
Gold on stone
Gold on stone
Press kit
PNG
Mono mark
Mono mark
Favicon
SVG
Featured asset
Arc logo lockup
Arc logo
SVG master
Light + dark
Web ready