Artiphon

ARTIPHON UI KIT

PRIMARY BUTTON

Notes

VARIANTS


SECONDARY BUTTONS

Notes

VARIANTS


Secondary Tier Banner

SECONDARY TIER

Notes

VARIANTS


Secondary Banner

TITLE

Notes

• Image + Text are fully responsive on all screensizes
• See the button HTML for comments/instructions on color, style, and text adjustments.

VARIANTS


Product Sections Grid

Orba

A synth, looper, and
controller that fits in the
palm of your hand.

INSTRUMENT 1

A MIDI controller that
adapts to the way
you play.

SCAN BAND

Turn everyday objects into musical ones with our Snapchat lens.

COMMUNITY

The latest uploads from our colorful community of creators.

Notes

VARIANTS


PRODUCT SECTION

PRODUCT Section

Lorem ipsum dolor sit amet.

EXPLORE

Notes

VARIANTS


Support Icons Section

Get Artiphon companion apps and ready-made templates for your favorite digital audio workstations.

Read our comprehensive manuals for Orba and INSTRUMENT 1.

Got questions? We've got answers. Reach out directly to the Artiphon Support Team.

I just might have a problem that you’ll understand. We’ve answered many frequently asked questions here.

We're here for you.
So are thousands of other players.

Begin a return or make a warranty claim.

Notes

VARIANTS

Notes


Primary Banner

Incoming

Notes

• Fully responsive on all screen sizes
• See the button HTML for comments/instructions on color, style, and text adjustments.

VARIANTS


Paragraph

A new Orba preset is here! 👾 "1981" is a blast from the past. If Orba were a time machine, and it only went to one very particular decade, it might sound something like this.

Notes

VARIANTS


Second/Third Tier Header

Notes

• Europa
• 100px
• H3
• All Caps
• Color: #3D3D3D

VARIANTS

PRIMARY HEADER


ARTIPHON
CORNFLOWER
#1DAFE7
ARTIPHON
SEAFOAM
#4BBA7D
ARTIPHON
MIDNIGHT
#193059
ARTIPHON
DARK GREY
#3D3D3D
ARTIPHON
CORAL
#ED7B67

Widget Margins

Widgets/Modules have 20px margin on all sides.

Notes


Primary Tier Banner (In Progress)

MEET ORBA

An instrument made
for your hands.

Notes

VARIANTS


MEDIA QUERY BREAKPOINTS TEMPLATE

Typical Breakpoints

Resize the browser window to see how the background color of this paragraph changes on different screen sizes.

Notes

VARIANTS


Gestures Demo

Notes

VARIANTS


Preserve an Image's Aspect Ratio When Resized

  Image Scaler 9000    
    
   

Notes

VARIANTS

Does Europa Work?

EUROPA?

EUROPA

EUROPA!

Notes

VARIANTS

Fade Demo

Notes

VARIANTS



Video Banner (Vimeo Embed)

See the Pen Video Banner w/ Text Overlay by Jeremy Bennett (@jjjeremy) on CodePen.

Notes

VARIANTS

Video Player (Custom YouTube Embed))

Notes

VARIANTS


Video Banner

ORBACAM

It's what plants crave

Notes

VARIANTS