Beautiful country views

Room for everybody.

Business access to train lines.

Honoring community who served.

Plenty of parks and safe places for children.

Welcome to Bradner, Ohio

Pay Bill

Calendar

Documents

Report

Zoning

Food Truck

Latest Updates from Bradner

Stay informed with the latest news and updates in Bradner. This section features recent articles covering community events, city council updates, and more. Each article provides a brief overview, with dates to keep you on track. Be sure to check back regularly for important information that matters to you.

Events in Bradner

Upcoming Events

Check out our local events happening soon! This section will keep you updated with everything going on in Bradner, from community activities to festive gatherings. Stay engaged and be part of the fun!

Brush Pick-Up

May 6 @ 8:00 am - 5:00 pm

Town Hall

130 N Main St
Bradner, OH 43406 United States

+ Google Map

Report Issues

Need to report an issue? Let us know! Your feedback helps us keep Bradner running smoothly.

Job Opportunities

Looking for work? Check out the latest job openings in the community and apply today!

Court Information

Find important court dates and resources right here to stay informed about legal matters.

Get Involved!

Engage With Us and Enrich Our Community Together

Your Connection Hub

Find Us in the Heart of Bradner

We’re here to assist you with any inquiries or support you may need. Reach out via phone, email, or visit us directly!

Email Us

Have questions? Reach out!

Call Us

We're here to help you!

Our Office

123 Main St, Bradner, OH 43406

Stay Connected

Shu11y Style Guide v2 – Typography System

Shu11y Style Guide v2 – Typography System version 8.1

🎨 Colors

🖋️ Typography Scale

📝 Body Text

🎯 Utility Text

📦 Bundled Type Styles

🔘 Buttons

🧾 Form Inputs

🧭 Navigation

📏 Spacing & Radius

🧱 Containers / Clamp

🌫 Shadows

🎨 Colors

Brand Color System

All colors throughout the site reference these brand color tokens. Update them in the Token Manager to change your entire site’s color scheme.

Primary

--brand-primary

Secondary

--brand-secondary

Tertiary

--brand-tertiary

Quaternary

--brand-quaternary

Quinary

--brand-quinary

Senary

--brand-senary

Text Color Tokens

Primary Text

--color-text-primary

Main body content uses this color.

Secondary Text

--color-text-secondary

Supporting content and descriptions.

Tertiary Text

--color-text-tertiary

Captions and metadata.

Inverse Text

--color-text-inverse

Text on dark backgrounds.

Link Colors

This is a normal link using --color-text-link

This shows hover color using --color-text-link-hover

Links automatically use these tokens for normal and hover states.

Color Application Examples

Light Background Section

This section uses quaternary background with primary and secondary text colors for excellent readability.

Dark Background Section

Dark sections use inverse text color to maintain readability. Buttons use contrasting colors.

Accessible Color Combinations

All color token combinations are designed for WCAG AA compliance. Always test contrast ratios when customizing brand colors.

Primary on Quinary: Headers and buttons
Secondary on Quaternary: Body text on light backgrounds
Inverse on Primary/Secondary: Light text on dark backgrounds
Tertiary as accents: Highlights and interactive elements

🖋️ Typography Scale

Heading Sizes

Hero Text

--font-size-hero

Heading 1

--font-size-h1

Heading 2

--font-size-h2

Heading 3

--font-size-h3

Heading 4

--font-size-h4

Heading 5

--font-size-h5

Heading 6

--font-size-h6

📝 Body Text

Body Text Sizes

Large body text – Perfect for introductions and emphasis. Uses –font-size-body-lg with relaxed line height for comfortable reading.

--font-size-body-lg

Standard body text – This is your default paragraph text. Uses –font-size-body-md with normal line height. Most content should use this size.

--font-size-body-md

Small body text – Used for secondary information or compact layouts. Uses –font-size-body-sm.

--font-size-body-sm

Caption text – For image captions, footnotes, and fine print. Uses –font-size-caption.

--font-size-caption

TEXT BODY LG

.text-body-lg, .lead {
font: var(–type-body-lg);
letter-spacing: var(–text-body-lg-letter-spacing);
}

TEXT BODY MD

.text-body, .text-body-md {
font: var(–type-body-md);
letter-spacing: var(–text-body-letter-spacing);
}

TEXT BODY SM

.text-body-sm, .small-text {
font: var(–type-body-sm);
letter-spacing: var(–text-body-sm-letter-spacing);
}

Choose the Right Support Plan

font: var(--type-hero);

Don’t pay for what you don’t need, but don’t get caught without a safety net. Get just the right coverage for your business and your budget.

--font-size-body-md

You don’t need a bloated service contract. You need the right protections, the right response times, and a team that actually knows your name and understands your work. Our managed IT service packages scale with your business, whether you need the basics or full-stack support.

Each plan includes all the essentials, a response when you need it, and a real person to handle your questions and set things in motion.

--font-size-body-sm

🎯 Utility Text

Utility Text Styles

Callout Text – Grab attention!

.text-heading-md, .text-primary

LABEL TEXT

--text-label-* (uppercase)

Link Example with Medium Weight → --text-link-weight + --color-text-link

OVERLINE TEXT

--font-size-overline

TEXT HERO

.text-hero {
font: var(--type-hero);
letter-spacing: var(--text-hero-letter-spacing);
}

TEXT HEADING XL

.text-heading-xl {
font: var(--type-heading-xl);
letter-spacing: var(--text-h1-letter-spacing);
}

TEXT HEADING LG

.text-h2, .text-heading-lg { font: var(–type-heading-lg); letter-spacing: var(–text-h2-letter-spacing); }

TEXT HEADING MD

.text-h3, .text-heading-md { font: var(–type-heading-md); letter-spacing: var(–text-h3-letter-spacing); text-transform: var(–text-h3-transform); }

TEXT BODY LG

.text-body-lg, .lead { font: var(–type-body-lg); letter-spacing: var(–text-body-lg-letter-spacing); }

TEXT BODY MD

.text-body, .text-body-md { font: var(–type-body-md); letter-spacing: var(–text-body-letter-spacing); }

TEXT BODY SM

.text-body-sm, .small-text { font: var(–type-body-sm); letter-spacing: var(–text-body-sm-letter-spacing); }

📦 Bundled Type Styles

CSS Shorthand Type Styles

These bundled tokens combine font-size, weight, line-height, and family into a single shorthand property using the CSS font: syntax.

Hero Style

font: var(--type-hero);

Heading XL

font: var(--type-heading-xl);

Heading LG

font: var(--type-heading-lg);

Heading MD

font: var(--type-heading-md);

Large body text using bundled type style

font: var(--type-body-lg);

Standard body text using bundled type style

font: var(--type-body-md);

Callout text using bundled style

font: var(--type-callout);

OVERLINE STYLE

font: var(--type-overline);

Caption text using bundled style

font: var(--type-caption);

Usage Benefits

Concise: One property instead of four
Consistent: Ensures all typography properties stay in sync
Maintainable: Update the token, update everywhere
Fast: Quick to apply with single line of CSS

Example: .hero-text { font: var(--type-hero); }

🔘 Buttons

Button Token System

All button colors are controlled by design tokens in the Token Manager. Change tokens to update all buttons instantly.

Primary Buttons

Tokens Used:

--primary-btn • Background color
--primary-btn-text • Text color
--primary-btn-border • Border color
--primary-btn-hover • Hover background
--primary-btn-hover-text • Hover text color
--primary-btn-border-hover • Hover border
--primary-btn-active • Active background

Secondary Buttons

Tokens Used:

--secondary-btn • Background color
--secondary-btn-text • Text color
--secondary-btn-border • Border color
--secondary-btn-hover • Hover background
--secondary-btn-hover-text • Hover text color
--secondary-btn-border-hover • Hover border
--secondary-btn-active • Active background

Tertiary Buttons

Tokens Used:

--tertiary-btn • Background color
--tertiary-btn-text • Text color
--tertiary-btn-border • Border color
--tertiary-btn-hover • Hover background
--tertiary-btn-hover-text • Hover text color
--tertiary-btn-border-hover • Hover border
--tertiary-btn-active • Active background

Button Sizes

Real-World Example: Call-to-Action Section

Ready to Get Started?

Join thousands of satisfied customers using our platform

CSS Classes Available

.btn-primary         /* Primary solid button */
.btn-primary-outlined  /* Primary outlined button */
.btn-secondary       /* Secondary solid button */
.btn-secondary-outlined  /* Secondary outlined button */
.btn-tertiary        /* Tertiary outlined button */
.btn-sm             /* Small size */
.btn-lg             /* Large size */

🧾 Form Inputs

Form Input Tokens

Form elements use dedicated tokens for consistent styling across your site.

Text Input

Email Address

We’ll never share your email.

Select Dropdown

Choose a Plan

Textarea

Message

Checkbox & Radio

I agree to the terms and conditions

Email me

Call me

Form Tokens Reference

Input Tokens:

--input-font-size • Input text size
--input-font-weight • Input text weight
--input-font-family • Input font family
--input-line-height • Input line height
--input-padding-vertical • Top/bottom padding
--input-padding-horizontal • Left/right padding
--input-border-width • Border thickness
--input-border-style • Border style (solid, dashed, etc.)
--input-border-color • Border color
--input-radius • Corner rounding
--input-bg • Background color
--input-text • Text color

Label Tokens:

--label-font-size • Label text size
--label-font-weight • Label text weight
--label-font-family • Label font family
--label-letter-spacing • Label letter spacing

Real-World Example: Contact Form

Get In Touch

Fill out the form below and we’ll get back to you within 24 hours.

Name

Message

🧭 Navigation

Navigation Token System

Navigation tokens control link colors, hover states, and active page highlighting.

Navigation Links Example

“Services” link shows active state using --nav-active-color

Navigation Tokens

Normal State

--nav-color

Hover State

--nav-hover-color

Active/Current

--nav-active-color

Real-World Example: Header Navigation

Logo

CSS Usage

.nav-link {
  color: var(--nav-color);
  background: var(--nav-bg);
}

.nav-link:hover {
  color: var(--nav-hover-color);
  background: var(--nav-bg-hover);
}

.nav-link.current {
  color: var(--nav-active-color);
  background: var(--nav-bg-active);
}

📏 Spacing & Radius

Spacing Scale

XS
--spacing-xs

SM
--spacing-sm

MD
--spacing-md

LG
--spacing-lg

XL
--spacing-xl

Border Radius Examples

Small
--radius-sm

Medium
--radius-md

Large
--radius-lg

Padding Utility Classes

Visual examples of padding applied to elements:

All Sides Padding

.p-xs • padding: var(--spacing-xs);

.p-sm • padding: var(--spacing-sm);

.p-md • padding: var(--spacing-md);

.p-lg • padding: var(--spacing-lg);

.p-xl • padding: var(--spacing-xl);

Vertical Padding (Top & Bottom)

.py-xs • padding-top/bottom: var(--spacing-xs);

.py-md • padding-top/bottom: var(--spacing-md);

.py-xl • padding-top/bottom: var(--spacing-xl);

Horizontal Padding (Left & Right)

.px-xs

.px-md

.px-xl

padding-left/right: var(--spacing-*);

Margin Utilities

Margin Top

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

Margin Bottom

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

Real-World Example: Card Component

Card Title

This card uses spacing tokens for consistent padding and margins. The padding is --spacing-lg, title margin is --spacing-sm, and paragraph margin is --spacing-md.

Typography Spacing

Paragraph spacing uses --space-paragraph token for consistent vertical rhythm.

Each paragraph maintains the same spacing between them, creating visual harmony.

Headings Use Spacing Tokens

--space-heading-top and --space-heading-bottom control heading margins.

🧱 Containers / Clamp

🌫 Shadows

Bradner Events

Documents / Forms

Job Openings

History of Bradner

Businesses

Churches

Schools

Administration

Public Safety

Public Works

Welcome to Bradner, Ohio

Latest Updates from Bradner

Events in Bradner

Upcoming Events

Brush Pick-Up

Town Hall

Report Issues

Job Opportunities

Court Information

Get Involved!

Engage With Us and Enrich Our Community Together

Your Connection Hub

Find Us in the Heart of Bradner

Email Us

Call Us

Our Office

Stay Connected

Shu11y Style Guide v2 – Typography System

Brand Color System

Text Color Tokens

Link Colors

Color Application Examples

Light Background Section

Dark Background Section

Accessible Color Combinations

Heading Sizes

Hero Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Text Sizes

Choose the Right Support Plan

Utility Text Styles

CSS Shorthand Type Styles

Hero Style

Heading XL

Heading LG

Heading MD

Usage Benefits

Button Token System

Primary Buttons

Secondary Buttons

Tertiary Buttons

Button Sizes

Real-World Example: Call-to-Action Section

Ready to Get Started?

CSS Classes Available

Form Input Tokens

Text Input

Select Dropdown

Textarea

Checkbox & Radio

Form Tokens Reference

Input Tokens:

Label Tokens:

Real-World Example: Contact Form

Get In Touch

Navigation Token System

Navigation Links Example

Navigation Tokens

Real-World Example: Header Navigation

CSS Usage

Spacing Scale

Border Radius Examples

Padding Utility Classes

All Sides Padding

Vertical Padding (Top & Bottom)