Brand

Catalena Hatters has made felt hats by hand in Bryan, Texas since 1983. The site speaks in the shop's own voice: uppercase serif titles like a hat-box label, condensed sans for wayfinding, warm cream grounds and one gold that reads as a hat band. Photography of the workshop and the hats does the persuading.

Logo assets/logo.png

Primary mark at 96px in the header, 48px when sticky, 104px in the footer. The hat glyph sits on the section-title rule.

Principles

• By hand, one at a time. Nothing glossy. Square corners, hairline rules, honest photography, no gradients.
• Photography leads. Full-bleed workshop and product images carry the story; type sits on top in a translucent box or on cream.
• Serif titles, condensed utility. Old Standard TT in uppercase for anything that names a thing; Oswald for anything you click or scan.
• Gold is for action and price. Buttons, prices, hover states and the cart. Never for large fills or backgrounds.

Color

Warm neutrals from cream to ink, one gold accent in three strengths, and a small set of signals. Raw values are named after felt and paper; components only ever reference the semantic roles.

Neutrals

• White#ffffff--cat-whiteInner-page ground, cards, inputs
• Cream#f7f6f1--cat-creamHomepage ground, nav, callouts
• Parchment#efede6--cat-parchmentFooter, secondary bands
• Linen#e4e3dd--cat-linenActive tab rule, subtle fills
• Sand#dcd8ce--cat-sandHairline borders and rules
• Pebble#d8d7d3--cat-pebbleInput borders
• Stone#6f6a62--cat-stoneMuted text, AA-safe (replaces #96948f)
• Walnut#474138--cat-walnutBody copy, outline buttons
• Bark#3d3a36--cat-barkTop bar, nav text, footer text, overlays
• Ink#32312e--cat-inkHeadings

Accent and signals

• Gold#e3ab3d--cat-goldButtons, prices, links, cart, badges
• Gold dark#c69536--cat-gold-darkButton hover
• Gold deep#cd9a38--cat-gold-deepLink hover, current page, focus ring
• Gold text#8f6a1f--cat-gold-textSmall gold text when AA contrast is required
• Red#cc3a2b--cat-redSale price, errors, required marks
• Green#3f6b3a--cat-greenSuccess notices (added for redesign)

Felt colors

The eleven felt colors a customer chooses from on the product page. Swatches are approximations of the shop's samples and exist so option pickers, filters and guides can show color instead of a dropdown label.

• Black--felt-black
• Chocolate--felt-chocolate
• Dark Belly--felt-darkbelly
• Saddle Tan--felt-saddle-tan
• Dark Grey--felt-dark-grey
• Steel Grey--felt-steel-grey
• Medium Grey--felt-medium-grey
• Silvermist--felt-silvermist
• Silverbelly--felt-silverbelly
• Bone--felt-bone
• Natural--felt-natural

Contrast

Add data-contrast="aa" to the html element to switch link, price and button-label roles to the passing values without touching any component. The toggle in the Accessibility section does this live.

Typography

Three Google Fonts, each with one job. Old Standard TT is always uppercase when it names something and italic when it quotes someone. Lora carries paragraphs and prices. Oswald handles anything you scan or click, uppercase with a touch of tracking.

Scale

• Display--text-6xl · 52px · 1.0

  World-class quality

• Product title / banner--text-5xl · 42px · 1.25

  Silverbelly Cutter

• Quote--text-4xl · 28px · italic

  “Without a doubt, the best in the business.”

• H1--text-3xl · 24px · 1.25

  Custom felt hats

• H2 section title--text-2xl · 22px · 1.5

  Every style. Every fit.

• H3--text-xl · 20px

  10X, starts at $389

• H4--text-lg · 18px

  Related items

• H5 / H6--text-md · 16px

  Customer service

• Body--text-base · 15px · 1.6

  Silverbelly Cutter crease with a medium set brim. Shown with a matching two-cord ribbon. Use the options below to customize this hat to your liking.

• Small--text-sm · 13px

  Crown height 5 3/4" (standard). Brim length 4" (standard). Hat band: 2-cord ribbon.

• Nav / button--font-ui · 14px · +0.07em

  Custom felt hats   Rodeo King felt   Straw hats   Kids hats   Find your fit

• Label / top bar--font-ui · 12px · +0.07em

  Hat color*   Brim length*   833-430-HATS

Spacing

A 4px scale. The live theme mixes 10, 15, 20, 25, 30 and 40px; these snap to the nearest step. Sections breathe at 40px on phones and 64px on desktop, with a 96px option for the biggest bands.

Control sizes

Layout

A 1200px container with 20px gutters, matching the theme's 16-column skeleton at desktop, expressed here as a 12-column CSS grid. Photography sections break out to the viewport edge; content sections stay in the container.

Breakpoints

• sm · 480pxLarge phones
• md · 768pxTablets: two-up layouts, gutters widen to 20px
• lg · 960pxDesktop nav appears, four-up product grid
• xl · 1200pxContainer reaches full width
• 2xl · 1400pxWide container for photo-led pages

Grid

Buttons

Oswald, uppercase, 42px tall, square corners. Gold fill is the one primary action on a page. Outline buttons sit on cream and photography. The hover shifts the gold darker rather than adding a shadow.

<button class="c-button">Add to cart</button>
<a class="c-button c-button--outline" href="/collections/all">View all</a>
<a class="c-button c-button--outline-light" href="#">Quick shop</a>
<button class="c-button c-button--block c-button--lg">Add to cart</button>

Forms

Every custom hat is an eight-field form, so inputs matter. Labels are Oswald 12px uppercase; fields are 42px white boxes with a pebble border that darkens on focus. Required marks are red. Guide links sit under the field in bold Lora.

Header

Two rows. A bark-colored utility bar with social, phone, secondary links, account and a gold cart block. Below it the cream header: logo left, centered Oswald menu, search right. On scroll the header sticks and the logo shrinks to 48px; under 960px the menu collapses behind a toggle.

Top bar + header .c-topbar .c-header .c-nav

833-430-HATS

Contact Our story Gift cards Careers

Login 0

Hover the first menu item for the dropdown. Add .c-header--sticky for the scrolled state (shadow, 66px row, small logo). The toggle opens .c-mobile-menu below 960px.

Sticky state .c-header.c-header--sticky

2

Wayfinding

Breadcrumbs in Oswald with gold slashes, page titles underlined by a full-width hairline, and the centered section title with the hat glyph resting on its rule.

Commerce

The product card is the most repeated object on the site: square photo, uppercase serif name, gold price with an italic "from" when the quality grade changes the price. Hover darkens the photo and offers a quick shop.

Product grid .product-grid .c-product-card

Quick shop

Black Top Hand

from$389.00

Quick shop

Black All Around

from$389.00

Sale

Quick shop

Bone Gus

$339.00$389.00

Sold out

Bone LBJ

Sold out

Product page

Gallery left, summary right. The summary stacks vendor, a 42px title over a hairline, the price row with the guide link, description with a bold spec list, then the option form and a full-width add to cart.

Product summary .c-product-summary .c-spec-list

Catalena Hatters

Bone Gus

$389.00

Quality, color & size guide

Gus crease with a medium set brim. Shown with a braided horsehair band.

The picture shown is sporting these specs:

• Color: Bone
• Crown height: 5 3/4" (standard)
• Brim length: 4" (standard)
• Hat band: Horsehair

Use the options below to customize this hat to your liking.

Quality 10X, $38920X, $54950X, $749100X, $999

Add to cart

Lists & filters

Collection pages put a filter sidebar beside the product grid. Group titles are Oswald 16px; links are Lora with a 9px gold rail marking the active filter.

Sidebar + intro .with-sidebar .c-sidebar .c-collection-intro

Find the style you're after,
then customize it just for you.

Catalena Hatters has been recognized by industry professionals and hat connoisseurs as the best handmade custom felt hat in the world.

Gus

All Around

Top Hand

Page sections

The homepage is a stack of photo-led bands. Each one is a component that takes an image and a few lines of copy.

Promo tiles .c-promo-tiles .c-promo-tile

Custom felt hats

Quality custom hats that look right, feel right, and are shaped right for every customer.

Shop felt hats

Straw hats

The top hat brands in the world. We'll customize the fit and style for you.

Shop straw hats

Banner with caption .c-banner

We make our hats the old fashioned way

By hand.
One at a time.

Feature split .c-feature

World-class quality

Catalena Hatters has been recognized by industry professionals and hat connoisseurs as the best custom handmade felt hat in the world.

View all

Make your priceless hat like new again

Do you have a hat too sentimental to discard, but too stained or damaged to wear? We are one of only a handful of hat restoration professionals in the world.

Hat restoration

Testimonial band .c-testimonial

“Only place my husband will take or buy his hats. Two and a half hour drive each time, one way. But so worth it.”

Amy B.

Newsletter band .c-newsletter

Sign up to be a VIP

We'll send you the latest on sales, new releases and more…

Sign up

Story sections

Added for the redesign homepage (pages/redesign/home.html): the page is the making of one hat. A full-viewport hero, five chapters beside a sticky image stage on the dark ink ground, then a ruled "where do I start?" ledger. Chapter and path titles are sentences, so they stay in sentence case. Photography here is Higgsfield-generated and stands in for the shop's own.

Story hero .c-story-hero with lead-time chip .c-lead-time

By hand.One at a time.

Custom felt hats built to your head in our shop on Main Street in Bryan, Texas. Same family, same machines, since 1983.

Build your hatHelp me choose

Made to orderShips in about 8 weeks

Four felt qualities, from $389

On load the photo settles from a 1.06 scale and the lines rise in sequence (--duration-hero, --stagger). The page sets [data-settled] afterwards so scroll-driven transforms can take over. .c-lead-time--light for cream grounds. The lead-time value is a placeholder until the shop confirms it.

Chapters with sticky stage .c-chapters .c-chapter and tier list .c-tier-list

1. Body
2. Block
3. Crease
4. Trim
5. Yours

1. Step one of five. The body

   It starts as a soft cone of fur felt.

   No crown, no brim, no shape yet. The fur decides how the hat wears. We build four grades and we price every one of them plainly.

   • 10X$389100% rabbit. A good first real hat.
   • 20X$549Rabbit and beaver blend.
   • 50X$749Higher beaver blend. Silk lining.
   • 100X$999100% beaver. Lambskin sweatband.

One .c-chapters__frame per chapter; JS sets [data-active] on the frame and aria-current="step" on the index link for the chapter in view. Under 960px the stage is 52svh tall and the text scrolls beneath it. Swatches on this ground use .c-swatch-list--inverse.

Footer

Parchment ground with a sand rule on top. Logo, two link columns under uppercase serif headings, a short "reach out" note with social icons, then copyright and payment marks on the bottom rule.

Page anatomy

How the live pages are assembled, top to bottom, with the component that reproduces each band. Use these as the starting stack for research mockups and as the baseline to redesign against.

Accessibility

The audit found the brand gold failing text contrast wherever it carries small type. The system keeps the brand-faithful mapping by default so research pages match the live store, and offers a one-attribute switch for redesign pages.

Findings from the live site

• Gold text on white is 2.1 : 1. Prices, links, breadcrumbs and vendor names. Use --color-accent-text (#8f6a1f) or the AA mode.
• White on gold buttons is 2.1 : 1. Ink on gold is 6.2 : 1 and still reads as the brand. AA mode makes this switch.
• Muted grey #96948f is 3.0 : 1. Replaced by stone #6f6a62 in every token; the old value is kept only as --cat-ash for reference.
• Focus states were invisible. Base styles add a 2px gold-deep outline on :focus-visible for every interactive element.
• Top bar links are 12px with 40px rows. Rows already meet the 44px target on tap; keep the hit area, not the type size.
• Product cards link twice. The card component makes the title the single link and stretches it over the whole card.
• Motion. Hover overlays and image zooms respect prefers-reduced-motion and are disabled on touch devices.

Usage

Drop the entry stylesheet and the Google Fonts link into any page, then compose from the component classes. Nothing in the system depends on Shopify; the same CSS works in plain HTML, Liquid sections or a Next.js page.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Oswald:wght@300;400;500&family=Lora:ital,wght@0,400;0,700;1,400&display=swap">
<link rel="stylesheet" href="design-system/css/catalena.css">

<body class="page--cream">                 <!-- cream ground like the homepage -->
<html data-contrast="aa">                  <!-- optional: AA-safe gold text -->