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

Your move.
Select a format.

Paragraph text demonstrates the base font stack.

<h2 class="styledh1 brand-heading">
  <span class="brand-heading__emphasis">Your move.</span><br>
  <span class="brand-heading__base">Select a format.</span>
</h2>

Section patterns + kickers

Section kicker green

Section kicker white

Section kicker combo

Charcoal / lime text

Black / gray text

Featured section pattern

Full-width section with divider + dark charcoal gradient

This module demonstrates a no-container band with the section divider treatment, kicker, heading, and supporting text for hero-grade transitions. 

<section class="section-divider style-guide-full-bleed">...</section>

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

Phosphor Icons are the standard across Crown brands. Use the ph base class plus the icon name (e.g., ph-house) and keep icons aligned with dark-mode contrast. Reference docs/icon-system.md for the official icon map. 

<i class="ph ph-house"></i>

Form Elements

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

Card

Card Kicker

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>