Brand

Three colours, one identity.

The magenta g, the amber a and the blue N are GAN-TECH’s primary colours. Every gradient on this site is built from them, in seven interchangeable styles.

Logo

Logo

Primary lock-up with strapline, for light backgrounds.

SVG ↓PNG ↓

Logo — on dark

The same lock-up with a light strapline.

SVG ↓

Mark

The gan letters alone, for headers and tight spaces.

SVG ↓PNG ↓

App icon

The g on a navy tile, for favicons and app stores.

SVG ↓PNG 512 ↓

Keep clear space of at least the height of the “a” counter around the logo. Don’t recolour or stretch the letters; use the platform’s vector effects below rather than hand-made ones.

Primary colours

Magenta

Base: #E600EE · rgb(230, 0, 238)
Light: #FF4DFF
Deep: #B000C9
Text on light: #A000B8

Amber

Base: #FFAE00 · rgb(255, 174, 0)
Light: #FFD600
Deep: #FF8200
Text on light: #B35A00

Blue

Base: #0A6BCB · rgb(10, 107, 203)
Light: #00BDF5
Deep: #082C8C
Text on light: #0A55B0

Neutrals

Navy: #0A1430
Night: #070B1A
Ink: #0B1530
Paper: #F7F7FB

Gradients

Seven styles, interchangeable.

The site is currently using the Linear style (company default). Signed-in members can choose a different style for their own view in Settings.

Linear gradient

Colours transition along a straight line at the brand angle.

CSS

background: linear-gradient(120deg, #E600EE, #FFAE00 42%, color-mix(in srgb, #E600EE 50%, #0A6BCB) 72%, #0A6BCB);

Radial gradient

Colours spread outward from a focal point, like a spotlight.

CSS

background: radial-gradient(circle at 30% 25%, #FFAE00, #E600EE 42%, #0A6BCB 100%);

Conic gradient

Colours sweep 360° around a centre, like a colour wheel seen from above.

CSS

background: conic-gradient(from 210deg at 50% 50%, #E600EE, #FFAE00, color-mix(in srgb, #E600EE 50%, #0A6BCB), #0A6BCB, #E600EE);

Diamond gradient

Colours radiate from the centre in a diamond (cross) shape.

CSS

background: linear-gradient(to bottom right, #0A6BCB, #E600EE 50%, #FFAE00) top left / 50% 50% no-repeat, linear-gradient(to bottom left, #0A6BCB, #E600EE 50%, #FFAE00) top right / 50% 50% no-repeat, linear-gradient(to top right, #0A6BCB, #E600EE 50%, #FFAE00) bottom left / 50% 50% no-repeat, linear-gradient(to top left, #0A6BCB, #E600EE 50%, #FFAE00) bottom right / 50% 50% no-repeat;

Reflected gradient

The transition mirrors symmetrically around the centre line.

CSS

background: linear-gradient(120deg, #E600EE, #FFAE00 20%, color-mix(in srgb, #E600EE 50%, #0A6BCB) 36%, #0A6BCB 50%, color-mix(in srgb, #E600EE 50%, #0A6BCB) 64%, #FFAE00 80%, #E600EE);

Mesh gradient

A grid of colour nodes blending in several directions at once.

CSS

background: radial-gradient(at 0% 0%, #E600EE 0, transparent 55%), radial-gradient(at 100% 0%, #FFAE00 0, transparent 55%), radial-gradient(at 100% 100%, #E600EE 0, transparent 50%), radial-gradient(at 0% 100%, #FFAE00 0, transparent 55%), radial-gradient(at 50% 50%, #0A6BCB 0, transparent 65%), #0A6BCB;

Freeform gradient

Soft colour blobs placed freely and blurred together.

CSS

background: radial-gradient(38% 48% at 18% 30%, #E600EE, transparent 70%), radial-gradient(34% 42% at 78% 22%, #FFAE00, transparent 70%), radial-gradient(46% 40% at 62% 82%, #0A6BCB, transparent 72%), radial-gradient(28% 30% at 34% 78%, #FFAE00, transparent 70%), radial-gradient(30% 34% at 88% 70%, #E600EE, transparent 70%), #0A6BCB;
filter: blur(42px); /* on the gradient layer */

Vector effects

One signature, eleven themes.

Shapes, logo art and highlighted words are rendered with the Glossy bevel effect (company default). The whole site uses the signature glossy bevel; the other eleven are personal themes members can switch on in Settings, together with a colour set and text size.

Site-wide signature

Glossy bevel

GAN-TECH’s signature: shapes extruded with crisp bevelled edges, finished with a glossy 3D highlight and a soft cast shadow.

data-effect="signature"

Personal theme — glossy finish

Glossy 3D

Lit, rounded vector forms with a bright specular highlight and a soft cast shadow.

data-effect="glossy"

Personal themes — 3D vector forms

Extrude & bevel

Shapes pushed back along the Z-axis with crisp bevelled edges — depth without shine.

data-effect="extrude"

Revolve

Profiles swept around a vertical axis, shaded like cylinders and turned forms.

data-effect="revolve"

Inflate

Faces puffed out from the centre into soft, pillowed, balloon-like forms.

data-effect="inflate"

Isometric

Strict 30° parallel projection — an engineering block view with no perspective.

data-effect="isometric"

Stacked layers

Offset copies in the brand colours build a retro, paper-cut step shadow.

data-effect="stacked"

Noodle tubes

Outlines given round, even thickness — wire and neon-style tubes.

data-effect="noodle"

Personal themes — non-glossy surfaces

Matte

Zero specular highlights: a chalky, clay-like tactile finish.

data-effect="matte"

Diffuse rough

Light scattered evenly over a rough surface, like stone, wood or fabric.

data-effect="diffuse"

Wireframe

Fills stripped away to reveal the contour mesh of each shape.

data-effect="wireframe"

Grainy

Noise and stipple over the shading, like screen print or vintage airbrush.

data-effect="grainy"

Using colour well

Use gradients for surfaces, outlines and large display words. Body text stays navy (or white on dark).
Gradient text uses the deeper “text on light” shades so headings keep at least 3:1 contrast; on dark surfaces the light shades are used.
Buttons never put text directly on the amber stop: primary buttons are navy, accent buttons are white with a gradient edge.
Vector effects shape the logo art, brand tiles and highlighted words; body text is never filtered, so it stays sharp and readable.
Pick one gradient style per section. The studio sets the company default under Company settings → Brand; individual sections can override it.