Style Guide

This guide showcases the core styles and components powering the Daren Prince experience. Study them, remix them, and build boldly.

Color Tokens

--color-primary
--color-primary-hover
--color-bright
--color-mint
--color-lime
--color-charcoal
--color-muted
--color-black
--color-white
--gray-50
--gray-100
--gray-200
--gray-600
--gray-700
--gray-800
--gray-900
--color-surface
--color-icon
--color-border
--color-accent
--color-contrast-high
--color-success
--color-danger

New Gradients

--grad-lemon-lime
--grad-lemon-lime-stroke
--grad-charcoal-lime
--grad-charcoal-mint
--grad-booger-snow
--grad-cash-cloud
--grad-kelly-green
<div class="grad-lemon-lime"></div>

Typography

Heading 1

Styled Heading

Paragraph text demonstrates the base font stack.

<h1 class="styledh1">Styled Heading</h1>

Buttons

Gradient Buttons

Gray & Black Variations

Complimentary Combos

Bold Variants

<button class="btn btn--primary">Call to Action</button>

Utility Classes

Button Sizes

Containers

.grad-lemon-lime
.grad-lemon-lime-stroke
.grad-charcoal-lime
.grad-charcoal-mint
.grad-booger-snow
.grad-cash-cloud
.grad-kelly-green
.container--light
<div class="container grad-lemon-lime">...</div>

Icons

<i class="ti ti-home"></i>

Form Elements

<div class="form-group">
  <label>Label</label>
  <input type="text">
</div>

Card

Card Title

Card content rides here.

<div class="card">...</div>

Alerts

.alert.alert-success
.alert.alert-error
<div class="alert alert-success">Success</div>

Toggle

<label class="toggle">
  <input type="checkbox" checked>
  <span class="toggle-slider"></span>
</label>