The demo banner
The dark grey notice shown on every page of demo.currencytransfer.com. Update 12 Oct: Phil's Figma direction is now rebuilt in context as P below, with exact values pulled from the Figma node. That's the PR candidate; say the word and it ships. The earlier exploration (A to F) stays underneath for reference.
What's there today
Faithful recreation for reference.
Why it reads as aged
- #555 appears nowhere else in the UI.
$ct-body-greyis 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.
P Phil's Figma
The suggested direction from the TEMPLATES file, rebuilt in the live page context with values read straight from the Figma node: colours, spacing, radii, type sizes and the exported icon. This is what the PR would ship.
Figma reference, rendered from node 4633-5266
Wording options
Same box, five scripts. The original explains the demo to someone already inside it; the rewrites talk to what the visitor is silently asking: "is this what the real thing is like, and can I poke it?" All fit on one line.
Try it first
This demo shows how transfers work. Register to activate your account.
Try it first
Everything here is real except the money. Go live when you're ready.
See for yourself
Book a demo transfer. Your live account works exactly like this.
Welcome to your demo
Explore freely. When you're ready, we'll take you live.
Demo mode
Everything works, nothing settles. Open your live account anytime.
CTA is a separate choice: GET STARTED (Phil's, but it duplicates the sidebar referral button's label) vs GO LIVE or OPEN LIVE ACCOUNT, which name the outcome. Any pairing of script and CTA works.
Exact values used
- Band
#0f1f3d(Figmacolour/brand/1000), padding 24px / 32px; card max-width 870px, centred. - Card
#083c51(colour/primary/800), 12px radius, 2px border#1595ca, icon cell solid#1595cawith the exported 32px icon. - Title "Try it first" Lato Bold 16px in
#1595ca; body Lato 14px white; button Lato Bold 18px uppercase,#1595ca, 4px radius, 13px / 30px padding.
PR notes
#1595caalready exists as$ct-highlight-alt-dark; the two navies are new tokens to add tocolors.scss(named after the Figma vars).- Template restructure in
demo-notice.component.html(icon cell + text + button) with the icon SVG inlined; SCSS rewritten; no TypeScript changes. - Figma covers desktop only. Proposal for small screens: band padding drops to 16px and the card stacks (icon + text, button full-width below). Shout if you want something else.
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.
Why this direction
- Uses the established "informational surface" colours:
$ct-highlight-bgfill,$ct-highlight-background-althairline, navy text. Feels designed-in, not bolted-on. - CTA moves to
btn-primaryblue, 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: changebtn-successtobtn-primary; optional icon circle.- No TypeScript changes.
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.
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-actionfamily) 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-lighterfill,$ct-action-borderhairline,$ct-actionedge, 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.
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.
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-darkand$ct-blue; soft radial glow in$ct-highlightat low alpha. - CTA is
$ct-actionwith navy text. The existingbtn-actionuses white text; this wants a small modifier for dark surfaces (white text on this yellow fails contrast). - Copy shortened to one headline + one line.
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.
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-lighterborder,$ct-highlightaccent, 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.
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.
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-altwith darkened highlight text. - Smallest DOM of all variants; link-only CTA.
- Honest trade-off: weakest conversion push of the six.
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.
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-highlightat ~10% alpha. - Keeps
btn-successcolours; 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.
All six, side by side
Banner strips only, at content width, for quick scanning.
