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>
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>
Modal
<div class="modal-overlay" id="demo-modal" hidden>...</div>