Things that hold together, built properly.

The Intact Works brand: the mark, the colours, the type and the motion, and the files to use them. Light and dark are both first-class; everything here works in either.

Brand guide · version 1.0 · October 2026

The idea

“Intact” means whole and unbroken; “Works” is a workshop, and it works. Everything the brand draws follows from that.

The products are open arcs; the company is the closed line.

Every Intact Apps mark is a graphite tile with an open arc and one glyph in the app’s colour. The company mark is one unbroken stroke that closes: up the I, along the chord, down and up through the W, and back into the chord. Beside the apps it sits on the same tile, in white, with no colour of its own.

Intact Works app tile

Two themes, one inspection.

Dye-penetrant inspection is how a part is proved to be intact: a red dye shows any crack against a chalk-white developer, or, in the fluorescent method, glows in a dark booth under a UV lamp. The light theme is the first, the dark theme the second. Same red, different light.

Colour

Penetrant: the colours of dye-penetrant inspection. Light and dark are designed together from the same named hues; dark is never inverted light.

Light theme · visible penetrant

Red dye on chalk-white developer, carbon-steel ink.

Developerground
#F2F3F0 · RGB 242 243 240
every ratio is measured on this
Developer, raisedraised surface
#FFFFFF · RGB 255 255 255
a step up from the ground
Carbontext
#14171D · RGB 20 23 29
16.1 on ground
Steelmuted text
#575E68 · RGB 87 94 104
5.9 on ground
Aa 6.0
Penetrantaccent
#C4122F · RGB 196 18 47
5.4 on ground
UVsecondary, glow
#6536C8 · RGB 101 54 200
6.5 on ground
Passsuccess
#1D7347 · RGB 29 115 71
5.2 on ground
Holdattention
#9A5800 · RGB 154 88 0
5.0 on ground
Developer 60%Developer, raised 14%Carbon 15%Steel 7%Penetrant 3%UV 1%

Also: alternate ground #E9EBE7 · line #D8DBDE · control border #7B828B · hover #A50E27

Dark theme · the booth

The darkened inspection booth, violet-black under the UV lamp; the same red, lifted.

Boothground
#171A20 · RGB 23 26 32
every ratio is measured on this
Booth, raisedraised surface
#20252D · RGB 32 37 45
a step up from the ground
Developertext
#F1EEF5 · RGB 241 238 245
15.2 on ground
Steelmuted text
#AAB2BF · RGB 170 178 191
8.2 on ground
Aa 5.6
Penetrantaccent
#FF5470 · RGB 255 84 112
5.6 on ground
UVsecondary, glow
#AE8CFF · RGB 174 140 255
6.6 on ground
Passsuccess
#4FD08E · RGB 79 208 142
8.9 on ground
Holdattention
#F5B64A · RGB 245 182 74
9.7 on ground
Booth 60%Booth, raised 14%Developer 15%Steel 7%Penetrant 3%UV 1%

Also: alternate ground #1C2027 · line #353C47 · control border #7B8595 · hover #FF7389

Using it

  • Penetrant marks the one thing to do on a screen — the primary button — and the mark. It is never a background for long text and never a decorative wash.
  • UV is light, not paint: focus rings, selection and the glow behind the mark in the dark theme. Never body text.
  • Errors use Hold with an icon and words. Red is never the only signal.
  • Product colours — Intact orange, Interval magenta, Insonify teal, Infer indigo — appear only on product tiles and inside product screenshots.
  • Dark is a theme of its own: use the dark tokens, never filter: invert().
  • Every text pair below passes WCAG AA in both themes; body text passes AAA.

In use

Hover, focus and states, side by side. Focus is a UV ring offset from the element, so it shows on red buttons too.

Start a projectHoverFocus
See our workHover
[email protected]
! Write your name, so we know who to answer
✓ Message sent. We’ll reply within one working day.
! Check the email address: it needs an @.

A link in text and selected text.

Start a projectHoverFocus
See our workHover
[email protected]
! Write your name, so we know who to answer
✓ Message sent. We’ll reply within one working day.
! Check the email address: it needs an @.

A link in text and selected text.

Contrast

PairLightDark
text on bg16.11 AAA15.18 AAA
text on surface17.95 AAA13.41 AAA
text on bg-alt14.96 AAA14.23 AAA
muted on bg5.88 AA8.16 AAA
muted on surface6.55 AA7.21 AAA
accent on bg5.43 AA5.60 AA
accent on surface6.04 AA4.95 AA
on-accent on accent6.04 AA5.60 AA
on-accent on accent-hover7.80 AAA6.69 AA
secondary on bg6.47 AA6.63 AA
success on bg5.24 AA8.92 AAA
success on success-soft4.99 AA6.99 AA
attention on bg5.00 AA9.69 AAA
attention on attention-soft4.73 AA7.84 AAA
control on bg3.49 AA large / UI4.67 AA
control on surface3.88 AA large / UI4.13 AA large / UI
focus on bg6.47 AA6.63 AA

WCAG 2 contrast ratio. AA: 4.5 for text, 3 for large text and UI borders. AAA: 7.

Type

Geologica, one family, by Monokrom and Cyreal, under the SIL Open Font License. It covers Latin, Serbian Latin, Russian and Kazakh, and its sharpness axis cuts corners clean at display sizes.

Two axes

Display: weight 640, sharpness 100. Text: weight 400, sharpness 0. Self-hosted WOFF2, subset to Latin, Latin Extended and Cyrillic, with a size-matched Arial fallback so nothing shifts when the font loads.

Weight400 text · 640 display

Works Works

Sharpnessred outline 100 over grey 0

s2 6

Sharpness changes only the terminals: at 100 they end in cut, angled strokes instead of soft ones. A detail you feel at display sizes more than see; text stays at 0.

Scale

Every size is fluid between a 360 px and a 1600 px wide screen. Body text never runs wider than 68ch.

display-xl52–152 px · 0.94
-0.04em · 640 · sharp 100
Software, websites, support.
display37–64 px · 1.06
-0.04em · 500 · sharp 0
Серверы и хостинг
h134–64 px · 1.04
-0.03em · 620 · sharp 100
We run what we build
h226–44 px · 1.1
-0.022em · 600 · sharp 70
Сайты и интернет-магазины
h321–28 px · 1.2
-0.012em · 580 · sharp 40
Design and branding
lead18–22 px · 1.5
-0.005em · 400 · sharp 0
Делаем программы, сайты и системы за ними — и поддерживаем их работу.
body16–18 px · 1.62
0em · 400 · sharp 0
Intact Works is an IT company founded in 2026. We build software and websites, look after servers and advertising, and make our own products: Intact Apps, NDT Inspect and Klik za Termin.
small14–15 px · 1.55
0.002em · 400 · sharp 0
Отвечаем в течение рабочего дня. Пишем на русском, английском и сербском.
caption12–13 px · 1.45
0.01em · 450 · sharp 0
ТОО «Intact Works» · Intact Works LLP · «Intact Works» ЖШС

Scripts

Latin

We build software, websites and the systems behind them.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ — « » “ ”

Serbian Latin

Klik za Termin — zakažite termin za par sekundi.

Š Đ Č Ć Ž š đ č ć ž
Šabac · Đurđevdan · Čačak · Niš

Russian

Делаем программы, сайты и системы за ними.

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщъыьэюя

Kazakh

«Intact Works» жауапкершілігі шектеулі серіктестігі

Ә Ғ Қ Ң Ө Ұ Ү Һ І
ә ғ қ ң ө ұ ү һ і

Rules

  • Sentence case everywhere, headlines included.
  • No tracked-out capital labels above headings, and no highlighting one word of a headline in colour or italics.
  • Body text at most 68ch wide; display type sets the drama, body type stays plain.
  • Russian: a non-breaking space after one- and two-letter words and before a dash, so no line starts with «—» or ends with «и».
  • Quotation marks: « » in Russian and Kazakh, “ ” in English, „ ” in Serbian.
  • Tabular figures (font-feature-settings: 'tnum') for prices, tables and requisites.

Motion

The site moves a lot, so it moves as one physical system: the same durations, curves and distances everywhere, and every animation ends in a complete, readable state.

One line, drawing itself

The mark drawing as one stroke is the signature. On load it leads a sequence of at most 1.5 s, once per visit.

Arrive, travel, leave

Ease-out to arrive, ease-in-out to travel under scroll, ease-in to leave. Nothing moves linearly except the marquee.

Always resolved

Nothing ends half-faded, and nothing important is only visible in the middle of an animation.

Transform and opacity only

No layout properties on scroll, one pinned section at a time, a steady 60 fps on a mid-range Android.

Reduced motion is designed

With reduced motion, choreography is off, content is static and complete, the theme switch is instant and the marquee stops.

Works without JavaScript

Content is never hidden behind opacity: 0 unless a .js class is present; animation only enhances.

Curves

ease-out
Arriving: reveals, slides, cards landing
cubic-bezier(0.16, 1, 0.3, 1)
ease-in-out
Travelling: the draw, pinned tracks
cubic-bezier(0.65, 0, 0.35, 1)
ease-in
Leaving: exits and dismissals
cubic-bezier(0.7, 0, 0.84, 0)
ease-settle
Landing with a 2 % overshoot: stacked cards
linear(0, 0.25 9%, 0.52 18%, 0.74 28%, 0.9 39%, 0.99 51%, 1.02 62%, 1.01 76%, 1)

Durations, staggers, distances

--dur-instant90 ms
--dur-fast160 ms
--dur-base260 ms
--dur-slow450 ms
--dur-slower700 ms
--dur-draw950 ms
--dur-hero1500 ms
--dur-theme520 ms
--stagger-line70 ms between lines
--stagger-item90 ms between items
--stagger-card120 ms between cards
--move-s12px
--move-m32px
--move-l80px
--parallax-s4 % of scroll distance
--parallax-m8 % of scroll distance
--parallax-l14 % of scroll distance
Headline revealstarts at 70% of the viewport

Try them

The draw · 950 ms · ease-in-out
We build software,websites and thesystems behind them.
Line reveal · 700 ms · 70 ms stagger · ease-out
Intact AppsFive apps, one sign-in
NDT InspectThe NDT community
Klik za TerminOnline booking in Serbia
Stacking cards · ease-settle · the card beneath scales to 0.94

Your system asks for reduced motion, so the demos show their final state.

Applications

The brand at the sizes it will actually be seen: a card, a signature, an avatar, a browser tab, a link preview.

Business card · 85 × 55 mmfront light, back dark

Intact Works
Software · websites · support · servers · advertising
DougFounder
[email protected]
intactworks.com
ТОО «Intact Works» · Intact Works LLP

Email signatureexport/email-signature.html

The mark is an image (red reads in light and dark mail clients); the words are live text, so they adapt to the client.

Social avatars · 1024 pxcropped to a circle by the platform

Avatar, lightAvatar, darkAvatar, Penetrant

Favicon · 16 pxSVG that follows the browser’s scheme; ICO fallback

Intact Works✕
Intact Works✕
ICO and PNG fallback✕

Link preview · lightexport/og-default-light.png · 1200 × 630

Open Graph image, light
Intact Works — software, websites and the systems behind themintactworks.com

Link preview · darkexport/og-default-dark.png · 1200 × 630

Open Graph image, dark
Intact Works — software, websites and the systems behind themintactworks.com

Files

Everything is generated from brand/tokens.source.mjs and brand/logo/src/ by the scripts in tools/.

Logo, SVG

Logo, PNG

Icons

Social

Code

  • tokens.css — colour, type, space, radius, shadow, motion; both themes
  • fonts.css — Geologica and its fallback