0 0
US $

Colors

theme #181821
var(--myblack)
theme3/-c #46425e
var(--darkgrey)
theme4 #f9dbff
var(--pink)
theme5 #b8b3cc
var(--paleperi)
theme6 #bdabad
var(--tan)
theme7 #25a799
var(--teal)
theme8 #f54337
var(--fire)
theme9 #be91be
var(--mauve)
theme10 #1b8aac
var(--turqoise)
theme11 #ebf8ff
var(--barelyblue)
theme-custom #574f7d
var(--eggplant)
theme-custom2 #95adbe
var(--graysage)
theme-custom3 #f1d4d4
var(--putty)
theme-custom4 #dff0ea
var(--palesage)
theme-custom5 #d5bbc7
var(--pinkputty)
theme-primary #fef5ff
var(--paleviolet)
theme-head-c #000244
var(--darknavy)
theme-link-act-c #0b89d3
var(--brightblue)
theme-success #60a899
var(--brightsage)
colorAccent #e54747
var(--redaccent)
colorPrimary #847087
var(--graypink)
colorTertiary #7c0059
var(--fuscia)
colorQuat #a4a0b1
var(--grayputty)
var(--bluegrey): #536573
color-linky #47c2d6
var(--colorlinky)
#35909e
var(--colorlinkydarken)
var(--darkslate): #535166
np #f8f4f9
var(--np)
np2 #dde4ef
var(--np2)
#fbfaff
var(--inputbg)
npopacity rgba(250, 247, 251, 0.2)
var(--npopacity)

Gradients shown on bg-dark

lsgrad
lsgrad1
lsgrad2
whitefaderound2
gradwm
graddm
whitefaderound
whitefade
fadeitout
fadeitinout
fadeitin
fadetowhite
divgrad
grady
gradyflip
lsgradround
shown on bg-white:
limegrad
roseanna
keengrad
darkgradl
darkgradr
darkgrad

Typography

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Sirensong "S" using the ss.svg img file, displayed at various sizes,
including 200X240 100X120 50X60 33X40
S S S S
Sirensong "W" using the sw.svg img file, displayed at various sizes,
including 240X240 120X120 60X60 40X40
W W W W
Sirensong "S" using the svg snippet 'sirensong-S', displayed at a width of 33px
{ % render 'sirensong-S', width:33 % }

omewhere over the rainbow...
there's a land full of beloved pets.

Sirensong "W" using the svg snippet 'sirensong-w', displayed at a width of 33px
{ % render 'sirensong-w', width:33 % }

here over the rainbow...
there's a land full of beloved pets.

.edinb .fs-xl (font-size: 300%!important)

edinburgh edinburgh (700) | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00 \ 

.comfortaa7 .fs comfortaa COMFORTAA| AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-= 123456789.00

.mrsb .fs-xl mrsblackfort-pro MRS BLACKFORT | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00

.tornac .fs-lg2 {font-size: 2.2rem!important; letter-spacing: .01em!important} tornac TORNAC | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00

.poiret .fs-lg {font-size: 2.5rem!important; letter-spacing: .01em!important} poiret-one POIRET | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00

.lsbodyemph .lsbodyemph1 .lsbodyemph2 .lsbodyemph3 .bodyemph4 .bodyemph5 text-white .lsbodyemphy .quicklinks .gradicon fa2x .amp .lsh1 .lsh1b .lsh1m .lsh1t .lsh2 .lsh2b .lsbody .lsbodycw .smalltitle .fancy highlighted py-10" p class="asterisk" .lsbemph1bg

Buttons

Links

a class=""

a[class="link-unstyled"]

link-revert a

brightlink a

Default form elements

Invisible labels

Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

Notes and form errors
This is a standard note
This is a success message
This is an error message.

Paragraphs, font-sizing, etc...

p class="fs"

p class="fs-md"

p class="fs-lg"

p class="fs-lg2"

This uses class="m1" to make the first letter >>>mrsb. Appar­ently we had reach­ed a great height in the atmos­phere, for the sky was a dead black, and the stars had ceased to twinkle...

Here's class="firstcap" to make the first letter >>>font:300 150%/0.5 "Comfortaa". Appar­ently we had reach­ed a great height in the atmos­phere, for the sky was a dead black, and the stars had ceased to twinkle...

This uses class="t1" to make the first letter >>>tornac. Appar­ently we had reach­ed a great height in the atmos­phere, for the sky was a dead black, and the stars had ceased to twinkle...

this is p class="answer". ..Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle...

This one uses paragraph-sm Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle...

This paragraph uses class="fs-lg" Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle...

This paragraph uses class="ls-l text-justify" Our sleeveless wetties have deep-cut arm holes to prevent chafing, while our longsleeve suits are designed for maximum comfort when your arms are raised...

      	<p class="lsprettyitem">      		<span class="h3 lsprettyheadline">span h3 lsprettyheadline</span><br>      		p class="lsprettyitem" span Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>      	<p class="lsprettyitem">      		<span class="h3 lsprettyheadline">span h3 lsprettyheadline</span><br>      		p class="lsprettyitem"Veritatis, distinctio ad corporis, laboriosam unde provident, architecto tlaborum consequuntur neque.</p>

span h3 lsprettyheadline
p class="lsprettyitem" span Lorem ipsum dolor sit amet, consectetur adipisicing elit.

span h3 lsprettyheadline
p class="lsprettyitem"Veritatis, distinctio ad corporis, laboriosam unde provident, architecto tlaborum consequuntur neque.

h5 lsprettyitem2 pl-30" style="font-size: 26px;"

#rte paragraphs, lists

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpe

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

  • this ul is in an rte div
  • isn't it
  • pretty?

various styles and lists

  • this ul
  • is class:
  • list-unstyled
  • this ul is class: rte
  • isn't it
  • pretty?
  1. this ol
  2. is class:
  3. alpha
  1. this ol
  2. is class:
  3. numbr
  • this ul
  • is class:
  • asterisk

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.The author of the quote

More stuff...

<div class="gradient-block">
<div class="gradient-blocky">
<div class="neu">
<div class="neu2">
<div class="neu3">
<div class="waterheart">
<div class="seethis"> (note that it has it's own centered positioning built-in)
.mcard
.mround 
div class="wave-ocean" (with 3 svg waves...)

Here is a 200px high div class="ripped". (It's only fancy once screen gets large.)

div class="wborder"
 
div class="seascape" div class="seamask"
 
div class="fillerbg"
 
div class="water-animated" div class="watermask"

Neumorphic css!

<div class="neu pseudo-hover">
class="np-element np-hover np-circle-xxl np-shadow-border-circle-push mb-3 mr-3 softsqueeze"

Basic Element

Integrates an element with base neumorphism design
np-element

Trying out the .np-text-shadow class here on default text and #d1b5b5 bg

Trying out the np-d-text-shadow on dark bg with white text

Shadows

Integrates an element with diferent shadows 
    Example:    <div class="np-element np-hover np-square-xxl np-shadow-double"></div>    <div class="np-element np-hover np-square-xxl np-shadow"></div>    <div class="np-element np-hover-inverse np-square-xxl np-shadow-inverse"></div>    <div class="np-element np-hover np-square-xxl np-shadow-border-square"></div>    <div class="np-element np-hover np-square-xxl np-shadow-border-square-push"></div>    <div class="np-element np-hover np-circle-xxl np-shadow-border-circle"></div>    <div class="np-element np-hover np-circle-xxl np-shadow-border-circle-push"></div>

Lists

  • List element
  • List element
  • List element
  • List element
  • List element
    	Example:    	<ul class="np-list">    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    	</ul>

Hovers

Integrates an hover neumorphism shadow effect

Hover
    	Example:    	<div class="np-element np-hover"></div>
Hover inverse

Integrates an inverse hover neumorphism shadow effect

Hover inverse
    	Example:    	<div class="np-element np-shadow-inverse np-hover-inverse"></div>

Buttons

    	Example:    	<button class="np-btn">+</button>    	<button class="np-btn np-square-sm">+</button>    	<button class="np-btn np-circle-sm">+</button>

Dividers

    	Example:    	<div class="np-divider"></div>    	<div class="np-divider-fat"></div>

Shapes

Squares
Circles
    	Example:    	Sizes: sm - md - lg - xl - xxl    	<button class="np-element np-hover np-square-$size"></button>    	<button class="np-element np-hover np-circle-$size"></button>

Forms

      <form class="np-form-group py-15 mb-15">    			<label class="np-text-accent" for="np-form-element1">Label for np-form-group > np-form-element input</label>    			<input id="np-form-element1" type="text" class="np-form-element" value="Value" placeholder="Placeholder">    		    			<label for="np-option-select">Label</label>    			<select name="np-option-select" id="np-option-select" class="np-form-element">    				<option value="1">Value</option>    				<option value="1">Value</option>    				<option value="1">Value</option>    				<option value="1">Value</option>    				<option value="1">Value</option>    			</select>    		</form>

What can we help you find?

View all products

Search for "{{ result }}"

MY CART

SUBTOTAL

00
PROCEED TO CHECKOUTVIEW CART PAGE
Your shopping cart is empty.
MY WISHLIST
VIEW WISHLIST
Your wishlist is empty.
Size Guide
XXS
XS
S
S+
M
M+
L
XL
XXL
Bust Waist Hip Vertical Inseam Shoulder
64 − 70 55 − 71 65 − 77 125 − 142 30 − 34 65 − 75
68 − 79 56 − 72 70 − 85 133 − 157 30 − 36 68 − 82
74 − 89 62 − 80 74 − 91 138 − 167 32 − 39 71 − 87
76 − 88 63 − 80 75 − 90 149 − 174 34 − 40 71 − 86
81 − 97 67 − 85 80 − 99 141 − 172 32 − 40 71 − 88
80 − 104 66 − 86 78 − 101 156 − 204 36 − 48 71 − 93
88 − 105 71 − 91 85 − 104 152 − 183 37 − 46 78 − 96
94 − 123 74 − 96 91 − 118 160 − 209 39 − 52 76 − 99
97 − 127 81 − 106 99 − 129 171 − 223 42 − 55 83 − 108

Notes:  The ranges above are averaged across multiple collections with slightly different fits. Collection-specific size charts are provided on product pages.

?

Scroll down for additional information about key measurement points...

1
2
3
4
4
5
6

1) BUST (circumference): Measure around the body, over the bust.

2) WAIST (circumference): Measure around the body, at the narrowest part of your torso.

3) HIP (circumference): Measure around the body, at the upper hip bone area.

4) VERTICAL (front-to-back): (B→ C→ D→ B)
Beginning at the top of your shoulder near the side of your neck (Point B), measure on a diagonal line down your torso, between your legs, and up your back to where you started (Point B).

5) INSEAM (front-to-back): (C→ D)
Measure from the top of your bikini line, (Point C), between your legs, and back up to the top of your booty near your tail-bone (Point D).

6) SHOULDERS (circumference): (A ↔ A) *note the distinction between points A & B With elbows at your side, measure around the body at the top of your shoulders (Point A).

?

Hover/tap over numbers on the diagram below for additional instruction...

1)  Bust
2) Waist
3) Hip
4) Vertical
5) Inseam
6) Shoulders

1

BUST (circumference): Measure around the body, over the bust.

2

WAIST (circumference): Measure around the body, at the narrowest part of your torso.

3

HIP (circumference): Measure around the body, at the upper hip bone area.

4

VERTICAL (front-to-back): (B→ C→ D→ B)
Beginning at the top of your shoulder near the side of your neck (Point B), measure on a diagonal line down your torso, between your legs, and up your back to where you started (Point B).

4

VERTICAL (front-to-back): (B→ C→ D→ B)
Beginning at the top of your shoulder near the side of your neck (Point B), measure on a diagonal line down your torso, between your legs, and up your back to where you started (Point B).

5

INSEAM (front-to-back): (C→ D)
Measure from the top of your bikini line, (Point C), between your legs, and back up to the top of your booty near your tail-bone (Point D).

6

SHOULDERS (circumference): (A ↔ A) *note the distinction between points A & B With elbows at your side, measure around the body at the top of your shoulders (Point A).

Order Flow

Prior to shipping, each wetsuit goes through a hands-on finishing process, followed by a thorough quality-control inspection. Orders are generally shipped from our home-base in Hawaii, within 1-2 business days.

  • Grab-Bags and other orders containing hats may take an extra day or two, as the hats are generally not finished in advance of ordering.
  • Occasionally, during high volume sales periods/sale events, it may take longer than 1-2 days to get your order out. If you have a shipping deadline we should be mindful of (e.g., leaving for a trip, a birthday, etc.) – please let us know in your order comments or by email, and we will do our best to make sure your package arrives on time.

Once your order is packed-up and ready to ship, you will receive an email containing package tracking details.

  • Because we create shipping labels online, your shipping notification email may arrive before tracking details are updated online by the shipping company (USPS, DHL, etc.) – but not to worry...updates should appear soon!

Choose from our discounted flat-rates (generally USPS Priority Mail) to save money, or pick a courier service (FedEx/DHL) for more time-sensitive service. Shipping rates are listed below:

Shipping Rates...

  • Kama'aina (all Hawaiian islands) — $6
    Once received by USPS, delivery ranges from overnight (Oahu) up to 2 business days for outer islands.
  • Overnight Express (Hawaiian islands) — $22
    While generally unnecessary on Oahu, outer-island customers requiring overnight service should choose this option. ( If you are on Oahu and require overnight service, choose this option if overnight is a MUST.)
  • Standard Domestic (Mainland, Alaska, Puerto Rico, Guam, US Virgin Islands, and APO) — $12
    This service generally takes 3–5 days, but occasionally longer, as routing overseas from Hawaii often adds extra time.
  • 2-day Express (Mainland, Alaska, Puerto Rico, Guam, US Virgin Islands, and APO) — $40
    Please note that so-called 'overnight' service from Hawaii is virtually non-existent and generally takes 2-days.
  • Standard International flat-rate shipping — $24
    Service generally takes 7–15 business days. Expect a slower Customs processing time when choosing this option.
  • International Express flat-rate shipping — $24
    Service generally takes 4–10 business days. Again, expect a slower Customs processing time when choosing this option.
  • Expedited International Express (FedEx, UPS, DHL) — Rates Vary
    This is the fastest and most reliable option with the quickest Customs processing time. Rates vary depending on location and courier service.

International Taxes & Tariffs

flags

Please be advised that you may be responsible for import taxes/tariffs, which are assessed-by and payable-to your home country's Customs agency.

  • As soon as it's available, a pdf copy of the shipping label and associated customs documentation will be available for download via a link provided on your order status page. (Please refer to your order confirmation email for the link to your order status page.)
  • Customs processing time can add unpredictability to the expected delivery date for international shipments.

Drop Us A Line

We’re happy to answer any questions you have or provide you with an estimate. Just send us a message in the form below with any questions you may have.

Thanks for contacting us. We'll get back to you as soon as possible.

Continue shopping