diff --git a/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee b/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee
index c613fb3061..0465a87e79 100644
--- a/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee
@@ -9,7 +9,15 @@ Darkswarm.directive "stripeElements", ($injector, StripeElements) ->
     if $injector.has('stripeObject')
       stripe = $injector.get('stripeObject')
 
-      card = stripe.elements().create('card', {hidePostalCode: false})
+      card = stripe.elements().create 'card',
+        hidePostalCode: false
+        style:
+          base:
+            fontFamily: "Roboto, Arial, sans-serif"
+            fontSize: '16px'
+            color: '#4c4c4c'
+            '::placeholder':
+              color: '#6c6c6c'
       card.mount('#card-element')
 
       # Elements validates user input as it is typed. To help your customers
diff --git a/app/assets/stylesheets/darkswarm/stripe-elements.css.scss b/app/assets/stylesheets/darkswarm/stripe-elements.css.scss
new file mode 100644
index 0000000000..1318aa9b81
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/stripe-elements.css.scss
@@ -0,0 +1,16 @@
+stripe-elements #card-element {
+  background: white;
+  box-sizing: border-box;
+  font-weight: 400;
+  padding: 0.8rem 0.5rem;
+  border: 1px solid #cccccc;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 0px;
+  color: #32315E;
+  outline: none;
+  height: 48px;
+  line-height: 48px;
+  cursor: text;
+  width: 100%;
+  float: right;
+}