Fasqon

Fasqon design system

Brand & assets.

The building blocks behind the Fasqon brand - typography, color, and visual components, explored part by part.

01 - Typography Aa

One distinctive grotesque for voice, one mono for financial data.

Display / Headings
Aa
Schibsted Grotesk
Headlines, navigation, product voice
400 Regular500 Medium600 Semibold700 Bold800 Extrabold
Data / Numerics
0123
Geist Mono
Balances, labels, rails, status
Type scale
H1 / 96One account.
H2 / 58Every rail.
Body / 17Move money in seconds, not days.
Mono / 12SEPA - SETTLED - 0:04
Thin neon underline / 3px

Move money without waiting.

Deep green / supporting text

Built for business.

Gradient underline / neon to deep

Every rail.

02 - Color #30F427

Neon is the signal. A deeper green supports it for text and depth.

Palette
Signal
Neon Green#30F427

Highlights, CTAs, live status.

Support
Deep Green#0C5A2B

Accent text and professional tone.

Gradient
Signal Gradient30F427 - 0C5A2B

Rare accent moments.

Text
Ink#0E0E0E

Headings and body.

Base
Pure White#FFFFFF

The canvas. No off-white.

03 - Assets

Glass, plasma, controls, buttons, and contrast components.

Before - CSS glass
Incoming paymentlive
From - Studio NordUSDC
Amount$12,800.00
To - OperatingEUR

Before - frosted CSS

Plain backdrop-filter blur over static glass styling. Useful, but no true refraction.

After - gf-liquid-glass
Incoming paymentlive
From - Studio NordUSDC
Amount$12,800.00
To - OperatingEUR

After - liquid glass

Real refractive glass with a chromatic edge, transparent enough for future backdrops.

Liquid glass - controls
Incoming paymentlive
From - Studio NordUSDC
Amount$12,800.00
To - OperatingEUR

Liquid glass - live controls

Tune radius, depth, blur, chroma and tint directly on the component.

Plasma

Plasma

Animated meshing green field. Stands alone, or sits behind glass.

Plasma - ASCII

Plasma - ASCII

The same energy as a grained monospace character ramp.

Plasma - Grain

Plasma - grain

The same field with grain masked to the green core.

Plasma - Subtle

Plasma - subtle

A faint, low-key wash for quieter backgrounds.

Dark contrast
Stop fighting your bank.
For the bold, full-bleed moment - one per page.

Dark panel

Ink gradient with a single green glow.

Glass button

Glass button

Glitterflow glass button with sheen, conic rim and 3D press.

Glass card
Incoming payment $12,800.00 From Studio Nord · USDC

Glass card

Same glass surface as a content card - sheen sweep and conic rim on hover, no press. Lifts on hover.

Buttons & chips
Get Started Talk to sales
EURUSDUSDCETH

Controls

Flat neon pill, ghost outline, and rail chips. Black text on green.

04 - Glass x Plasma

The liquid glass card floating over plasma variants, with controls.

Glass x Plasma - switch
Incoming paymentlive
From - Studio NordUSDC
Amount$12,800.00
To - OperatingEUR
Plasma behindVivid

Glass x Plasma - switch

One card, four backdrops. The glass refracts whichever plasma you pick.

05 - Card

The Fasqon card system: metal, holo black, and a blank black shine model for future artwork.

Metal card

Fasqon card

Glossy black varnish logo and wordmark on a near-black metal body. Move your mouse to tilt it.

Holographic black

Holographic card

Same black card, with iridescent color-dodge shine that follows the cursor.

Blank black shine

Blank model

No internal content - just the black card body, depth, and shiny holo surface.

06 - Diagram

Two glass nodes linked by a live neon wire that flows like fluid.

Frosty card - dots
studio-nord
Source
Balance$12,800
operating-eur
Destination
Statussettled

Frosty card - dots

Two frosted-glass nodes tilt to the cursor; the neon connection flows between them like liquid.

Frosty card - grid
studio-nord
Source
Balance$12,800
operating-eur
Destination
Statussettled

Frosty card - grid

Same frosty card, over a fine grid backdrop instead of dots - thin lines, medium spacing.

Glass card - dots
studio-nord
Source
Balance$12,800
operating-eur
Destination
Statussettled

Glass card - dots

Two gf-glass-card nodes - sheen sweep, conic rim and lift on hover; same neon wire, dotted backdrop.

Glass card - grid
studio-nord
Source
Balance$12,800
operating-eur
Destination
Statussettled

Glass card - grid

Same gf-glass-card nodes, over a fine grid backdrop - thin lines, medium spacing.

07 - Glass card models

Profile cards - round, square, and the Fasqon mark - all the same gf-glass-card.

Glass card - models
Owner
Owner
Business Account

Glass card models

Round avatar, square account, and the pure neon Fasqon mark - one gf-glass-card over a grid.

08 - Connection

Circular owner linked to a square business account by a live neon wire.

Glass card - connection
Owner
Business Account

Glass card - connection

Circular owner card linked to a square business account by a live neon wire.

09 - Connection

International transfer flow: sender to recipient across local and international banks.

Glass card - transfer flow
Sender side
Sender
Transaction
Local Bank
Intl Bank
Recipient side
Recipient
Transaction
Local Bank
Intl Bank

Glass card - transfer flow

Sender and recipient sides, each with four glass card nodes, connected by a vertical international bank bridge.