A calm neutral anchor.
The progress panel’s #1C1D20 background adds a neutral pause between blue and light sections.
Progress component · 60% example
Highlight #C2E9FF · Fill #193748New Urban Media / Design System
The system
behind every page.
One identity, with room for contrast. Sky blue, charcoal, blue-black, and light neutrals work together across every page.
Blue-black
Charcoal
Sky blue
Canvas
Part A
Brand foundations — identity tokens
00 — Foundations
Principles
This Color Lab tests a brighter sky blue, coordinated highlights, compact blue-tinted details, and charcoal panels. Blue-black and light neutral sections set the rhythm of the page.
01
Keep the blue familiar
Use #8ED2FF as the brand blue and #C2E9FF for highlighted icons and paths on dark surfaces.
02
Alternate light and depth
Introduce Canvas, Mist, and white cards between darker sections. A dark page can still have light areas.
03
Let surfaces do the work
Use blue-black for broad dark areas, with neutral charcoal on cards and inset panels. Keep the blue tint within small highlighted paths and icon details.
i
A working brand reference. Component examples below are demonstrations, not finalized services, pricing, or business policies.
01 — Brand
Brand & Logo
New Urban pairs the familiar icon on the left with bold geometric display lettering on the right.
Ink on Cloud — #E8E8E7
Reversed (white) — on dark & imagery
Clear space
Proposed clear space: at least half the icon’s width (½X) on every side of the full logo. Start at 32px wide for interface use and test at the intended size.
On imagery
Over images, use the reversed mark on a darkened area of the photo so contrast stays AA or better.
Do
- Use the supplied logo artwork and preserve its proportions.
- Reverse to white on dark backgrounds.
- Keep a sensible minimum width on screen.
- Preserve the original proportions.
Don't
- Add gradients, outlines, shadows, or other effects to the mark.
- Stretch, condense, or rotate the logotype.
- Place on a busy photo without a scrim.
- Reconstruct it from system fonts.
02 — Color
Color Palette
The experimental #8ED2FF sky blue anchors the palette. Near-black and charcoal backgrounds sit alongside the selected light neutrals. Blue tint is reserved for small details.
Core Brand
Acceptable Shades
Sky blue is the primary brand color. Lighter blue highlights work on dark surfaces; deeper blues make links readable on light surfaces. The dark range separates neutral charcoal from blue-black.
Blue range
Dark surfaces
Backgrounds & Neutrals
Status & Semantic
Utility colors that signal feedback — never decoration or brand expression. Each pairs a saturated base (icons, text, borders) with a soft tint (message backgrounds). Reserve for confirmations, errors, cautions, and informational notices.
Optional mint · #87C7A5
Keep as an occasional accent. Blue and neutrals carry the main identity.
03 — Type
Typography
Three families. The sans carries every heading, body, and UI label. The serif is reserved for display pull-quotes and italic emphasis only. The mono handles metadata, dates, and hex values.
Hanken Grotesk
Primary — UI & Headings
Weights 400 · 600 · 800. Headings ship at 800; body at 400; nav at 600.
Newsreader
Display — Pull-quotes
Weight 400 / 500, often italic. Pull-quotes and a phrase of emphasis inside a heading.
JetBrains Mono
Mono — Metadata
Weights 400 / 500. Dates, breadcrumbs, mono eyebrows, hex values, code.
H1
Hero
Built to scale.
H2
Section
A clear hierarchy
H3
Subhead
Supporting structure
H4
Card title
The smaller heading
Display
Pull-quote
A phrase that deserves to breathe.
Lede
Intro
A larger intro paragraph that sets the tone and invites the reader into the page.
Body
Paragraph
The default reading size. Generous line-height keeps long passages comfortable across the full content column.
Eyebrow
Label
Section Label
Meta
Mono
January 15, 2026 · 3 min read
04 — Editorial
Voice
How the brand sounds in words. The voice stays constant across the site; the vocabulary and depth flex to the reader. Replace the placeholder guidance with your own positioning.
Who we're speaking to
Map your real audiences here — each gets a sentence on what they need and how the tone adapts. These are placeholders.
New visitors
First-time arrivals. Clear, welcoming language; answer the obvious questions and set the tone fast.
Returning customers
People who already know you. Efficient and familiar — get them to the next action without re-explaining.
Evaluators
Comparing options. Precise, specific, honest about details; no hype, no vague claims.
Partners
Working alongside you. Collaborative and concrete about mutual value; invite, don't sell.
Members & supporters
Sustaining the work. Grateful and specific about impact; invite partnership, never guilt.
Community
Your local or topical base. Rooted and respectful; speak with them, not at them.
Voice principles
01
Clear & precise
Short sentences. Concrete nouns. Define terms a newcomer won't know. Clarity is a form of respect.
02
Confident, never loud
Let the facts carry weight; no hype, no clickbait, sparing exclamation marks.
03
Active & direct
Lead with the verb. Address the reader. Say what to do and why it matters.
04
Warm & human
Write the way a thoughtful person speaks. Plain words over jargon, always.
05
Inclusive
Center people, not abstractions. Write so every reader belongs in the story.
Say this, not that
On voice ✓
"Set up in two minutes. No card required."
"Here's exactly what's included — and what isn't."
"Plan your visit · 90 minutes, self-guided."
Off voice ✕
"The EASIEST setup you won't believe!!!"
"Endless powerful features for everyone."
"An unforgettable, must-see, bucket-list experience!"
For imagery and photographic direction, see 13 — Media & Imagery.
Part B · Handoff
From here, the brand becomes the interface.
Everything above defines identity. Everything below is the interface that carries it. When build-out begins, take the pieces in this order — layout first, because every other component sits inside it.
- 1 Layout & grid shell
- 2 Navigation: header & footer
- 3 Buttons & forms
- 4 Cards & surfaces
- 5 Media & imagery
- 6 Page patterns
- 7 Motion polish
05 — Structure
Layout & Grid
The spatial system — the first thing to build and the frame every page hangs on. Content lives in a centered column capped at the site width; backgrounds run full-bleed behind it.
Site Width
1440px
--maxw · max content width, centered
Every page centers its content in a 1440px column with fluid side gutters of clamp(1.25rem, 4vw, 3rem). Backgrounds — hero, pull-quote, footer — extend full-bleed; only the inner .container is constrained.
Containers
| .container | 1440px (--maxw) |
|---|---|
| .container--narrow | 760px · long-form text |
| Side padding | clamp(1.25rem,4vw,3rem) |
| Gutter / gap | 1.5rem (--gap) |
Column grid — .cols-2 / 3 / 4
Equal columns separated by a 1.5rem gap. .cols-3 / .cols-4 collapse to 2 at 900px and to 1 at 600px.
Responsive breakpoints
The desktop composition is designed at a 1440px base. Below that, the layout steps down through three device breakpoints. Each is a max-width ceiling — styles apply at that width and narrower. The column grids, the guide's own sidebar, the hero, cards, and the footer all reflow on these same three lines, so there is one set of rules to remember.
| Element | 1440 base | ≤ 1366 | ≤ 1024 | ≤ 767 |
|---|---|---|---|---|
| Content column | 1280, centered | Fluid, 4vw gutters | Fluid | Fluid, 1.25rem |
| Guide sidebar | Fixed 262 rail | Fixed rail | Docks to top | Docks to top |
| .cols-4 | 4 | 3 | 2 | 1 |
| .cols-3 | 3 | 3 | 2 | 1 |
| .cols-2 | 2 | 2 | 2 | 1 |
| Hero | Copy + logo split | Split | Split | Stacked |
| Tier / pricing | 3 | 3 | 2 | 1 |
| Footer | 4 columns | 4 columns | 2 columns | 1 column |
| Primary nav | Inline links | Inline | Inline | Hamburger |
i
Type and section padding scale fluidly with clamp(), so they ease between these breakpoints rather than jumping. The three max-width lines — 1366px, 1024px, 767px — are only for structural reflow (column counts, sidebar, nav).
Spacing scale
8pxMicro gaps, icon padding
16pxTight component padding
24pxStandard element spacing (--gap)
40pxCard / panel inner padding
64pxSection padding (mobile)
112pxSection padding (desktop)
Corner rounding
12px cards · 8px inputs/buttons/tags · pill for chips. Nothing ships with sharp corners.
| Vertical rhythm & surfaces | |
|---|---|
| Section Y | clamp(4rem, 8vw, 7rem) (--section-y) |
| Tight section | clamp(2.5rem, 5vw, 4rem) |
| Body BG | #F6F7F7 Canvas |
| Header | Sticky, blurred |
| Footer | Blue-black gradient, full-bleed |
Rules
Hairline · brand tick · engraved inset brand.
06 — Action
Buttons
Sky-blue primary actions, supporting blue buttons, and quiet outlined controls. Color follows the surface each control sits on.
On light — solid variants
.btn — Primary
.btn--secondary
.btn--tertiary — Accent
.btn--ghost — outline
.btn--outline-inset
.btn--soft-brand
.btn-text — inline
On dark — over the gradient backdrop
.btn--on-dark
.btn--secondary
.btn--tertiary
.btn--hero-outline
.btn--ghost-soft
.btn-text on dark
Sizes
| Variant | Role | Background | Label | Hover |
|---|---|---|---|---|
| .btn | Primary | Sky blue | Blue-black | Lighter sky |
| .btn--secondary | Secondary | Secondary | White | Deep |
| .btn--tertiary | Tertiary | Accent | Ink | Accent-deep |
| .btn--ghost | Quiet | transparent + ink ring | Ink | Ink fill |
| .btn--hero-outline | On photos | transparent + white ring | White | White fill |
| .btn-text | Inline link | none | Ink → Primary | arrow nudges |
| All buttons: 8px radius · Sans 800 · active scale 0.97 | ||||
07 — Labels
Tags & Badges
Small uppercase labels with a soft inset shadow. Use the colored variants to categorize content; the date chip overlays media.
Tag variants
Default
Primary
Secondary
Accent
Outline
Special
Date chip (over media)
15Jan
Event imageUsage
| .tag--brand | Status: new, featured |
|---|---|
| .tag--secondary | Category / type |
| .tag--accent | Audience: members, free |
| .tag--neutral | Campaign only — sparing |
| .datechip | Brand block, top-left of media |
08 — Input
Forms
Compact tinted fields pair Hanken Grotesk input text with IBM Plex Mono labels. Explore the main form and the expanded Gravity Forms field library below. Illustrative component content only.
Gravity Forms field library
Additional field treatments using familiar Gravity Forms structures. Interactive examples stay on this page. Provider controls are shown as labeled previews.
Standard fields & choices
Select multiple options with Command or Control. Masked text example: three letters, a hyphen, four digits.
HTML field / section content
Use formatted text, instructions, or a divider between related fields.
Hidden fields have no visible control.
Page break · progress and navigation
Step 1 of 2 · Your information
Advanced inputs & variants
Password strength: enter a sample password.
Name variants
Time · native Gravity Forms layout
Post fields
Presentation examples only; no WordPress posts are created.
Pricing & payment fields
Example prices only. No checkout or payment processing.
Total
Stripe Payment Element
Layout previewExplore card and US bank account layouts. Sample details only; no payment information is collected.
Read-only sample card details.
Pay with your bank account
Connect an eligible US bank account through Stripe’s secure bank selection flow.
On a live form, Stripe handles bank sign-in, instant verification, and the required ACH authorization. This preview does not connect to a bank.
Payment methods and wallet availability depend on the Stripe account, device, currency, and customer location.
Gravity Forms integration notes
Use the Stripe add-on’s Payment Element. Name and email come from the mapped Gravity Forms fields. Stripe owns the secure payment fields and bank authorization. Manual ACH account verification is not supported by this add-on.
Surveys, polls & quizzes
Requires the corresponding Gravity Forms add-on on a real form.
Survey · rank
- Clarity
- Speed
- Flexibility
| Statement | Disagree | Neutral | Agree |
|---|---|---|---|
| The form is clear | |||
| The layout feels consistent |
Specialty fields & integrations
Add-on availability depends on the installed license and configuration. Repeater remains a developer-configured beta field.
Chained selects
Draw with a mouse, pen, or touch.
Dropbox upload · add-on
Provider file chooser and connected-account controls use this field frame.
Pipe video recording · add-on
Recorder preview
Recording controls are provided by Pipe when connected.
Verification fields
CAPTCHA, reCAPTCHA Checkbox, and Turnstile use provider-controlled challenges. Keep their native branding, dimensions, and behavior within this form spacing.
Verification widget · provider preview
Field states & confirmation
Enter a complete email address.
Confirmation
Your example is complete.
The main form demonstrates required fields, focus states, linked error summaries, consent, and submission validation.
Reference: Gravity Forms field catalog · List field · Survey fields. These are styling specimens, not an installed Gravity Forms runtime.
| Input specs | |
|---|---|
| Background | #F6F7F7 + inset shadow |
| Border | 1px #BDC9D2 · 2px deep-blue focus ring |
| Focus | 2px visible ring, offset by 2px |
| Radius | 9px form fields |
| Required | Visible * + native required + inline errors |
| Submit | Validates locally; no submission or storage |
✓
Built for use with a keyboard. Persistent labels, grouped choices, visible focus, generous targets, and linked error messages work together. Checkboxes use the supplied Font Awesome check aligned with the first label line. See the form accessibility guidelines.
09 — Containers
Cards
Softly rounded corners (12px), full-bleed media at the top, and a footer rule that pins the action to the bottom. Two surfaces — Paper for standard content, Charcoal for featured. Illustrative component content only.
Image-free cards
A clear starting point
Give one idea a little room. An icon, a short heading, and a concise supporting paragraph make this card easy to scan. Use it when the whole message fits comfortably without an extra action.
Room for the whole story
Start with the details that help someone decide whether they want to know more. A short preview keeps the page easy to scan while the rest of the story stays close at hand. Open this card to see the complete description, including supporting context, practical examples, and the next steps that make the idea useful. The content expands in place so readers can keep their position on the page. When they are finished, they can close the card and return to the shorter view without losing their place.
Confidence in every detail
Good decisions begin with clear information. Bring the most useful facts forward, then make the supporting details available when someone needs them. This treatment gives an important idea more emphasis through a charcoal surface and a pale-blue icon. It can hold an explanation of a service, a process, or a commitment without overwhelming the surrounding page. Keep the language direct and specific, and use the expanded space to answer the questions a reader is most likely to have before moving on.
A different point of view
Small ideas can make a meaningful difference. Use this softer blue treatment to highlight a helpful insight, an optional service, or a related resource. The icon sits beside the heading to create a different rhythm while the description stays aligned below. Readers can open the full text when the topic interests them and close it again when they want to keep exploring. Add enough detail to make the explanation useful, with examples that connect the idea to a real need and a clear reason to care.
Image cards
Image placeholder
A standard content card
A short excerpt that previews the content and earns the click.
Explore →15Jan
Event imageA featured dark card
The charcoal surface lifts important content out of the page flow.
Learn more →Tinted placeholder
An article card
Use the mono meta line for dates and read-times above the title.
Read more →Tinted footer
Same card, with a full-bleed tinted footer band keyed to the card's accent. The tint replaces the top rule; the band breaks out of the body padding to the card edges and stays pinned to the bottom.
Image placeholder
A standard content card
A short excerpt that previews the content and earns the click.
Explore →15Jan
Event imageA featured dark card
The charcoal surface lifts important content out of the page flow.
Learn more →Tinted placeholder
An article card
Use the mono meta line for dates and read-times above the title.
Read more →Feature card — horizontal split
Wide image placeholder
A horizontal feature card
Pair a large image with a longer lead for the single most important item on a page — a headline story, a flagship product, a key announcement.
Supporting meta
View detail →
Text-only cards
A concise card
Drop the media block for a text-only card; everything else holds.
from $60
Get started →
A longer card
Within a row, cards stretch to match the tallest. This excerpt runs longer to show how the footer divider and CTA still line up with its neighbors regardless of copy length.
Book ahead
Plan →
A reference card
Keep a single action in the footer; lead with the meta eyebrow at the top.
By request
Request →
| Property | Value |
|---|---|
| Border radius | 12px (--radius) |
| Media | Full-bleed top, clipped by card radius |
| Light surface | #FFFFFF + 1px var(--line) |
| Dark surface | #16202A (Charcoal) |
| Footer | .card__foot — top rule, pins CTA to base |
| Hover | translateY(-4px) + soft shadow (links only) |
Notes
- Equal heights, aligned footers. Within a row, cards stretch to match the tallest, and each footer pins to the bottom with margin-top:auto — so dividers and CTAs line up regardless of copy length.
- Media is optional. Drop the .media block for a text-only card; everything else holds.
- One CTA per card. Keep a single action in the footer; lead with the .card__meta eyebrow at the top.
Pricing / tier cards
A fully-clickable .tier card for pricing levels. Per-card identity comes from two custom properties — --bar (top rule) and --accent2 (label + icon at rest). Hovering inverts the whole card to charcoal and flips the CTA to accent.
10 — Disclosure
Accordions & Tabs
A near-black section, with pale-blue icon accents for strong contrast. Accordions and tabs keep supporting content close without overwhelming the page.
Accordion — two-column FAQ (no icons)
A lighter FAQ without icon badges, laid out in two columns. Each column is its own independent group — rows open independently of one another.
Start free for 14 days with full access. No card required, and you can cancel any time before it ends.
Yes — upgrade or downgrade at any time. Changes are prorated to your billing cycle automatically.
If you're not satisfied within the first 30 days, contact support for a full refund — no questions asked.
Data is encrypted in transit and at rest, with regular backups and independent security audits.
Team and Business plans include unlimited seats with role-based permissions for every member.
Reach us by email any day, with priority response and a dedicated contact on Business plans.
Accordion — FAQ pattern (single-open, with icons)
Support is available Monday through Friday, 9 a.m. to 6 p.m. in your local time zone, with priority handling for urgent issues.
All major credit cards and bank transfer for annual plans. Invoicing is available for Business accounts.
Yes. This pattern supports keyboard operation, announces its state, and respects reduced-motion preferences. Validate it with real content and assistive technology before release.
Registered nonprofits and educational institutions receive a standing discount — contact sales to verify eligibility.
Tabs — underline
In-place panel switching — the active tab carries the secondary underline
- Fast setup · live in minutes
- Secure · encrypted by default
- Unlimited projects
- Team seats · role-based
- Global · data residency options
- Priority support
Tabs — segmented
Compact pill control — for two to four short, peer options
Pay month to month with no commitment. Cancel any time and keep access through the end of the period.
Save roughly two months by paying yearly. Best for teams settled on their workflow.
Custom terms, security review, and a dedicated contact. Talk to sales for a tailored quote.
| Pattern | When to use |
|---|---|
| Accordion | FAQs, details — many independent rows |
| Underline tabs | 3–6 peer views, longer labels with icons |
| Segmented tabs | 2–4 short options, compact inline switch |
| Active mark | Brand underline · charcoal pill fill |
| Motion | 0.3s grid / fade · honors reduced-motion |
✓
Accessible by construction. Accordion triggers are real <button>s with aria-expanded and aria-controls; tabs use role="tablist/tab/tabpanel" with roving tabindex and ←/→ · Home/End keys.
11 — Iconography
Icons
Sky blue is the first choice for meaningful icons on dark surfaces. Use the lighter #C2E9FF when stronger contrast helps; use deeper #286F9D on light backgrounds.
Size — set with font-size, scales like type
16px
20px
24px
32px
44px
Color — inherits currentColor
Sky blue
#8ED2FF
#8ED2FF
Pale blue
#C2E9FF
#C2E9FF
Deep blue
#286F9D
#286F9D
Light ink
#EDEDEE
#EDEDEE
Muted
#B9C1C7
#B9C1C7
Icon badges
Tinted containers — pair a glyph with a brand wash
In blurbs
Fast by default
A short supporting sentence that explains the benefit in plain language.
Secure
A short supporting sentence that explains the benefit in plain language.
Built to scale
A short supporting sentence that explains the benefit in plain language.
In lists — at a glance
- Hours · Mon–Fri · 9–6
- Location · 123 Example St
- Contact · via example form
- Call · (000) 000-0000
In lists — what's included
- Unlimited projects and seats
- Encrypted data and backups
- Priority support response
- Single sign-on (SSO)
Inline & in buttons
In buttons — a leading icon reinforces the action
Inline — an icon anchors a fact, in tags and in text
Live
Remote
Featured
123 Example Street
Icons on light surfaces
Deep blue carries functional icons. Sky and pale blue remain visible as secondary accents.
Deep blue
#286F9D
#286F9D
Sky blue
#8ED2FF
#8ED2FF
Pale blue
#C2E9FF
#C2E9FF
Ink
#0A131A
#0A131A
Muted
#5B666E
#5B666E
- Contact our team
- Included with your plan
Library — common icons
fa-house
fa-magnifying-glass
fa-clock
fa-location-dot
fa-calendar-day
fa-bolt
fa-shield-halved
fa-gear
fa-heart
fa-users
fa-universal-access
fa-envelope
fa-circle-info
fa-circle-check
fa-arrow-right
fa-share-nodes
| Icon specs | |
|---|---|
| Library | Font Awesome 7 · supplied Pro kit + local Classic Solid fallback |
| Default style | Classic Solid · currentColor |
| Use | Interface controls, lists, and feature badges |
| Size | font-size (px / em) — inherits |
| Color | currentColor — inherits text |
| Badge | 54px · --radius-sm · tinted wash |
!
Label what carries meaning. Decorative icons take aria-hidden="true" so screen readers skip them. An icon that stands alone as a control needs an accessible name — an adjacent text label, aria-label, or visually-hidden text. Never rely on color or shape alone.
Project resources
Supplied Font Awesome Pro 7 kit ·
b2a0aaaf3a. The snippet below loads the licensed kit. Domain access and icon styles are managed in the kit dashboard.
<script src="https://kit.fontawesome.com/b2a0aaaf3a.js" crossorigin="anonymous"></script>
Classic Solid icons are bundled locally so the examples remain readable if the external kit is unavailable. Pro Duotone depends on the kit’s permissions.
12 — Surfaces
A palette of surfaces
Mix backgrounds within one page. Blue-black anchors broad dark areas; neutral charcoal belongs on cards and inset panels. Light neutrals give information and swatches room to breathe. Keep blue-tinted fills to small details.
01 / OPENINGDepth, with restraint.
Blue-black gradient
Use for the opening or a single feature. The top-left blue lift and fine pinstripe stay subtle.
160° gradient · 45° pinstripe02 / SOLID BLUE-BLACKNearly black. Quietly blue.
Blue-black / #0A131A
A solid near-black section without a gradient. Use sky-blue details and light text for contrast.
Solid fill · no gradient03 / NEUTRAL DARKA neutral pause.
Charcoal / #1C1D20
Use for compact information, cards, and progress components. Near-black #141518 frames it.
Solid fill · no gradient04 / LIGHT CANVASRoom for content.
Canvas / #F6F7F7
A clean section background. White cards and deeper blue links add quiet contrast.
White cards · #FFFFFF05 / NEUTRAL CONTRASTGive colors space.
Mist / #EDEEEF
Use behind swatches, grouped cards, or the change between two content sections.
Neutral separation06 / INSETA softer boundary.
Cloud / #E8E8E7
A little more depth for inset blocks, quiet labels, and restrained media placeholders.
Pair with Frost · #FBFBFBi
Choose a surface per section.
Mix light and dark areas within the same page. Keep text and icon colors tied to the surface beneath them; gradients are optional, not the default.
Surfaces / Light surface
White cards. Neutral ground.
Frost, Canvas, Mist, and Cloud give light areas their own hierarchy. White is reserved for the cards above them.
Canvas · #F6F7F7WHITE · #FFFFFF
A clear surface.
A white card sits above the neutral page canvas.
Mist · #EDEEEFWHITE · #FFFFFF
A little more contrast.
Mist gives grouped cards a more distinct backdrop.
13 — Imagery
Media & Imagery
Placeholders are intentionally monochrome and labeled — swap them for real, rights-cleared photography before launch. Each carries a brand tick and a mono caption.
Placeholder treatments
Default
Charcoal
Mist
Light
Neutral
Primary
Secondary
Accent
Contrast
Aspect ratios
media--16x9
media--3x2
media--4x3
media--3x4
Result thumbnail — neutral tile + type badge
Page
Event
Document
The listing placeholder — a flat media--neutral tile (#E8E8E7 under fine hatching) with a frosted corner badge marking the content type. Used across search and archives; see 17 — Search & Results.
Also available: media--1x1, media--21x9. Real photography should feel consistent — pick one treatment (e.g. lightly desaturated, warm) and hold it across the site.
15 — Composition
Page Patterns
A single page can move from blue-black to light neutral, then return to blue-black, with charcoal on cards and inset panels. The same typography, logo, and blue accent connect each section.
01 / Blue-black opening
Begin with a clear point of view.
The signature gradient introduces depth. Sky blue gives the mark and key details a familiar accent.
02 / Light neutral content
Give ideas room to breathe.
A light section creates a change of pace and a clear ground for the content.
White card on Canvas
Use contrast, spacing, and type to separate one idea from the next.
Familiar blue details
/brand Path highlights connect back to the tracker.
03 / Solid blue-black close
Explore the brand guide →Return to the brand.
A solid near-black surface supports a concise message and one clear action.
Reference compositions below demonstrate layout and interaction. Offers and services are illustrative.
Section head — the 6px brand marker
Now Available
A brand left-border opens every major section.
Eyebrow, heading, optional supporting line — the consistent anchor for content blocks.
Pull-quote — display type on the dark gradient
"A short, quotable line that captures the brand's point of view."
Attribution
Glass aside — the split CTA
Start your free trial
Set up in minutes — no card required. Cancel any time.
Talk to our team
For larger teams and custom needs, we'll tailor a plan to fit.
| Pattern | Where | Notes |
|---|---|---|
| Photo hero | Home | Image + radial dark overlay, content bottom-left |
| Page hero | Interior | ~500px, breadcrumb top-left, title bottom |
| Feature strip | Home | Three icon blurbs in a light band |
| Pull-quote | Home | Inset rule + serif display, centered |
| CTA split | All | Two glass asides on dark |
16 — Motion
Motion
Motion is quiet and purposeful. Content fades up on scroll; buttons and links respond on hover. Everything honors prefers-reduced-motion.
Scroll reveal
.reveal
Opacity 0 → 1 with a 14px rise. Fires once on first view.
Easing
--ease-out
cubic-bezier(.23,1,.32,1). The house curve for hovers and transitions.
Duration
0.16–0.5s
Hover ~0.25s, press 0.16s, reveal 0.5s. No decorative loops.
Hover glow border — .lightbeam
A cursor-following beam of light runs the border of any rounded element on hover. Add .lightbeam to an element with border-radius:var(--radius); pointer tracking is wired automatically. Best on dark surfaces. Hover the cards below.
Glass Card
Hover to trace the beam.
The light follows your cursor and hugs the closest edge.
Reusable
One class, any container.
Drop it on CTA and feature cards across the site.
17 — Discovery
Search & Results
A search pattern with content filters, a view switch, and a results toolbar. Try it with the pages and logo in this brand library.
Search bar
Type filters
Results toolbar — count, view toggle, sort
Result rows
Design system
Color, typography, surfaces, layout, and component examples.
Brand guide
Logo color options, neutral surface studies, and identity guidance.
Brand profile
Established identity foundations and open positioning questions.
Brand voice
Proposed writing principles and language examples.
Guide map
The structure of this brand library.
Original logo SVG
The supplied New Urban Media mark.
Accessibility guide
Contrast, keyboard interaction, inclusive forms, media, responsive behavior, and the release checklist.
i
Result thumbnails share one neutral placeholder — a flat #E8E8E7 tile under fine diagonal hatching, added to the media system as media--neutral. It keeps long listings calm and lets titles lead; drop in a real <img> to replace it.
New Urban Media · Working design systemDownload color tokens
18 — Accessibility
Designed for more people.
Accessibility is part of every component and every surface. Use WCAG 2.2 Level AA as the baseline, then verify the experience with real content, keyboard navigation, and assistive technology.
Contrast that carries.
Use deep blue for text on light neutrals, and sky or pale blue on near-black. Text needs 4.5:1; large text and meaningful control boundaries need 3:1.
Clear in every state.
Keep labels visible. Show selection, focus, error, and success with words or shapes as well as color. Let people correct mistakes without starting over.
Works your way.
Use every action with a keyboard. Let layouts reflow at 320 CSS pixels, enlarge text, and respect reduced motion and forced colors.
Font Awesome kit
Paste into the <head> of any page or kit built from this template. It is already loaded here, so kit icons work throughout this guide.
<script src="https://kit.fontawesome.com/b2a0aaaf3a.js" crossorigin="anonymous"></script>