OXARUS :: INTERACTIVE DESIGN
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.
- page
- unit
Studio
- path
- markdown
Interface data marked as representative is illustrative; it is not a real client, result or measurement.
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.
- Design delivered as code
- Every state of every component
- A design system that grows with your product
- Sketch
- Code
- 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.
-
Magnetic button
Get started
-
Toggle
-
Like
Like
Drag to reorder
- Design review
- Client call
- Release notes
- Weekly report
-
Slider
REPRESENTATIVE INTERFACE DATA
- hover
- pressed
- focus
- active
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.
- flat
Untuned
- tuned
Tuned
- stiffness
Stiffness
- damping
Damping
REPRESENTATIVE INTERFACE DATA
Added to cart
- body
Wireless headphones · ₺4,990
- 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
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.
- accent
Accent color
- radius
Corners
- density
Density
- Sharp
- Soft
- Round
- Comfortable
- Compact
REPRESENTATIVE INTERFACE DATA
Invite your team
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
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.
ACTIONS
DOCUMENTS
- markdown
- llms.txt
- agents.md
Every page is also served as Markdown: add .md to the address or request it with Accept: text/markdown.