Brand kit

Use the CirqlWorks brand, correctly.

The logo files, the tricolour ring mark, the brand bar, the colours, the typography. Click any colour value to copy it. Click any logo to download it. Everything on this page is part of the brand — please use it as documented.

Brand palette

Three colours. That's the whole brand.

Cirql Navy carries the weight. Cirql Teal is the accent that runs through the wordmark, the buttons, the links. Cirql Pink is reserved for moments that should feel warm or human. We do not introduce new brand colours.

Cirql Navy Primary

HEX
RGB
Pantone

Cirql Teal Accent

HEX
RGB
Pantone

Cirql Pink Warm accent

HEX
RGB
Pantone

Supporting palette

The neutrals and the dark stage.

Body type, surfaces, rules — everything outside the three brand colours sits on these neutral ramps. The dark stage is reserved for hero areas where the brand colours need to sing.

Ink — type colour

Ink Heading

HEX
RGB

Ink 2 Body

HEX
RGB

Ink 3 Muted

HEX
RGB

Paper — surfaces

Paper Page

HEX
RGB

Paper 2 Section

HEX
RGB

Paper 3 Rule / divider

HEX
RGB

Stage — dark hero surfaces

Stage Hero base

HEX
RGB

Stage 2 Hero gradient stop

HEX
RGB

The mark

A tricolour ring, rotated off the cardinal axes.

The CirqlWorks mark is a circular band cut into three segments matching the brand bar proportions. The whole ring is rotated 20° counterclockwise so the segment joins sit between the cardinal axes — this is what stops the mark looking like a compass.

Navy segment: 50% of the ring
Teal segment: 25% of the ring
Pink segment: 25% of the ring
Rotation: 20° counter-clockwise
On dark backgrounds: Navy segment inverts to white
Clearspace: ≥ 50% of the ring diameter on all sides
Minimum digital size: 32px wide for the square lockup

cirqlworks-mark.svg Vector · transparent cirqlworks-mark.png 192px · transparent

Logo files

Four lockups, two surfaces.

Landscape lockups for headers, email signatures and document letterheads. Square lockups for app icons, profile avatars and social crops. Pick the variant that matches the background you're placing it on — light files on light surfaces, dark files on Cirql Navy.

cirqlworks-light-landscape.svg Headers, email signatures, letterhead

cirqlworks-dark-landscape.svg Dark UIs, presentation slides, social banners

cirqlworks-light-square.svg App icons, avatars, favicons

cirqlworks-dark-square.svg Embroidered patches, social profile images, pin badges

The brand bar

50% navy, 25% teal, 25% pink.

The brand bar sits at the very top of every CirqlWorks page. Same colours, same proportions, every time — Navy half, Teal quarter, Pink quarter, no exceptions. Default height is 8 px on the web. In print, the bar's total height is 1.5% of the page height (so it stays a brand band, not a rule).

HTML

<div class="brand-bar" aria-hidden="true">
  <span class="brand-bar__navy"></span>
  <span class="brand-bar__teal"></span>
  <span class="brand-bar__pink"></span>
</div>

CSS

.brand-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  height: 8px;
}
.brand-bar__navy { background: #003366; }
.brand-bar__teal { background: #00CCCC; }
.brand-bar__pink { background: #FF3399; }

Typography

Inter, in six weights.

Inter from Google Fonts, served at weights 300, 400, 500, 600, 700 and 800. The wordmark is the only place where weights are mandated: Cirql is set in Inter 800, Works in Inter 300 Cirql Teal. Body type uses 400 / 500; UI labels use 500 / 600; section headings use 700.

CirqlWorks

Cirql · Inter 800 Works · Inter 300 / Cirql Teal No space, single compound word

HTML head

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />

Usage

Use the assets as-is. Don't remix.

The brand is one of the few things at CirqlWorks we don't iterate on. The mark, the colours and the bar are exactly the same on the website, on the embroidered patches and on a presentation deck. Consistency is the point.

Do

Pick the variant that matches the background — light files on light surfaces, dark files on Cirql Navy.
Keep clearspace of at least half the ring diameter on every side.
Place the brand bar at the very top of every page, full bleed.
For embroidery, use the dark-square SVG as the source and request a three-thread separation (Navy, Teal, Pink).

Don't

Don't recolour the ring segments or the brand bar.
Don't place the light variant on dark backgrounds — switch to the dark variant.
Don't stretch, skew or rotate the ring. It must stay perfectly circular.
Don't add drop shadows, glows, gradients or strokes to the mark.

Questions about brand usage? Get in touch and we'll sort it.