One language for every Custofaber product.

Arcus keeps the colours, type, status markers and components of IT, Guard, Civitas and Table in one place. Every example on this page is drawn with the same files the products use.

Download tokens.css Go to the rules

The stones are painted with tokens.css values. Hover over or select a stone.Press the theme button; the stones switch to the other theme's values.

Colours

Inside the product the ground is a cool limestone and text is lead grey. Each row shows the light and dark values side by side; the left half of the swatch is light, the right half dark.

Surfaces

Name	Light	Dark	Use	Contrast (on surface)
Ground--ar-ground	#e6eae9	#111517	Page background.	Not a text colour
Surface--ar-surface	#f7f9f8	#191e21	Panels, tables, cards.	Not a text colour
Sunken surface--ar-surface-sunk	#dce2e1	#0c0f11	Side menu, table header, footer strip.	Not a text colour
Hover--ar-surface-hover	#eef2f1	#20262a	Row and menu item highlight.	Not a text colour

Text and lines

Name	Light	Dark	Use	Contrast (on surface)
Ink--ar-ink	#1f2629	#e2e7e7	Text and the main action button.	light 14.5:1 AA dark 13.5:1 AA
Secondary text--ar-ink-muted	#556064	#a0aaad	Descriptions, labels, sub-lines.	light 6.1:1 AA dark 7.1:1 AA
Faint text--ar-ink-faint	#7a8588	#737e81	Only for minor helper text; AA is not required.	light 3.6:1 below AA dark 4.0:1 below AA
Line--ar-line	#c9d1d0	#2b3337	Row divider.	Not a text colour
Strong line--ar-line-strong	#a3adad	#3f4a4e	Form field and panel edge.	Not a text colour

Brand

Swatch	Name	Light	Dark	Use	Contrast (on surface)
	Keystone--ar-keystone	#b5532e	#d27a55	Only the logo and the selected-position wedge.	light 4.7:1 AA dark 5.3:1 AA

The keystone is a mark, not a colour.

Terracotta appears only in the logo and in the wedge that marks the selected position in navigation. It is never a button, link or alert colour: it sits close to the critical red, so people could mistake an alert for branding or branding for an alert. The main action is always ink.

Product accents

Each product has a single accent colour, chosen with <html data-product="guard">. The accent appears only in the product name, the selected tab and small markers; buttons stay ink.

Name	Light	Dark	Use	Contrast (on surface)
Custofaber IT--ar-product	#45575e	#a3b4ba	Neutral lead blue. The value used when no `data-product` is set.	light 7.1:1 AA dark 7.8:1 AA
Custofaber Guard--ar-product · data-product="guard"	#355f80	#84aed0	Steel blue.	light 6.4:1 AA dark 7.2:1 AA
Custofaber Civitas--ar-product · data-product="civitas"	#3c6b4f	#7fc29a	Green. The umbrella for municipal services.	light 5.8:1 AA dark 8.1:1 AA
Custofaber Table--ar-product · data-product="table"	#7a5a2e	#d8b27c	Warm brown.	light 6.0:1 AA dark 8.5:1 AA

Try a product accent

The accent of the product you pick is applied to the examples on this page.

Sample MunicipalityProduct name in the accent colour

Status

Status colour contrast is measured on its own tint (--ar-…-tint), which badges are drawn on. Marketing site colours are measured on the warm ground.

Name	Light	Dark	Use	Contrast (on surface)
Critical--ar-critical	#a3204c	#f07f9f	Octagon + text.	light 5.8:1 AA dark 6.2:1 AA
Warning--ar-warning	#855600	#e2ab4f	Triangle + text.	light 5.3:1 AA dark 7.1:1 AA
Good--ar-good	#2a6b47	#6cc394	Circle + text.	light 5.2:1 AA dark 7.2:1 AA
Info--ar-info	#355f80	#84aed0	Square + text. The focus ring uses this colour too (`--ar-focus`).	light 5.4:1 AA dark 6.5:1 AA

Marketing sites

Marketing sites use a warmer ground than the product. These values live in the sites' own stylesheets, not in tokens.css.

Name	Light	Dark	Use	Contrast (on surface)
Warm ground	#f2f1ee	—	Marketing site background.	Not a text colour
Ink	#2b2a28	—	Text and buttons.	light 12.7:1 AA
Guard steel blue	#3d5a73	—	Accent on guard.custofaber.com. Slightly different from the in-product Guard accent (`--ar-product`).	light 6.4:1 AA

Status

Status is never shown by colour alone. Each status has its own shape and the text is always written, so people who cannot tell colours apart can still read it.

Turn colours off

CriticalOverdueResolvedAssignedOpen

Without colour, shape and text still tell the states apart.

CriticalOctagon. Needs action now.
WarningTriangle. Needs a look soon.
GoodCircle. Fine or resolved.
InfoSquare. A change or a note; no action needed.
NeutralEmpty circle. A record with no status yet.

Type

One family: Manrope. Technical values (IP, MAC address, serial number, hash) are set in IBM Plex Mono; monospace is used nowhere else.

ğ ş ı İ ç ö ü · 0123456789 · ₺ %

The in-product scale starts at 14 pixels for dense interfaces and grows by roughly 1.2. Marketing sites use larger headings.

--ar-text-2xl	28 px	Software that runs inside the organisation
--ar-text-xl	23 px	Software that runs inside the organisation
--ar-text-lg	19 px	Software that runs inside the organisation
--ar-text-md	16 px	Software that runs inside the organisation
--ar-text-base	14 px	Software that runs inside the organisation
--ar-text-sm	13 px	Software that runs inside the organisation
--ar-text-xs	12 px	Software that runs inside the organisation

Where monospace belongs:10.0.4.173C:52:82:1A:9F:045CG2041XYZsha256 9f2c…a41e

Logo

The arch-shaped C takes the place of the first letter. The brand name is one word: Custofaber.

Correct

Horizontal logo

The arch C stands in for the first letter. Used in headers and documents.

Right

Icon on its own

The app icon is only used on its own: browser tab, app icon, small surfaces. It never goes beside or above the word "Custofaber"; the arch C is already the first letter of the word, so placing them together reads as a double C.

Wrong

Two words

Never "Custo Faber" or "CustoFaber".

Inside the product: the organisation's logo top left, a small Custofaber signature at the bottom.

The product is the organisation's own tool; users see their organisation first. Custofaber is only a small signature at the foot of the side menu.

Components

The examples below are drawn with arcus-components.css; they are the same classes the products use.

Buttons

The main action is ink. In the product corners are 6 pixels (--ar-radius); on marketing sites buttons are square.

In the product: ar-btn, ar-btn--secondary, ar-btn--quiet, ar-btn--danger

Request a demoSee the products

Marketing site: square, ink

Audit log seal

Shown when the hash-chained audit log verifies. If the chain is broken, the seal says which entry broke it and turns critical.

Chain verifiedChain broken at entry 18,211

Selected-position wedge

In navigation the selected page is marked with a small wedge that narrows downward, like the keystone of an arch.

Rows

List screens are rows separated by lines. The first column names the record; technical values are monospace.

Device	Serial no.	Status
PC-FEN-022	5CG2041XYZ	Out of support
PC-MUH-114	5CG1987ABC	Not seen for 9 days
SRV-DOSYA-01	CZ2213QRS	Up to date

Vigil finding

Every finding answers the same three questions. Vigil proposes the action; a person approves it.

Critical

A departed employee's account signed in at night

Today 03:12

What happened

The m.aksoy account entered a wrong password 38 times between 02:41 and 03:10, then signed in on PC-FEN-022 at 03:12. The owner has left the organisation, but the account is still enabled in Active Directory.

Why it matters

An enabled account nobody uses is the easiest target for password guessing. A successful sign-in after a long run of failures may mean the password has been compromised.

What to do

Disable the account and end its open sessions.
Take PC-FEN-022 off the network and inspect it.
Compare the list of departed staff with Active Directory.

Every action you approve is written to the audit log.

Sample data.

Principles

Rules that come before components. If a new screen breaks one of them, the screen changes, not the rule.

Works on offline networks.
Fonts, icons and stylesheets ship with the product. No CDN, no Google Fonts, nothing loaded from outside.
This site serves its own fonts too.
Turkish, with Turkish formats.
The product interface is Turkish. Dates, times, money and numbers follow Turkish conventions.
18.10.2026 · 14:05 · 1.234,56 ₺ · %12
Light and dark are equal.
Both themes are first-class; every variable is defined in both. Text colours pass WCAG AA in both themes (except faint helper text).
Follows the user's system setting; data-theme can force one.
Summary first, then detail.
List screens open with the numbers that need attention; detail lives in the rows.
Accountability is visible.
Who did it and when: the record trail and chain seal stay on screen.
Status is never colour alone.
Shape and text always come with it.

Files

Copies of the files the product uses. The source of truth is the arcus/ folder in the custofaber-platform repository.

arcus-tokens.css
Colour, type, spacing and radius variables; light and dark themes; product accents.
Download
arcus-components.css
Button, form field, status badge, table, panel, app shell, chain seal, Vigil finding card.
Download

Usage

<html lang="tr" data-product="guard">
<link rel="stylesheet" href="arcus/fonts.css">
<link rel="stylesheet" href="arcus/tokens.css">
<link rel="stylesheet" href="arcus/components.css">
<body class="ar-root">

One language for every Custofaber product.

Colours

Surfaces

Text and lines

Brand

The keystone is a mark, not a colour.

Product accents

Try a product accent

Status

Marketing sites

Status

Type

Logo

Horizontal logo

Icon on its own

Two words

Inside the product: the organisation's logo top left, a small Custofaber signature at the bottom.

Components

Buttons

Audit log seal

Selected-position wedge

Rows

Vigil finding

A departed employee's account signed in at night

Principles

Works on offline networks.

Turkish, with Turkish formats.

Light and dark are equal.

Summary first, then detail.

Accountability is visible.

Status is never colour alone.

Files

arcus-tokens.css

arcus-components.css

Usage