Echode: Establishing Connections

Design

One system for Echode and every city page. The layout geometry mirrors the HDN site, so the whole network feels like one family... the brand (logo, colors, aurora, pill nav) is Echode's own. If a value lives here, pages do not re-derive it.

Logo

Echode is ECHO + CODE... spreading waves through coding. The split O is the signal. The wordmark is custom and stays as drawn.

Primary, for light backgrounds

Reverse, for dark backgrounds

Clear space around the logo: at least the height of the O on all sides.
Minimum width on screen: 120px. The header uses it at 22px tall.
Do not recolor, stretch, outline, or rearrange the letters.
On a city page, the logo links to the Echode homepage and the city name beside it links to that city's home.
Slogan: Establishing Connections. Signal and connection language, never "voice."

Colors

Echode's palette. One rule does most of the work: blue means it is a link or a button. Labels that are not links use amber.

Light theme

Echode Blue#0a74b8Primary buttons, accents, hover states

Link Blue#075a8fText links and icon buttons

Blue Soft#e8f2f9Tint backgrounds, hover fills

Charcoal#2b2e32Headings

Ink#23272cBody text

Gray#5c6670Secondary text

Label Amber#8a5a00Non-link labels only: categories, dates, status

Line#e3e7ebBorders and hairlines

Soft Background#f7f9fbBanded sections

Dark theme — the same roles, remapped for dark surfaces. Label pills use amber on #3d2f10 with a #6b5518 border.

Echode Blue#3aa5ecPrimary buttons, accents, hover states

Link Blue#8ecbf7Text links and icon buttons

Blue Soft#16334aTint backgrounds, hover fills

Charcoal#eef4f9Headings

Ink#d9e5eeBody text

Gray#a9bdccSecondary text

Label Amber#f2c169Non-link labels only: categories, dates, status

Line#273845Borders and hairlines

Soft Background#101a23Banded sections

Typography

System font stack, no webfont downloads: fast on every connection and native on every phone.

H1Texas Deaf communities, city by city

H2Find Help

Card titleTexas School for the Deaf

BodyDirectory descriptions, guide text, and FAQs read at this size and tone.

EyebrowInterpreting Agencies

Components

Live specimens, drawn with the same CSS the city pages use.

Buttons

Primary button Ghost button Icon buttons are 42px circles with a 20px glyph. The card title carries the main link; icon buttons keep their own targets.

Directory card

Education & Career

Texas School for the Deaf

Cards sit on a 255px minimum grid with 1.4rem padding, a 16px radius, and a soft shadow. Hover lifts the card 3px.

Goal cards

Find help or a serviceThe three numbered cards under every city hero. Find eventsNumbered in amber, arrow bottom right, gradient bar on hover. Get listedSame geometry on every city page.

Accordion

Guides and FAQs use this accordion

Header padding 1.05rem by 1.25rem, a 26px circular plus icon that fills blue and flips to minus when open, panel padding 0 1.25rem 1.15rem.

Spacing and tokens

The numbers every page shares. These mirror HDN's stylesheet exactly.

ContainerMax width 1120px, centered, fluid on mobile.

Sections4.5rem vertical padding (3.4rem on mobile), hairline border on top.

CardsDirectory grid: auto-fill, minmax 255px, gap 1.1rem. Card padding 1.4rem, radius 16px (20px for goal cards).

ButtonsPrimary: 12px by 22px padding in the header, .8rem by 1.7rem in page bands. Icon buttons: 44px circles.

External links9px superscript arrow, opens in a new tab, screen reader note included.

Header and footerCopied from the Echode homepage exactly on every Echode page. City pages never restyle them.