# CONTACT Elements Design System

A design system and UI kit reconstructed from the **"Stickersheet 16.1 (Beta Version)"** Figma file for CONTACT Software's **CONTACT Elements** platform — the unified UI shell that hosts their PLM / IoT / project-management products.

## Source

- **Figma:** Stickersheet 16.1 (Beta Version) — mounted read-only in this project. Top-level pages: `Components` (69 frames), `Templates` (16 frames), `Layout-Raster` (13 frames).
- **Product suite referenced in the file** (colour chips and title-bars):
  - **CONTACT Elements** — the shell / primary blue `#0076C5`
  - **Elements for IoT** — pink `#E31E6A`
  - **Project Office** — orange `#F56B16`
  - **CIM Database** — blue
  - **CEDM** — teal `#008196`
- **No codebase was attached.** All tokens and components come from the Figma pseudocode + swatch metadata.

## About CONTACT Software

CONTACT Software is a German enterprise software vendor (Bremen) whose **CONTACT Elements** platform unifies product lifecycle management (PLM), project management, and industrial IoT into a single web application. The UI is data-dense, enterprise-grade, desktop-first, and built around long-lived tabular and tree views, object pages, and modal dialogs. The design language is conservative and readable — the flashy parts are reserved for product accents (the pink IoT, the orange Project Office).

---

## CONTENT FUNDAMENTALS

CONTACT Elements' copy is **professional, literal, and utilitarian**. It's enterprise PLM — every label has to mean exactly one thing, and the UI is used for hours at a time by engineers, project managers and quality leads.

- **Voice:** neutral, factual, third-person. No marketing language in the product. Docs and marketing say "CONTACT Elements" in full, never "Elements" alone.
- **Address:** rarely addresses the user directly. No "you" or "we" in button labels. Copy describes objects and actions ("Create Document", "Edit Properties") rather than speaker or reader ("Create your document").
- **Casing:**
  - **Section headers** (eyebrow labels like `LINK`, `TAGS`, `MENUS`, `TITLE BAR`, `PERSONA`): **ALL CAPS**, bold.
  - **Page titles / display type** (e.g. *Start Page*, *Colors & Fonts*): Title Case, Source Sans Pro Bold/Black at 50–100 px.
  - **Buttons & menu items:** Title Case ("Enter Search Text Here …", "Menu Item", "Submenu").
  - **Helper / placeholder text:** Sentence case with a trailing ellipsis ("Enter Search Text Here …").
- **Tone examples (from Figma):** `Default`, `Primary`, `Info`, `Success`, `Warning`, `Danger`, `IoT` — pure semantic labels, no cutesy naming.
- **Pluralisation & naming:** functional nouns like *Persona*, *Template*, *Class Page*, *Object Page*, *Start Page*, *Navigation*, *Activity Stream*. Compound terms use spaces, not camelCase, in UI.
- **Emoji:** **never used** anywhere in the sticker sheet. Status is conveyed with icon + colour, not emoji.
- **Language:** English UI. Some German legacy words survive in internal asset names (*Deckblatt* = cover sheet, *Raster* = grid), but never in customer-facing copy.
- **Vibe:** calm, confident, German-engineering clean. Lots of whitespace, high-density tables when needed, small type, hairline borders, one strong accent blue.

Do say: *"Create new document"*, *"No results found"*, *"Save changes"*.
Don't say: *"Let's get started!"*, *"Oops, something went wrong."*, *"Your awesome dashboard"*.

---

## VISUAL FOUNDATIONS

### Colour
- **One dominant accent:** CONTACT blue `#0076C5`. Used for logo, primary buttons, links, selected rows, focus rings, icon defaults in the top-bar.
- **Tinted blue `#D7ECFA`** is the workhorse surface for "selected", "info", and highlighted strips.
- **Neutrals do most of the work:** white app background, `#F7F7F7` sub-nav / banner strip, `#E5E5E5` hairlines, `#727272` secondary text, `#191919` body text, pure black for display headings.
- **Product accents** are used to identify a product in title bars and logos (pink IoT, orange PO, teal CEDM). They never bleed into generic UI chrome.
- **Semantic ramps** (pink, red, orange, yellow, green, teal, blue) are six-step light→dark scales, used for tags, banners, status.

### Type
- Single family: **Source Sans Pro** (falling back to **Source Sans 3**). Weights 400 / 600 / 700 / 900.
- **Line-height is 100 %** (tight) almost everywhere — labels, buttons, headings, body. Generous paragraph line-height only appears in helper text.
- Scale jumps hard between body (14–16 px) and display (48–100 px). Mid-sizes (22, 24, 28) exist for section titles.
- No italics; no letter-spacing tricks except a slight positive tracking on ALL-CAPS eyebrows.

### Backgrounds
- **Flat white** for content surfaces. **Flat grey `#F7F7F7`** for the app shell strip and banners.
- **Specimen / sticker cards** use white with `border-radius: 20 px` sitting on a grey canvas.
- **No gradients** in the product UI itself. The only gradient-like moment is the marketing-y Deckblatt (cover page), where a pale blue parallelogram (`#D7ECFA`, rotated ~20°) sits under photographic product imagery.
- **No repeating patterns, textures, noise.**
- **Modal backdrop** is `rgba(0, 0, 0, 0.6)` — a solid scrim, no blur.

### Imagery
- Full-bleed imagery reserved for marketing / cover pages only.
- In-product: small persona avatars (photographic portraits, neutral backgrounds, warm-neutral skin tones, no filters) sized 30–50 px.
- Colour grading on imagery is warm-neutral — not B&W, not heavily saturated.

### Animation
- Unopinionated, subtle. Default `120–180 ms` transitions with an ease-out curve `cubic-bezier(0.2, 0, 0.2, 1)`.
- No bounces, no springs. Hover/focus feels instant.
- Expand/collapse of tree rows fades opacity + translates `4 px`.

### Hover states
- Buttons & menu items: background **darkens** one step (e.g. `#0076C5` → `#005E9E` for primary; transparent → `#F7F7F7` for tertiary/text).
- Links: darker blue, underline persists.
- Icon-only buttons: light-grey `#F7F7F7` background appears.

### Press / active states
- Primary button: `#004D80` (one more step darker). **No shrink / scale transform.**
- Selected menu/nav item: blue-50 tint `#D7ECFA` with `#0076C5` text/icon.

### Focus
- `2 px` outline using `rgba(0,118,197,0.30)`, offset `0`. Sometimes paired with a `1 px` solid `#0076C5` border on the element itself.

### Borders
- Hairline `1 px solid #E5E5E5` for card/table separators.
- Field/input: `1 px solid #727272` (a noticeably darker border than most systems use — a CE signature).
- No double borders; no border-radius above `5 px` on interactive elements (only on the big 20-px specimen cards).

### Shadows
- Used sparingly. Drop shadows `rgba(0,0,0,0.25)` appear on floating menus, dropdowns, and modal dialogs.
- No inner shadows in the product UI.
- No neumorphism, no coloured shadows.

### Protection gradients / capsules
- No protection gradients over imagery.
- Capsules (pill-shaped tags with rounded ends) **are not used**. All tags are small rounded rectangles (`radius 4–5`), not pills.

### Layout rules
- Desktop-first at `1920 × 1080` and `1366 × 768` (both have dedicated raster pages).
- **Fixed top title bar** (48 px tall, `#F7F7F7`).
- **Fixed left app-frame icon rail** (collapsed state). Expanded secondary nav sits next to it (280 px wide).
- Content is a scrollable page; modals appear centred with a dark scrim.
- Row heights in tables: 28–40 px.

### Transparency & blur
- `rgba(0,0,0,0.6)` modal scrim — the only meaningful use of transparency.
- No backdrop-blur anywhere in the sticker sheet.

### Corner radii
- `2 px` — inputs, table cells, input inner elements.
- `4–5 px` — buttons, icon buttons, tags, small chips.
- `20 px` — specimen / design-system cards (only in the Figma sticker sheet, not in-product).
- `50 %` — avatars.

### Cards
- White background, `1 px` light-grey border or no border, optional subtle shadow.
- No coloured left-border accents.
- Radius typically `4 px` in-product; `20 px` only on spec-sheet specimens.

---

## ICONOGRAPHY

CONTACT uses a **proprietary, single-colour, filled-outline icon set prefixed `cis_`** (Contact Icon Set). It's the most-used symbol in the file — `cis_cube` alone appears 311 + 128 + 24 times.

- **Style:** 16 × 16 or 24 × 24 viewbox, solid geometric glyphs, single fill (usually `#191919`, `#727272`, `#FFFFFF`, or the primary `#0076C5`). No two-tone, no gradients, no outlines of outlines.
- **Stroke/weight:** medium-weight filled shapes, reasonably bold — closer to Font Awesome *Solid* than to Lucide or Heroicons (which are stroked).
- **Common icons referenced in Figma:** `cis_cube`, `cis_chevron-right`, `cis_remove`, `cis_check`, `cis_info`, `cis_globe`, `cis_align-middle`, `cis_triangle-bottom`, `cis_triangle-left`, `cis_triangle-right`.
- **Delivery:** SVGs extracted from the Figma file (see `assets/icons/`). When re-coloured they take the parent's `color` via CSS `color:` + `fill="currentColor"`.
- **Emoji:** never.
- **Unicode characters as icons:** occasional (e.g. `×` for dismiss on removable tags — but prefer the dedicated `cis_remove` SVG for consistency).
- **CDN fallback:** where a `cis_*` icon isn't available we substitute **Font Awesome Solid 6** via CDN, same filled visual weight. Flag any substitutions in component files as a `/* FA-fallback */` comment.

See `assets/icons/README.md` for the CDN bootstrap.

---

## Index

- `README.md` — this file
- `colors_and_type.css` — all tokens, typography roles, ready to `<link>` into any HTML
- `fonts/README.md` — font loading instructions (Google Fonts)
- `assets/` — logos and imagery copied from Figma
  - `logo-contact-elements.svg`
  - `brand-image-1.png`, `brand-image-2.png` — cover-page product photography
  - `icons/` — `cis_*` icon SVGs + CDN-fallback docs
- `preview/` — per-token/per-component preview cards wired into the Design System tab
- `ui_kits/elements-shell/` — the single UI kit: a click-through recreation of the CONTACT Elements shell with Title Bar, Navigation, Object Page and Modal
- `SKILL.md` — agent skill manifest, usable in Claude Code

## Caveats

- No real codebase; everything is reconstructed from Figma pseudocode and the metadata summary.
- **Logo is approximated.** The Figma pseudocode referenced a multi-path vector using a yellow-green (`#ADC902`) "L" on a coloured tile; a faithful recreation awaits the official SVG.
- **Source Sans Pro** is loaded from Google Fonts (as Source Sans 3, Adobe's successor). If CONTACT ships licensed WOFFs internally, please drop them into `fonts/`.
- Icon set is the proprietary `cis_*` family; a few glyphs fall back to Font Awesome Solid where a Figma counterpart wasn't extractable.