Interactive design and UI/UX · Oxarus Studio

We design interfaces directly in code: real states, fluid transitions and a design system that grows with your product.

Breadcrumbs: Oxarus home <https://oxarus.com/en> › Oxarus Studio <https://oxarus.com/en/studio> › Interactive Design <https://oxarus.com/en/studio/design>

NOTICES

- Interface data marked as representative is illustrative; it is not a real client, result or measurement.

SECTIONS

- design, finished in code.
- touch it, feel it.
- one button, two feels.
- decide once, apply everywhere.
- make your product feel like this.

DESIGN, FINISHED IN CODE.

STUDIO · INTERACTIVE DESIGN

We build the interface as working components from the start, loading, error and success states included. Every press gets a visible response.

https://oxarus.com/en/studio/design

- Tell us about your project <https://oxarus.com/en/studio/design#cta-heading> → open_page(path="/studio/design", anchor="cta-heading")
- Try it yourself <https://oxarus.com/en/studio/design#play> → open_page(path="/studio/design", anchor="play")

- Design delivered as code
- Every state of every component
- A design system that grows with your product

1. Sketch
2. Code
3. Motion

Representative interface data · Illustrative editor and preview.

- file: CheckoutButton.tsx
- preview: Preview
- product: Wireless headphones
- price: ₺4,990

- idle: Complete payment
- loading: Processing
- success: Paid

- 24
- 16
- 48

- curve: SPRING_PRESS
- stiffness: stiffness
- damping: damping

- idle
- processing
- success

- Subtotal: ₺4,990
- Shipping: Free
- totalLabel: Total

- spacing: Spacing
- a11y: Accessibility
- motion: Motion

TOUCH IT, FEEL IT.

PLAYGROUND

The six pieces below actually work: hover, press, drag. Users usually notice that a product was made with care in moments this small.

https://oxarus.com/en/studio/design#play

- Magnetic button
  Get started
- Toggle
- Like
  Like

Drag to reorder

- Design review
- Client call
- Release notes
- Weekly report

- Slider · people

Representative interface data

- hover
- pressed
- focus
- active

Interface labels: Move your cursor closer · Click · Notifications on · Notifications off · Press the heart · Move the rows · Drag · Copy · Click · OXARUS-2026 · Copied · Your invite code

ONE BUTTON, TWO FEELS.

FEEL

Both scenes have the same add-to-cart button. On the left the motion is untuned, on the right it is tuned. Press the buttons, change the values and compare.

https://oxarus.com/en/studio/design#feel-heading

- flat: Untuned
- tuned: Tuned
- stiffness: Stiffness
- damping: Damping

Representative interface data

Added to cart

- body: Wireless headphones · ₺4,990

Snappy · Balanced · Bouncy · Gentle

- curve: Motion curve
- overshoot: Overshoot
- settle: Settle time

Appears in a single frame

Eases in and settles into place

- add: Add to cart
- frames: Frame by frame

Representative interface data

Wireless headphones

- price: ₺4,990

Interface labels: Play · Reset to default

DECIDE ONCE, APPLY EVERYWHERE.

DESIGN SYSTEM

Color, corner radius and density are each a variable. Change one and the whole product updates at once. Pick on the left, watch on the right.

https://oxarus.com/en/studio/design#system-heading

- accent: Accent color
- radius: Corners
- density: Density

- Sharp
- Soft
- Round

- Comfortable
- Compact

Representative interface data

Invite your team

- email: Email address
- placeholder: Your teammate's email
- role: Role

- Admin
- Member

- invite: Send invite
- badge: 3 seats left
- cancel: Cancel

Team members
- Deniz Arslan
  - role: Admin
- Mert Kaya
  - role: Member
- Ece Demir
  - role: Member

tokens.css

- Purple
- Sea green
- Terracotta
- Champagne
- Ink

Button states
- default
- hover
- pressed
- focus
- disabled

- changed: changed

Interface labels: Copy · Copied · Reset to default

MAKE YOUR PRODUCT FEEL LIKE THIS.

DESIGN

Tell us about your current interface or your new idea. We'll work out together where to start.

https://oxarus.com/en/studio/design#cta

- Tell us about your project <https://oxarus.com/en/contact?start=studio> → start_project_brief(topic="studio")
- info@oxarus.com <mailto:info@oxarus.com?subject=Interface%20design> → contact(subject="Interface design")

ACTIONS

- Tell us about your project <https://oxarus.com/en/studio/design#cta-heading> → open_page(path="/studio/design", anchor="cta-heading")
- Try it yourself <https://oxarus.com/en/studio/design#play> → open_page(path="/studio/design", anchor="play")
- Tell us about your project <https://oxarus.com/en/contact?start=studio> → start_project_brief(topic="studio")
- info@oxarus.com <mailto:info@oxarus.com?subject=Interface%20design> → contact(subject="Interface design")
- Türkçe <https://oxarus.com/tr/studio/design> → switch_locale(locale="tr", path="/studio/design")

RELATED PAGES

- Oxarus Studio <https://oxarus.com/en/studio>