Allianzy’s operating design system. It defines how the visual system looks, reads and is used across every touchpoint: product, landing, decks, internal comms and client materials.
Three versions for three contexts. Construction stays proportional — never redraw or tweak by hand. The mark renders with currentColor to inherit the container’s color.
The symbol is built on the unit x = height of the lower dot. Clear space around the lockup is 2x in every direction. Nothing (text, images, other logos) may enter that zone.
Minimum 2x on all sides. Applies to any adjacent element — copy, other logos, container edges, photos.
Wordmark: 96px wide · Symbol: 24pxWordmark: 24mm · Symbol: 8mmfill="currentColor" → inherits --textfav.svg · symbol onlyThe logo is applied flat, in a brand color, on clean backgrounds. These modifications are explicitly forbidden — even small or “creative” ones.
Black background, bone for text, Allianzy blue as the only brand accent. Three system channels (good/warn/bad) reserved for states — never decorative.
Bricolage Grotesque for everything expressive: headings, body, CTAs. Extreme weights (200 in hero · 500 in h2/h3). JetBrains Mono for everything technical: eyebrows, codes, labels, telemetry, data tables. Both are on Google Fonts.
Allianzy is a technical partner, not a marketing agency. The voice is direct, operational and quantified. We swap adjectives for numbers whenever we can. Three words where others use ten.
Verbs. Metrics. Deadlines.
We operate with precision.
The brand too.
Discovery in 5 days. Design in 2 weeks. Incremental build with a demo every Friday.
CORE brings the 8 services into one console. Zero context-switching.
Start intake → · View case → · Enter CORE ↗
Empty adjectives. Ornaments. Promises.
We digitally transform your business with cutting-edge, innovative solutions.
We have an agile, flexible process that adapts to your organization.
A 360º platform that unifies all your services to empower your team.
Learn more · Discover how · Contact us for a custom demo
CSS tokens shared across landing, dashboard and materials. Dark-first; daylight mode redefines the surfaces but keeps accent and system colors.
:root {
--bg: #0D0A0B; /* primary background */
--text: #EAEAEA; /* primary text */
--accent: #245BDA; /* signal blue · CTAs · brand moments */
--accent-2: #5B8DEF; /* halos · trazos */
--good: #3FA84A; /* system · ok */
--warn: #C97A3F; /* system · hold */
--bad: #E05656; /* system · stop */
--line: rgba(255,255,255,0.08);
--mono: 'JetBrains Mono';
--sans: 'Bricolage Grotesque';
}Square corners, 1px border (--line-2), no shadows. Everything inherits the tokens — changing one color here changes the whole product. These are system samples; the live components live in CORE.
Primary (accent) · Ghost (border) · Destructive. Mono, uppercase, tracking.
Color as the only state carrier, reinforced by the label (accessibility).
Accent halo on focus. Select with its own arrow (no native one).
Surface --card + border. Progress bar in accent.
We don’t recreate mockups: these are the real product screens. The source of truth is the code, not this document.
Allianzy’s public home: hero, services, process and the CORE diagram.
Sign-in screen with per-workspace white-label and a telemetry panel.
Role-aware app: projects, board/Gantt, support, billing and docs.
The same content and tokens reflow per breakpoint. On desktop, sidebar + grids; on mobile, drawer + bottom tab bar with everything stacked. Minimum hit target 44px on any tap.
| Element | Desktop | Mobile |
|---|---|---|
| H1 · hero | 32–40px | 22–24px |
| H2 · block | 18px | 14px |
| Body | 14px | 12–13px |
| Mono · labels | 10–11px | 9–10px |
| Hit target | ≥ 44px on any tap | |
padding-bottom: env(safe-area-inset-bottom).padding-top: env(safe-area-inset-top).backdrop-filter: blur.