Design shotgun

The demo banner

The dark grey notice shown on every page of demo.currencytransfer.com. Six directions below, all built from the app's own tokens in colors.scss and existing ct-btn classes, so any pick ships as a small, safe PR. Previews are faithful HTML mocks of the quotes page, scaled to fit.

Component: layout/components/demo-notice/ Styles today: $ct-body-grey (#555) + btn-success 10 Oct 2026

What's there today

Faithful recreation for reference.

Why it reads as aged

  • #555 appears nowhere else in the UI. $ct-body-grey is a text colour; as a fill it reads like a maintenance or outage bar, not part of the brand.
  • It's the heaviest element on the page, sitting above the form people came to try. The product is light, airy, blue; the banner is a dark slab.
  • Square, full-bleed, shadowless while the rest of the app speaks in white cards, hairlines and 5px radii.

And it costs more than looks

  • ~130px of height on every page, permanently. The slim options below give most of it back to the product.
  • Green GET STARTED fights green GET QUOTE directly below it. Same colour, same weight, two different intents.
  • Three lines of copy with an exclamation mark, re-shouted on every navigation, with no way to dismiss.

A Native tint

The lowest-risk fix: keep the exact copy and layout, re-skin it with the app's own highlight palette. It stops being a foreign object and becomes part of the product.

≈ 90px tall ( -30% )copy unchangedSCSS-only change

Why this direction

  • Uses the established "informational surface" colours: $ct-highlight-bg fill, $ct-highlight-background-alt hairline, navy text. Feels designed-in, not bolted-on.
  • CTA moves to btn-primary blue, so the page keeps one green action: GET QUOTE.
  • Smallest possible diff if you want to keep the wording exactly as marketing wrote it.

Build notes

  • demo-notice.component.scss: swap background, add border-bottom, colour the headings.
  • demo-notice.component.html: change btn-success to btn-primary; optional icon circle.
  • No TypeScript changes.
Copy: unchanged from production.

B Utility bar

Treat "you're in a demo" as an environment notice, not a marketing banner. One slim amber line, the pattern Stripe and most modern dashboards use for test mode.

48px tall ( -63% )copy tightenedtemplate + SCSSoptional dismiss shown

Why this direction

  • Demo users see this bar on every page. A quiet, persistent status line informs without nagging; the sign-up ask is still always visible, top right.
  • Amber ($ct-action family) is the app's attention colour and is instantly readable as "special mode", distinct from both blue chrome and green actions.
  • Frees the most vertical space of the six: GET QUOTE moves comfortably above the fold on a typical laptop.

Build notes

  • Tokens: $ct-action-lighter fill, $ct-action-border hairline, $ct-action edge, link in $ct-highlight.
  • Single-line flex template; link instead of button.
  • The ✕ is optional (hide for the session, two lines in the component TS). Shown here to gauge appetite; easy to drop.
Copy: Demo mode. You're exploring with sample data, no real money moves.  |  Ready for real transfers? Get started →

C Navy band

If the banner should stay high-contrast and promotional, do dark properly: the brand's navy, not neutral grey, with the action-yellow CTA that already means "act now" in CT's palette.

≈ 94px tall ( -28% )copy tightenedSCSS + copy edit

Why this direction

  • Keeps the strongest visual pull of all six, but swaps "dead grey" for $ct-dark → $ct-blue, the navy the sidebar logo and header already use. It finally looks intentional.
  • Yellow on navy is the highest-contrast CTA on this board (about 8:1) and can't be confused with GET QUOTE.
  • Good fit if the demo's job is conversion first, orientation second.

Build notes

  • Gradient of $ct-dark and $ct-blue; soft radial glow in $ct-highlight at low alpha.
  • CTA is $ct-action with navy text. The existing btn-action uses white text; this wants a small modifier for dark surfaces (white text on this yellow fails contrast).
  • Copy shortened to one headline + one line.
Copy: See how easy real transfers are. This is a demo account. When you're ready, register to activate your live account. · CTA: GET STARTED

D Inset card

Stop treating it as a system bar entirely. The notice becomes a white card inside the content flow, speaking the exact card language the rest of the app uses.

≈ 115px incl. spacing ( -12% )copy tightenedtemplate + SCSS

Why this direction

  • Sits in the app's 930px content container (the one the current banner's text already uses), so the page reads as one composition instead of bar + content.
  • Blue left accent is CT's existing "informational" cue; shadow and 8px radius match the app's cards.
  • Outline CTA (btn-primary btn-negative, an existing class) keeps the card calm and the page's single green action untouched.

Build notes

  • Wrapper padding + card: $ct-blue-grey-lighter border, $ct-highlight accent, tinted shadow.
  • CTA uses existing btn-primary btn-negative; label "OPEN LIVE ACCOUNT" also separates it from the sidebar's referral "Get Started".
  • Works well if other pages later need contextual notices: it's a reusable pattern.
Copy: You're exploring the demo. Everything works like the real thing, with sample data. Open your live account when you're ready. · CTA: OPEN LIVE ACCOUNT

E Hairline

The quietest option: a single centred line under the header with a small DEMO badge. For users who came to evaluate the product, not to be sold to on every screen.

44px tall ( -66% )copy tightenedtemplate + SCSSoptional dismiss shown

Why this direction

  • Maximum respect for the actual product: the demo UI is the pitch, the banner just labels the environment and offers the exit.
  • The DEMO badge gives a permanent, glanceable "where am I" marker even if the text is dismissed or ignored.
  • Pairs well with a stronger one-time conversion moment elsewhere (e.g. after a booked demo quote), if wanted later.

Build notes

  • White row, $ct-grey-highlight-style hairline ($ct-highlight-grey), badge in $ct-highlight-alt with darkened highlight text.
  • Smallest DOM of all variants; link-only CTA.
  • Honest trade-off: weakest conversion push of the six.
Copy: [DEMO] This is a demo account with sample data. Open your live account →

F Soft gradient

The most "2026" of the six: a light brand gradient with soft depth, confident copy, and the green CTA kept but modernised into a pill. Fresh without going dark.

≈ 98px tall ( -25% )copy tightenedSCSS + copy edit

Why this direction

  • Reads as a designed moment rather than a notice: gradient from white into $ct-highlight-background, soft brand-blue circles for depth.
  • Keeps green for the CTA (continuity with today and with the app's action colour), but the pill shape and shadow separate it from the flat form buttons.
  • Headline sells the outcome ("this easy") instead of explaining the mechanism.

Build notes

  • Gradient of $white → $ct-highlight-background; decorative circles in $ct-highlight / $ct-secondary-highlight at ~10% alpha.
  • Keeps btn-success colours; adds pill radius + tinted shadow for this banner only.
  • Note: this keeps two greens on the page (banner CTA + GET QUOTE), softened by the pill shape. If that bothers you, A/C/D solve it.
Copy: Real transfers, this easy. You've seen the demo. Open your live account and start transferring. · CTA: GET STARTED

All six, side by side

Banner strips only, at content width, for quick scanning.

0 Current · #555 slab
A Native tint · lowest risk, copy unchanged
B Utility bar · smallest footprint
C Navy band · keeps the contrast, on brand
D Inset card · app's card language
E Hairline · quietest
F Soft gradient · freshest