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


Video Banner

ORBACAM

It's what plants crave

Notes

VARIANTS


Embedded Product Mini Store

Sold out

Notes

VARIANTS


Paragraph

Artiphon sprang from a simple realization: digital music creation enables anyone to make any sound in the world, but most people don’t realize that yet.

Notes

Margin (desktop): max-width: 90%;

Margin (mobile): max-width: 95%;

HTML/CSS


<div id="textContent">
<p>Artiphon sprang from a simple realization: digital music creation enables anyone to make any sound in the world, but most people don’t realize that yet. </p>
</div>

<style>
#textContent {
max-width: 90%;
margin: auto;
text-align: center;
}

/*----------------------------------------------------------------------- Extra small devices (phones, 600px and down) -------------------------------------------------------------*/
@media only screen and (max-width: 600px) {}

/* -----------------------------------------------------------------Small devices (portrait tablets and large phones, 600px and up)------------------------------------------------ */
@media only screen and (min-width: 600px) {}

#textContent {
margin: auto;
}

/*----------------------------------------------------------------------- Medium devices (landscape tablets, 768px and up) ---------------------------------------------------------*/
@media only screen and (min-width: 768px) {}
}

/*------------------------------------------------------------------------ Large devices (laptops/desktops, 992px and up) ----------------------------------------------------------*/
@media only screen and (min-width: 992px) {
#textContent {
max-width: 95%;
margin: auto;
}

/* ------------------------------------------------------------------Extra large devices (large laptops and desktops, 1200px and up) ------------------------------------------------*/
@media only screen and (min-width: 1200px) {}
}
</style>

VARIANTS


Second/Third Tier Header

Header

Notes

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

HTML/CSS

<div id="tierThreeHeaderContainer">
<h3 id="tierThreeHeader" class="unmarked">DOWNLOADS</h3>
</div>


<style>

 

#tierThreeHeaderContainer{
display: flex;
justify-content: center;
margin: 0em 0em 0em 0em;
}

#tierThreeHeader {
text-align: center;
font-size: 65px;
transition: 300ms;
}

/*------------------------------------------------------------------------------------ BREAKPOINTS START ---------------------------------------------------------------------------*/

/*----------------------------------------------------------------------- Extra small devices (phones, 600px and down) -------------------------------------------------------------*/
@media only screen and (max-width: 641px) {
.marked {
border: solid blue;
}
}

/* -----------------------------------------------------------------Small devices (portrait tablets and large phones, 600px and up)------------------------------------------------ */
@media only screen and (min-width: 641px) {
.marked {
border: solid red;
}
#tierThreeHeader {
font-size: 80px;
}

#tierThreeHeaderContainer{
margin: 4em 0em 0em 0em;
}

}

/*----------------------------------------------------------------------- Medium devices (landscape tablets, 768px and up) ---------------------------------------------------------*/
@media only screen and (min-width: 768px) {
.marked {
border: solid yellow;
}

#tierThreeHeader {
font-size: 100px;
}



}

/*------------------------------------------------------------------------ Large devices (laptops/desktops, 992px and up) ----------------------------------------------------------*/
@media only screen and (min-width: 992px) {
.marked {
border: solid deeppink;
}

#tierThreeHeaderContainer{
margin: 4em 0em -3em 0em;
}
}

/* ------------------------------------------------------------------Extra large devices (large laptops and desktops, 1200px and up) ------------------------------------------------*/
@media only screen and (min-width: 1200px) {
.marked {
border: solid lime;
}
}

 


</style>

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


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------ BREAKPOINTS START ---------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------- Extra small devices (phones, 600px and down) -------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
.markIt {
border: solid blue;
}
}

/* -----------------------------------------------------------------Small devices (portrait tablets and large phones, 600px and up)------------------------------------------------ */
@media only screen and (min-width: 600px) {
.markIt {
border: solid red;
}
}

/*----------------------------------------------------------------------- Medium devices (landscape tablets, 768px and up) ---------------------------------------------------------*/
@media only screen and (min-width: 768px) {
.markIt {
border: solid yellow;
}
}

/*------------------------------------------------------------------------ Large devices (laptops/desktops, 992px and up) ----------------------------------------------------------*/
@media only screen and (min-width: 992px) {
.markIt {
border: solid deeppink;
}
}

/* ------------------------------------------------------------------Extra large devices (large laptops and desktops, 1200px and up) ------------------------------------------------*/
@media only screen and (min-width: 1200px) {
.markIt {
border: solid lime;
}
}

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