Ashland Auction Group

Foundations

Color tokens

Core brand colors and reusable blue / gold / yellow scales for headings, callouts, and backgrounds.

Brand Blue

--brand · #203d85

Brand Blue (Dark)

--brand-dark · #162e66

Accent Gold

--accent-gold · #C9A326

Ashland Yellow

--yellow-100 · #eacb30

Accent Red

--accent · #af3e36

Gold scale (gold-10 → gold-100)

10

20

30

40

50

60

70

80

90

100

Yellow scale (yellow-10 → yellow-100)

10

20

30

40

50

60

70

80

90

100

Blue lightness ramp (blueL-10 → blueL-100)

10

20

30

40

50

60

70

80

90

100

/* Ashland Auction Group – core tokens (example as :root) */
:root {
  --brand:#203d85;
  --brand-dark:#162e66;
  --brand-light:#eef2fa;
  --accent:#af3e36;
  --accent-gold:#C9A326;

  /* Gold scale */
  --gold-100:#C9A326;
  --gold-90:rgba(201,163,38,0.9);
  --gold-80:rgba(201,163,38,0.8);
  --gold-70:rgba(201,163,38,0.7);
  --gold-60:rgba(201,163,38,0.6);
  --gold-50:rgba(201,163,38,0.5);
  --gold-40:rgba(201,163,38,0.4);
  --gold-30:rgba(201,163,38,0.3);
  --gold-20:rgba(201,163,38,0.2);
  --gold-10:rgba(201,163,38,0.1);

  /* Ashland Yellow opacity scale */
  --yellow-100:#eacb30;
  --yellow-90:rgba(234,203,48,0.9);
  --yellow-80:rgba(234,203,48,0.8);
  --yellow-70:rgba(234,203,48,0.7);
  --yellow-60:rgba(234,203,48,0.6);
  --yellow-50:rgba(234,203,48,0.5);
  --yellow-40:rgba(234,203,48,0.4);
  --yellow-30:rgba(234,203,48,0.3);
  --yellow-20:rgba(234,203,48,0.2);
  --yellow-10:rgba(234,203,48,0.1);

  /* Blue opacity */
  --blue-100:#203d85;
  --blue-90:rgba(32,61,133,0.9);
  --blue-80:rgba(32,61,133,0.8);
  --blue-70:rgba(32,61,133,0.7);
  --blue-60:rgba(32,61,133,0.6);
  --blue-50:rgba(32,61,133,0.5);
  --blue-40:rgba(32,61,133,0.4);
  --blue-30:rgba(32,61,133,0.3);
  --blue-20:rgba(32,61,133,0.2);
  --blue-10:rgba(32,61,133,0.1);

  /* Blue lightness ramp (swatch style) */
  --blueL-100:#203d85;
  --blueL-90:#264999;
  --blueL-80:#2d5dae;
  --blueL-70:#3471c3;
  --blueL-60:#6b8fce;
  --blueL-50:#91a9d8;
  --blueL-40:#b6c4e3;
  --blueL-30:#d6def0;
  --blueL-20:#e7ecf7;
  --blueL-10:#f3f6fb;
}

Typography

Article headings & body

Minimalist headings for blog posts and guides. Use Ashland blue for main sections, gold for subheadings, and dark gray for finer detail.

Use this pattern for blog posts, seller guides, and knowledge base articles that require clear section breaks and a scannable hierarchy.

Why We Built Auctions Around Sellers

The auction isn’t just a date on the calendar. It’s a structured timeline that gives sellers and agents clarity around marketing, bidding, and settlement.

The Ashland Difference

From first conversation to settlement, our team focuses on predictable milestones, transparent expectations, and proactive communication.

Where this shows up in content

Use headings like this in seller playbooks, agent FAQs, and longer educational pieces about reserve vs. absolute auctions.

How to Use This Style

When building new guides, keep your main sections as h2 and supporting details under each section as h3. Use h4 for fine-grain details or labels inside a section.

Heading rules

h2 – major sections (blue, 22px, bold).
h3 – subtopics (gold, 18px).
h4 – detail headings (dark gray, 15px).
No background blocks; spacing carries the hierarchy.

/* Minimalist article headings */
.article-body h2 {
  margin: 24px 0 8px;
  font-size: 22px;
  font-weight: 650;
  color: var(--brand-dark); /* Ashland blue */
  letter-spacing: -0.01em;
}

.article-body h3 {
  margin: 18px 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-gold); /* gold */
  letter-spacing: -0.01em;
}

.article-body h4 {
  margin: 16px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #374151; /* dark gray */
}

Media

Images & media blocks

Patterns for displaying property photos, diagrams, and screenshots inside a blog or knowledge article. Use standard, wide, two-up grids, or wrapped images depending on the story you’re telling.

Below are multiple patterns you can reuse: a standard centered image, a wide banner image, a two-up grid, plus left and right floated images that wrap text for more editorial layouts.

Example property photo — Main exterior view of the property used for hero imagery and social previews.

Auction timeline diagram — A simple visual explaining the auction timeline from listing to settlement.

Street view of the property — Street view highlighting access, parking, and nearby amenities.

Interior of the property — Interior view used to showcase layout and condition to bidders.

Wrapped images (left & right)

Use wrapped images when you want the text to feel more editorial, like a magazine column or a spotlight story about a specific property or neighborhood.

Rowhome exterior photo — Example of a left-aligned image with text wrapping around it.

In dense neighborhoods, a wrapped image can help anchor the story visually while still leaving plenty of room for context and detail. Use a left-aligned image when you want the eye to land on the photo first, then flow naturally into the text.

This works well for seller spotlights, neighborhood features, and walkthrough recaps where a single hero image should stay in view as the reader moves through a short section of copy.

Auction day crowd — Right-aligned image with copy giving context alongside it.

Right-aligned images are useful when the paragraph setup is more important than the image itself. Readers can start with the copy, then notice the image reinforcing the story.

Keep floated images relatively small so they don’t dominate the layout. On mobile, these automatically stack above the text with centered captions for readability.

HTML patterns

These blocks drop directly into .article-body. Replace the src and alt attributes with your real images.

<!-- Standard centered image with caption -->
<figure class="article-media article-media--standard">
  <img src="IMAGE_URL" alt="Short descriptive alt text">
  <figcaption>Short caption describing what bidders or readers should notice.</figcaption>
</figure>

<!-- Wide banner image (good for diagrams or hero visuals) -->
<figure class="article-media article-media--wide">
  <img src="IMAGE_URL" alt="Diagram or wide visual">
  <figcaption>Optional caption explaining the diagram or timeline.</figcaption>
</figure>

<!-- Two-up comparison grid (before/after, interior/exterior) -->
<div class="article-media-grid article-media-grid--two">
  <figure>
    <img src="IMAGE_URL_1" alt="First comparison image">
    <figcaption>Caption for the first image.</figcaption>
  </figure>
  <figure>
    <img src="IMAGE_URL_2" alt="Second comparison image">
    <figcaption>Caption for the second image.</figcaption>
  </figure>
</div>

<!-- Left-aligned wrapped image -->
<figure class="article-media article-media--float-left">
  <img src="IMAGE_URL" alt="Describe the photo">
  <figcaption>Caption for a left-aligned image with text wrapping.</figcaption>
</figure>

<p>
  Body text will wrap around the left-aligned image. Use this layout for more editorial,
  magazine-style sections of the blog or knowledge base.
</p>

<!-- Right-aligned wrapped image -->
<figure class="article-media article-media--float-right">
  <img src="IMAGE_URL" alt="Describe the photo">
  <figcaption>Caption for a right-aligned image with text wrapping.</figcaption>
</figure>

<p>
  When you float images to the right, the text leads first and the image reinforces the story.
  On mobile, these images stack above the copy for readability.</p>

/* Media blocks inside .article-body */
.article-media {
  margin: 18px auto;
}

.article-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 16px 40px rgba(15,23,42,0.12);
}

.article-media figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Standard centered image */
.article-media--standard {
  max-width: 720px;
}

/* Wide banner image */
.article-media--wide {
  margin: 20px -4px;
}
.article-media--wide img {
  border-radius: 14px;
}
.article-media--wide figcaption {
  font-size: 11px;
}

/* Two-up image grid */
.article-media-grid {
  margin: 18px auto;
  display: grid;
  gap: 12px;
}
.article-media-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-media-grid figure {
  margin: 0;
}
.article-media-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 30px rgba(15,23,42,0.10);
}
.article-media-grid figcaption {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Wrapped / floated images */
.article-body::after {
  content: "";
  display: block;
  clear: both;
}

.article-media--float-left,
.article-media--float-right {
  max-width: 280px;
  margin: 6px 16px 12px 0;
}

.article-media--float-left img,
.article-media--float-right img {
  box-shadow: 0 10px 30px rgba(15,23,42,0.15);
}

.article-media--float-left {
  float: left;
  margin-right: 16px;
  margin-left: 0;
}

.article-media--float-right {
  float: right;
  margin-left: 16px;
  margin-right: 0;
}

.article-media--float-left figcaption,
.article-media--float-right figcaption {
  text-align: left;
  font-size: 11px;
  margin-top: 4px;
}

/* Mobile: drop floats to full width */
@media (max-width: 700px) {
  .article-media-grid--two {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-media--wide {
    margin: 18px 0;
  }
  .article-media--float-left,
  .article-media--float-right {
    float: none;
    max-width: 100%;
    margin: 16px auto;
  }
  .article-media--float-left figcaption,
  .article-media--float-right figcaption {
    text-align: center;
  }
}

Components

Callout bubbles

Use callouts to highlight tips, warnings, and status messages. Each variant maps cleanly to a meaning: info, success, warning (yellow), caution (orange), error (red), neutral, and seller tip (gold).

Seller Tip

If your property needs significant work, an auction can surface serious buyers quickly without months of back-and-forth negotiations.

Informational

You stay in the loop. We copy you on key milestones—launch, auction date reminders, and post-auction updates.

Success

Your auction has closed and a winning bidder has been confirmed. Our team will guide you through settlement next.

Warning

Auction dates and terms are time-sensitive. Make sure access agreements and required disclosures are executed before marketing begins.

Caution

The property may require inspections or additional due diligence. Encourage bidders to review all documents before placing offers.

Error

Deposit instructions were not followed. Please contact our settlements team immediately to avoid cancellation or default.

Definition

A reserve auction means the seller has a minimum price in mind. An absolute auction means the property sells to the highest bidder, regardless of price.

HTML structure

Drop these blocks directly into a blog or KB article. Change the modifier class to swap the tone of the message.

<div class="callout callout--info">
  <div class="callout-label">Informational</div>
  <p>You stay in the loop on key milestones and updates.</p>
</div>

<div class="callout callout--success">
  <div class="callout-label">Success</div>
  <p>Your auction has closed with a confirmed winning bidder.</p>
</div>

<div class="callout callout--warning">
  <div class="callout-label">Warning</div>
  <p>Deadlines are approaching. Confirm all documents are complete.</p>
</div>

<div class="callout callout--caution">
  <div class="callout-label">Caution</div>
  <p>Encourage bidders to complete due diligence before placing offers.</p>
</div>

<div class="callout callout--error">
  <div class="callout-label">Error</div>
  <p>There was an issue processing the deposit. Contact our team.</p>
</div>

<div class="callout callout--gold">
  <div class="callout-label">Seller Tip</div>
  <p>Use the auction date as your decision deadline, not your starting point.</p>
</div>

/* Base callout */
.callout {
  position: relative;
  margin: 16px 0;
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  border: 1px solid #e4e7ec;
  background: #f9fafb;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
  font-size: 14px;
  color: var(--ink);
}

.callout-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  margin-bottom: 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Neutral */
.callout--neutral {
  border-left: 4px solid #9ca3af;
  background: #f9fafb;
}
.callout--neutral .callout-label {
  background: #e5e7eb;
  color: #374151;
}

/* Informational (Ashland blue) */
.callout--info {
  border-left: 4px solid var(--brand);
  background: var(--blue-10);
}
.callout--info .callout-label {
  background: var(--blue-20);
  color: var(--brand-dark);
}

/* Success (green) */
.callout--success {
  border-left: 4px solid #15803d;
  background: rgba(34,197,94,0.08);
}
.callout--success .callout-label {
  background: rgba(34,197,94,0.16);
  color: #166534;
}

/* Warning (Ashland Yellow) */
.callout--warning {
  border-left: 4px solid var(--yellow-100);
  background: var(--yellow-10);
}
.callout--warning .callout-label {
  background: var(--yellow-20);
  color: #7b5c07;
}

/* Caution (orange) */
.callout--caution {
  border-left: 4px solid #ea7a24;
  background: rgba(234,122,36,0.10);
}
.callout--caution .callout-label {
  background: rgba(234,122,36,0.18);
  color: #9a3412;
}

/* Error (red) */
.callout--error {
  border-left: 4px solid var(--accent);
  background: #fef2f2;
}
.callout--error .callout-label {
  background: rgba(248,113,113,0.16);
  color: #7a271a;
}

/* Seller Tip (gold) */
.callout--gold {
  border-left: 4px solid var(--accent-gold);
  background: var(--gold-10);
}
.callout--gold .callout-label {
  background: var(--gold-20);
  color: #8a6613;
}