Brand Guideline

How to present S Technologies — the mark, the colours, the type, and the name.

These are the assets and rules we use ourselves. Follow them when you write about S Technologies, embed our mark, or build something that sits alongside our products.

Facts

At a glance

The details most often needed. Every value copies to the clipboard.

Name
Domain form
Bengali name
Founded
Based in
Website

One-line descriptor

S Technologies (STechBD.Net) is a research-based technology company in Bangladesh, founded in 2013, providing domain registration, hosting, software and AI development, design, and SEO.

Assets

The mark

The S Technologies mark is four coloured tiles around a central S. It comes in an animated form used across the site and a flat SVG for anywhere animation is not appropriate.

SVG

Mark

The bare mark on a transparent background. Use it on white and other light surfaces.

Download

SVG

Mark on white

The same mark on a white disc. Use it on dark surfaces and over imagery.

Download

PNG

Raster mark

192px PNG, for anywhere an SVG will not render.

Download

Construction

Clear space and minimum size

Two measurements decide whether the mark reads. Both are drawn here rather than described, because a number in a sentence is easy to round down.

Clear space

Leave a margin of X on all four sides. No type, rule, edge, or other logo enters it. When the mark sits in a tight bar, shrink the mark rather than the margin.

X = the height of the central S

Minimum size

Below 24px the four tiles merge into one shape and the S closes up. If the space is smaller than that, use a wordmark or the site name instead.

24px

32px

48px

96px

16px

Too small. The tiles merge and the S disappears.

Placement

The mark in place

Four surfaces cover almost everything. Pick the mark that keeps the tiles separated.

Light surface

The bare mark. This is the default.

Dark surface

The bare mark again — the tiles are bright enough to hold their own.

Accent surface

The white disc, so the tiles are not read as part of the accent.

Over imagery

The white disc, always. Never the bare mark on a photograph.

Colour

Logo colours

Five fills make up the mark, each with a darker shadow behind it. These are fixed — they are the only colours the mark is ever drawn in.

Green

Lower-right tile

Blue

Upper-right tile

Yellow

Lower-left tile

Red

Upper-left tile

Letter

The central S

Colour

Accent colours

The site ships a theme picker, so the interface accent is not fixed. Every pair below is a valid S Technologies accent, and the mark itself never changes with them.

Indigo

Default

Primary
Secondary

Red

Primary
Secondary

Yellow

Primary
Secondary

Green

Primary
Secondary

Teal

Primary
Secondary

Blue

Primary
Secondary

Purple

Primary
Secondary

Rose

Primary
Secondary

Code

Colour in code

The accent is two CSS variables, not a hex you copy. Read them and your work follows the theme picker; hard-code one and it stops at the first theme change.

package/style/global.csscss

:root {
	--primary: #4f46e5;
	--secondary: #4338ca;
}

.theme-green {
	--primary: #16a34a;
	--secondary: #15803d;
}

@theme inline {
	--color-primary: var(--primary);
	--color-secondary: var(--secondary);
}

component.tsxtsx

// Right — follows the theme picker.
<button className="bg-primary hover:bg-secondary" />
<div className="bg-linear-to-r from-primary to-secondary" />
<span className="bg-primary/10 text-primary" />

// Wrong — frozen at one theme.
<button className="bg-[#4f46e5] hover:bg-[#4338ca]" />

Text on colour

The accent moves with the theme, so these are stated as pairs rather than ratios. Anything outside them needs checking against WCAG AA at the size you are setting it.

S Technologies