Branding
Rooted in Community
The Urban Strategies identity brings together family, opportunity and neighborhood life. Warm colors, clear typography and people-first imagery give the website an approachable, consistent voice.
This guide records the current website choices and the design rationale behind them. It is a working reference for future pages, posts and campaign materials.
A Warm and Purposeful Palette
Brown anchors the identity, red identifies action, and ochre and gold carry the warmth of the logo. Cream and ivory keep image-heavy pages open and comfortable. Use the existing Core Framework color variables so the site stays consistent as it grows.
Deep Brown
#421900 · --base
The foundation for the footer, dark sections and photographic overlays. It connects the interface to the warm brown in the logo without the harder edge of pure black.
Action Red
#B62E16 · --action
Reserved for primary buttons and interactive emphasis. A consistent action color helps visitors find the next step, including services and contact options.
Ochre Accent
#97640C · --accent in light mode
The darker gold used for eyebrows and accents on light backgrounds. It retains the logo’s golden warmth while remaining distinct from cream surfaces.
Light Gold
#F2BA5A · --accent in dark mode
The brighter accent for dark brown backgrounds. Let the theme mode supply this value rather than overriding eyebrows with another color.
Warm Cream
#FAF6F0 · --bg-body
The main page background. Its slight warmth connects the site with the logo and family photography while keeping content visually calm.
Soft Ivory
#FFFDFA · --bg-surface
A lighter surface for the header, news column and elevated content. Its subtle difference from cream separates areas without heavy boxes.
Body Charcoal
#404040 · --text-body in light mode
The default paragraph color. It creates a clear reading hierarchy alongside brown headings. Dark sections use the lighter theme counterpart.
White
#FFFFFF · --light
A supporting neutral for light text and details on dark backgrounds. Use the theme’s text colors wherever they already apply.
Supporting Colors and Modes
Headings use brown in light sections and white in dark sections. Body text changes from #404040 to #BFBFBF in dark sections. Links follow action red in light mode and a lighter action tint in dark mode.
Light-mode borders use neutral gray at 25% opacity; shadows use black at 15% opacity. The framework retains green for success and red for errors. Those are interface feedback colors, not additional brand accents.
The logo’s brighter source gold, approximately #EDA423, remains a brand reference. Ochre and light gold adapt that family to contrasting website backgrounds. The existing framework provides supporting tints, shades and opacity variants.
Type That Feels Clear and Human
Geomanist
The display family gives headings a confident, open shape suited to a community organization. Its rounded forms complement the warmth of the logo, while the bold weight gives service and news headings a clear presence beside photography.
Use the existing display weight of 700. Headings, navigation and buttons follow the established display styling.
Strive to Empower
Roboto
The body family supports practical information such as program descriptions, addresses and news. Its straightforward letterforms balance the display type and keep longer copy easy to scan.
Use the existing body weight of 400, adding emphasis only where it adds meaning.
Promote, empower, enhance, motivate and contribute to the general well-being of the youth and families in our community.
Hierarchy and Editorial Style
Use one H1 for the page title, H2 for major sections and H3 for subsections. The fluid text scale runs from text-xs to text-4xl. Heading aliases map H1 through H6 to that scale, with fluid sizing between the 320px and 1400px framework bounds.
The configured maximum measures are 30ch for display text and 80ch for body copy. Keep buttons and eyebrows capitalized consistently, as in “Get to Know Us” and “Support at Every Stage.” Eyebrows remain accent-colored and inherit the appropriate theme mode.
Space Creates Clarity
A shared fluid scale keeps pages spacious on desktop and practical on smaller screens. Use semantic spacing variables rather than copying fixed padding or gap values into each section.
The Main Rhythm
- Default gap — gap references space-m, fluid from 2rem to 6rem.
- Section side padding — pad-sec-x references space-xl, from 2.88rem to 9.38rem.
- Section top and bottom padding — pad-sec-y references space-3xl, from 4.15rem to 14.65rem.
- Compact section padding — pad-sec-y-xs references space-xl for intentionally tighter areas.
These are fluid ranges, not fixed device measurements. The hero keeps the same vertical-padding token on mobile.
The Supporting Details
- Corner radius — radius references radius-s, fluid from 0.6rem to 0.8rem.
- Shadow — shadow references shadow-l, a soft 0 3px 12px treatment using shadow-primary.
- Transition — 0.3 seconds, ease-in-out, for existing interface transitions.
- Reading order — paired content images move above their text on mobile using CSS order.
Responsive Composition
The desktop header uses a 1fr auto 1fr grid to center navigation independently of the logo and Donate button. At the mobile-menu breakpoint it switches to flex, with the hamburger immediately before Donate on the right.
Content uses the shared container and grid system. Framework breakpoints are 1400px, 1200px, 992px, 768px and 480px. Layouts should adapt to content rather than depend on a single device width.
People at the Center
Choose warm, natural-looking images of families, children and adults that reflect the diversity of the communities Urban Strategies serves. Show shared experiences and everyday connection.
The desktop hero places the family to the right, leaving space for copy on the left. A separate portrait centers the family on mobile. A uniform 60% base-brown overlay keeps mobile text readable while allowing the photograph to remain visible behind it.
Keep logos proportional and give them clear space. Use the Inc. identity for the organization and the MGMT version for Urban Strategies Management. Keep primary actions red, eyebrows tied to the accent token, and supporting surfaces quietly warm.