TEISENDA CI Guide (for AI use)

Three commitments this guide enforces

• One violet, not two. The identity leads with the deep violet from our own logo. The bright interface violet is a UI colour and nothing more.
• One family, set with discipline. Instrument Sans does every job. The difference between a headline and a caption is weight, size and tracking — not a second typeface.
• Our graphics come from the butterfly. Faceted, constructed, ours. No particle fields, no glowing orbs, no stock neural networks.

Two lockups, two builds

Two decisions per file. Lockup: logo-* carries the wordmark, icon-* is the butterfly alone. Build: the left wing is outline (fine line drawing) or solid (filled silver facets). small in a filename means the solid build: it refers to the display size it survives, not to a narrower shape.

Logo · mark + wordmark

Outlinelight ground

logo-light

Outlinedark ground

logo-dark

Solidlight ground

logo-small-light

Soliddark ground

logo-small-dark

Icon · mark only

Outlinelight ground

icon-light

Outlinedark ground

icon-dark

Solidany ground

icon-small

Favicon16–64 px

favicon.ico

Which build, at which size

This is the rule that gets broken most often. The outline build's hairlines are the whole character of the left wing — and below roughly 200 px of logo width they stop resolving and turn into a grey smudge. The solid build exists for exactly that range.

Same file family, two builds, shown at true size

Absolute minimums: logo 120 px wide on screen, 30 mm wide in print; icon 24 px. Below those, use nothing rather than something illegible.

Every file

Seven variants, three formats each. SVG is the working file. The large PNG is for tools that refuse vector. The 400 px PNG is for email signatures and slide decks. Nothing zipped.

logo-light Mark + wordmark · Outline build · light ground

SVG 7.9 KB PNG 2291×494 PNG 400×86

logo-dark Mark + wordmark · Outline build · dark ground

SVG 7.8 KB PNG 2284×494 PNG 400×87

logo-small-light Mark + wordmark · Solid build · light ground

SVG 8.9 KB PNG 2279×490 PNG 400×86

logo-small-dark Mark + wordmark · Solid build · dark ground

SVG 8.9 KB PNG 2280×491 PNG 400×86

icon-light Mark only · Outline build · light ground

SVG 5.6 KB PNG 1258×969 PNG 113×87

icon-dark Mark only · Outline build · dark ground

SVG 5.6 KB PNG 1258×969 PNG 113×87

icon-small Mark only · Solid build · any ground

SVG 6.3 KB PNG 634×490 PNG 113×87

All at ci.teisenda.com/logos/, one file per link. Two further files in that folder are not logo variants: favicon.ico at 256×198 and 204.2 KB, and the AI-generated-content label AI LABELS_3x2_AI GENERATED_black.png at 2501×1668.

Never redraw any of this, and never set the wordmark in a font. It is artwork; the letterforms in these files are the only correct ones.

Clear space

Reserve clear space equal to the full height of the butterfly on all four sides. Nothing enters that zone: no text, no rule, no image edge, no other logo.

Violet outline = the logo's bounding box. Dashed outline = the minimum clear space, one butterfly-height on every side.

What not to do

Don'tOutline build at small size

Don'tRecolour the mark

Don'tStretch or condense

Don'tAdd glow or shadow

Don'tRotate or tilt

Don'tPlace on a busy ground

Don'tRebuild the lockup yourself

TEISENDA

Don'tUse the wrong ground version

• Never set "TEISENDA" in a system font next to the icon. The wordmark is drawn artwork with rounded terminals that no licensed face in our system reproduces — the last tile above is what that looks like, and it is wrong every time.
• Never mix builds: an outline icon does not sit next to a solid one in the same layout.
• Never apply the wordmark's rounded geometric style to anything else. It lives in the logo, and only there.
• Never place the logo directly on a photograph without a solid or heavily darkened panel underneath.

Brand colors

All three are lifted directly from the logo artwork. Using them means brand and mark finally agree.

Interface colors

These belong to the product, not to the brand. They appear inside the app and on the website's interactive elements. They never lead a piece of communication.

Grounds and ink

Signal colors

One accent, used sparingly, plus two status colors that exist only in the interface. Amber is the single warm note in the system: it marks what is new, in beta or worth attention.

Contrast, checked

Rules

• Lead with violet, not with black. A piece of TEISENDA communication should read violet from across the room — either as filled area or as headline colour.
• One accent per surface. Amber and violet may share a page. They may not share a component.
• Gradients stay inside the violet family and stay under 25% of any surface. #432B78 to #6A4394 is the only approved pair.

• No violet-to-blue or violet-to-pink gradients. That combination is the visual shorthand for "AI startup" and we are deliberately not using it.
• No neon glow behind violet elements.
• No new colours introduced per campaign. If a campaign needs a colour we do not have, it needs a different idea.

Get the font

Instrument Sans by Rodrigo Fuenzalida and Jordan Egstad, SIL Open Font License. Two variable fonts from the Google Fonts repository, unmodified. Use these rather than a static cut: one file covers 400 to 700.

Three separate files at ci.teisenda.com/fonts/, nothing zipped. Send the link, not the attachment — an agency that downloads from here gets the same file we do. The width axis sits at 100 for everything in this guide; treat anything below that as a decision, not a default.

The scale

Language coverage

The site runs in sixteen languages. The font files were read character by character against every accented letter those sixteen need, rather than trusting the words "Latin Extended" on a spec sheet. Shown at display weight and at body weight:

One gap. Romanian takes ș ț, comma below, U+0219 and U+021B. Both present. The cedilla forms ş ţ are not: ţ is absent, so legacy Romanian text falls back on that one letter. Convert before layout.

Punctuation localises too. German takes „…“, French « … » with hair spaces, Spanish opens a question with ¿, Polish uses „…”, and the Nordic languages take ”…”. A translated string with English quotes around it is a translated string that nobody finished.

Rules

• Tracking is tied to size. −0.042em above 40 px, −0.034em from 27–42 px, −0.012em at subhead size, zero below that. Tight tracking on 14 px text just makes it hard to read.
• Sentence case everywhere except eyebrow labels. Title Case Headlines Look Like Press Releases.
• Emphasis is weight, not italic. 600 inside body copy. Italic is reserved for a named thing quoted in running text — In beta, a module name, a term being defined.
• Two type sizes per surface is usually enough. A slide with five sizes is a slide nobody reads.

• No Space Grotesk, no Inter, no Poppins, no Montserrat — including in decks assembled by third parties.
• No colour change mid-headline and no gradient text. If a word matters, the sentence should make that obvious.
• No letter-spacing on lowercase text. Ever.

Correct lockups

TEISENDA Studio Engine

TEISENDA Content Engine

Studio EngineIn beta

• Set in Instrument Sans 600, never in the logo's rounded style and never redrawn from the logo artwork.
• "TEISENDA" first, always — on first mention in any document, deck or page. After that, "the Studio Engine" is fine.
• Module names take Title Case because they are proper names. Everything else stays sentence case.
• Status labels — In beta, In development — use Signal Amber and the eyebrow style. They are facts, not decoration; remove them the day they stop being true.

• No separate icon, symbol or colour per module. Two modules with two identities is two brands.
• No "TEISENDA Studio Engine™", no ®, no "by TEISENDA" suffix.
• Do not invent a name outside the Engine pattern. New capability goes inside an existing module until there is a strategic reason it cannot.

What each module is

Descriptions below match teisenda.com as published. When the product moves, the site moves first and this page follows.

The engines that follow

The roadmap on /ueber-teisenda names seven engines. That makes <Noun> Engine a naming system rather than two product names, and it is the reason a new module never gets an invented name of its own.

Only the first two carry a status label. The other five are roadmap and must be described as roadmap.

Use as a hero ground, a slide divider, a social background, a card texture. Keep it behind a solid panel wherever type sits on top — the facets are a surface, not a stage for copy.

The butterfly field

The particle butterfly on teisenda.com is brand property. 20,000 points trace the Temple Fay butterfly curve; the wingbeat is a travelling wave in the shader. One 14 KB file, no dependencies, no build step. Custom element: plain HTML, React, Vue, Svelte, Astro.

A flat violet panel above means the component switched itself off. It does that under reduced-motion, data-saver, slow connections, and on devices under 4 GB RAM or four cores. Intended: it is decoration, and it yields.

Embedding it

Load once, then place the element. It fills its nearest positioned box, so the parent needs position:relative and a height.

<!-- once per page -->
<script src="https://ci.teisenda.com/effects/butterfly-field.js" defer></script>

<!-- then wherever it belongs -->
<section style="position:relative;min-height:100vh">
  <butterfly-field style="position:absolute;inset:0"
    gradient="#2C1B52,#1E1836,#141020"
    color-deep="#2C1B52"
    color-primary="#8250E6"
    color-lavender="#D8CBF2"></butterfly-field>

  <h1 style="position:relative">Your headline</h1>
</section>

These four colour values are the brand configuration, the only one approved for outward-facing work. Omit gradient and the particles draw over the existing CSS background. Everything else has a default.

The files

Three files, nothing zipped. Link the component from here and every site stays on one version.

Icons

2035 icons from Lucide 1.34.0 under the ISC licence, unmodified. They are not a new decision: the icons already on teisenda.com carry exactly this profile — 24×24, fill:none, stroke-width:2, round caps and joins.

138 of them are grouped for the work we actually do — the Curated chip and the eleven beside it narrow the list to those. Each card copies its SVG source or downloads the file. Machine-readable index: /icons/index.json — name, group and byte size for all 2035.

Nothing matches that word.

How to use them

The stroke is currentColor. There is nothing to recolour: set color and the icon follows, which is why an icon never carries a hex value of its own. That only works when the SVG is part of the page — paste the markup, or use the file as a CSS mask. Loaded through <img src> the file is a document of its own, currentColor finds no context and the icon renders black. The grid above uses the mask route, which is why these icons take the colour of their card.

/* the icon takes the colour of its context */
.icon{ width:20px; height:20px; stroke-width:2; }

/* default on dark */
.icon        { color:#B49BF0; }
/* a signal, and only where something needs attention */
.icon--alert { color:#EDA938; }
/* inside a violet button the icon is simply white */
.btn .icon   { color:#fff; }

/* the mask route: an external file that still takes its colour */
.icon--file{ width:20px; height:20px; background-color:currentColor;
             -webkit-mask:url("/icons/brain.svg") center/contain no-repeat;
                     mask:url("/icons/brain.svg") center/contain no-repeat; }

• One size per surface. 20 px next to body copy, 24 px in a card heading, 16 px inside a dense table. Three sizes in one view is two too many.
• Keep stroke-width at 2. The whole set is drawn for it. A thinner stroke at 16 px looks refined in isolation and falls apart in a row of icons.
• An icon labels, it does not decorate. If a heading reads fine without one, leave it out.
• Decorative icons get aria-hidden="true". An icon that carries meaning on its own gets a label instead.

• No filled or duotone icons. This set is one weight and stays one weight.
• No icons from a second library. Two grids and two stroke widths read as two brands.
• No emoji as icons. Same reason as the flags: every platform draws them differently.
• No #8250E6 as icon colour on the dark canvas. It clears the 3:1 for a control, and an icon is closer to text — use #B49BF0.

Flags

271 flags as SVG, 249 of them ISO countries and the rest regions and organisations such as the EU, the UN, England and Scotland. Original artwork with the coats of arms intact, in 4:3 and 1:1. From flag-icons 7.5.0 under the MIT licence, unmodified — LICENSE.txt ships with them.

Machine-readable index: /flaggen/index.json — code, name, continent and byte sizes for all 271. The grid is rendered from it.

Nothing matches that word.

Every card copies its SVG source and downloads both ratios. Sizes run from 178 bytes for Indonesia to 177 KB for Serbia, which is the whole argument for referencing a file rather than pasting markup: <img src="/flaggen/4x3/de.svg" class="flag" alt=""> keeps a flag one file across every surface. Set weight: 1.9 MB for 4:3, 1.9 MB for 1:1.

The CSS that goes with them

Without this the SVG fills its container. flex:none is a guard: flags sit in flex rows, and a flex item with the default flex-shrink:1 gets squeezed out of ratio when the row runs tight. A square flag such as Switzerland shows it first.

.flag{ height:15px; width:auto; flex:none;
       border-radius:2px; display:inline-block; vertical-align:-3px;
       box-shadow:0 0 0 1px rgba(255,255,255,.14); }

15 px is the production size and the cards above show 26 px so the drawing is legible. The 1 px white glow replaces a border: without it a white flag such as Finland or Poland has no edge on a dark ground, and a stroke inside the artwork would be wrong.

• No emoji flags. They render as a different picture in every operating system and some platforms show two letters instead.
• No PNG flags. At 15 px a raster is soft on every second display.
• Do not redraw a flag by hand. These carry the correct coats of arms and the correct proportions; a simplified copy is wrong the moment it is used above about 20 px.
• A flag stands for a country, never for a language. A language menu is labelled Deutsch, not with a German flag: Austria and Switzerland speak it too.

Image library

105 images from teisenda.com, two downloads each: original PNG, and WebP at 1600 px. Use WebP in pages and decks, PNG for editing, print and resampling. The filter searches headline, filename and topic, German and English.

Machine-readable index: /bilder/index.json — slug, headline, keywords and byte sizes for all 105. The grid below is rendered from it.

Nothing matches that word.

Set weight: 188.8 MB as PNG, 3.1 MB as WebP, 61× lighter. Flat gradients are what PNG handles worst and WebP best. Send the WebP unless somebody needs the PNG. Thumbnails are 400 px WebP, loaded on scroll, 429 KB in total.

Rules

• Straight edges, flat fills, visible seams. Every facet is one solid tone. No soft gradients inside a facet, no blur.
• Violet leads, silver-grey supports. The butterfly's left wing is grey for a reason — it gives the violet somewhere to be brightest.
• Illustration over photography for anything abstract. Photography is for people: real customers, real team, real rooms.
• Interface screenshots are the strongest asset we have. A real screen beats any illustration of one.

• No particle field other than butterfly-field. Ours earns its particles by drawing the mark. Star dust, drifting dot clouds and floating sparks draw nothing, and they are the most recognisable generated-website element there is.
• No glowing orbs, no blurred violet blobs, no aurora gradients.
• No stock imagery of brains, circuit boards, robots, humanoid assistants or glowing hands touching screens.
• No AI-generated photography of people presented as our customers or team.

Four principles

Tone of voice, measured

Measured, not aspirational. Read off four published pages of teisenda.com — home, both module pages, about. 115 sentences. Adjectives ("clear, confident, human") give a writer nothing to check a draft against; these numbers do.

Mean 13.8 words against a median of 11, range 3 to 75. That gap is the voice. Mean and median sitting on top of each other means levelled-out rhythm, the most reliable tell of generated prose.

The five habits that produce it

How we address people

16 site languages. Address form is decided per language, not per brand: nine familiar, seven formal. Order below matches the language menu on teisenda.com.

The chosen form holds for every asset in that language: ads, landing pages, email, onboarding, invoices. Never mix registers inside one language. Sie in an ad and du on the page reads as nobody being in charge.

The patterns we do not use

Each of these appears on teisenda.com today. Individually they are fine. Together, in the same rhythm, across every section, they are the signature of generated copy — and a reader who has seen a hundred AI landing pages recognises it in about four seconds.

• The rule of three as a default rhythm. "Faster, cheaper, better." Use two items, or four. Break the beat.
• "Not X, but Y" as a sentence engine. Once per page is a choice. Four times is a tell.
• The em dash as a rhythm device — dropped in every third sentence — for cadence rather than grammar.
• Uniform sentence length. If every sentence in a paragraph is 12–18 words, a machine wrote it or a machine could have.
• Opening on "In today's…", "Whether you're…", "Imagine…" or a rhetorical question.
• Abstract nouns doing the selling: seamless, holistic, powerful, robust, cutting-edge, game-changing, effortless, unlock, elevate, empower, revolutionise, leverage, supercharge.
• Claiming outcomes we cannot measure. No "10× your pipeline". If we haven't measured it with a customer, we don't print it.

Words

One exception worth defending: "Growth Solution" is in the company name. Leave it there. Do not let the word spread into body copy.

Before you publish

• Read it aloud. Anything you'd never say to a customer in a meeting comes out.
• Count the em dashes. More than one per 150 words, cut.
• Check the sentence lengths in one paragraph. If they're all the same, rewrite two.
• Find the specific detail. If there isn't one — a number, a tool name, a real situation — the piece isn't finished.

Website header and hero

ProductAboutBlog

Join the beta

Your marketing, set up in an afternoon.

Four AI providers in one interface, a brand profile both modules read from, and finished pages in five languages. The Studio Engine is in beta now.

Hero at 600 with tight tracking, deck at 400, one violet button. No particles, no gradient text, no mid-sentence colour change.

Slide