{"id":49749946,"url":"https://github.com/conductionnl/design-system","last_synced_at":"2026-05-23T13:00:47.446Z","repository":{"id":354516788,"uuid":"1223514463","full_name":"ConductionNL/design-system","owner":"ConductionNL","description":"Conduction Design System — published at designsystem.conduction.nl","archived":false,"fork":false,"pushed_at":"2026-05-13T09:35:48.000Z","size":19625,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-13T09:39:12.350Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ConductionNL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-28T11:53:52.000Z","updated_at":"2026-05-13T09:34:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ConductionNL/design-system","commit_stats":null,"previous_names":["conductionnl/design-system"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/ConductionNL/design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConductionNL%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConductionNL%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConductionNL%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConductionNL%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ConductionNL","download_url":"https://codeload.github.com/ConductionNL/design-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConductionNL%2Fdesign-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33205415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"online","status_checked_at":"2026-05-19T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-10T09:03:04.315Z","updated_at":"2026-05-19T07:01:36.211Z","avatar_url":"https://github.com/ConductionNL.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Conduction Design System, `theme-conduction-2026`\n\nThe design system for **Conduction**, a Dutch open-source product company that builds an ecosystem of cooperating Nextcloud apps. **ConNext** is Conduction's public product brand for the platform.\n\n\u003e *\"ConNext is a Conduction proposition for Nextcloud.\"*\n\nThis kit documents how Conduction looks, sounds, and behaves on every surface, website, app UIs, presentations, print. Use it as the source of truth for any new artifact.\n\n---\n\n## TL;DR, what makes this brand different\n\n- **Cobalt-first**, not navy. The Dutch flag's official blue (`#21468B`), heavier than legacy SaaS blues, lighter than bank navy. Fills 20% of any surface.\n- **KNVB orange as accent** (`#F36C21`), capped at ~8%. Warm Dutch identity *without* the Rijkshuisstijl government feel. One orange accent per screen, never a primary fill.\n- **Hexagon as a system, not just a logo wrapper.** Bullets, pagination, status badges, avatars, dividers, timeline beads, anywhere a shape *means* something. Functional containers (inputs, buttons, cards) stay rectangular.\n- **Always pointy-top.** No flat-top hexes anywhere in the brand.\n- **Figtree + IBM Plex Mono.** Round, calm, humanist. No serif display, no ligatures.\n- **Nextcloud blue is a guest color**, only in ConNext context (the wordmark, the workspace hex, brand-citation in copy).\n- **Product-first tone.** MKB-direct (\"je\", concrete outcomes), not government-formal (\"u\", abstract ambition).\n\n---\n\n## When you use this kit\n\nThe kit is the visual spine for:\n\n- **`connext.conduction.nl`**, the ConNext public product site (primary surface)\n- **App UIs** built on Nextcloud (OpenRegister, OpenCatalogi, OpenConnector, DocuDesk, MyDash, etc.)\n- **`docs.conduction.nl`**, technical documentation\n- **Presentations, offers, print**, the same palette, type, and hex motif apply\n\nThree brands are visible across these surfaces, each with a defined role:\n\n| Brand | Role | Mark |\n|---|---|---|\n| **Conduction** | The Dutch OSS product company building everything. Always visible on About, footer, contracts. | Hexagon avatar |\n| **ConNext** | Public product brand for the Nextcloud-app ecosystem. Primary on `connext.conduction.nl`. | Wordmark only |\n| **Nextcloud** | Host platform. Cited (not claimed), its blue + name appear in ConNext context. |, |\n\n---\n\n## Browse the system\n\n| Section | What's in it |\n|---|---|\n| [`tokens.css`](./tokens.css) | All design tokens (color, type, spacing, radii, shadows, hex clip-paths) as CSS custom properties. Drop-in. |\n| [`brand/tokens.json`](./brand/tokens.json) | Same tokens in W3C DTCG format, for Style Dictionary, Tokens Studio, Figma plugins. |\n| [`brand/assets/`](./brand/assets) | Conduction hexagon avatar (3 variants: cobalt-on-white, white-on-cobalt, transparent). |\n| [`preview/`](./preview) | Visual cards showing every token in context, type ramp, color, spacing, components, brand. **Start here:** [`preview/index.html`](./preview/index.html). |\n| [`preview/components/`](./preview/components) | Section-level building blocks (hero, platform overview, apps grid, pipeline flow, stats strip). Gallery: [`preview/components.html`](./preview/components.html). |\n| [`preview/pages/`](./preview/pages) | Full-page layouts composed from components (apps catalogue, apps grid, solution page). Gallery: [`preview/pages.html`](./preview/pages.html). |\n| [`preview/identity/`](./preview/identity) | Verbal brand foundation, values, audience, products, voice, visual rationale. Gallery: [`preview/identity/index.html`](./preview/identity/index.html). |\n\n---\n\n## Content fundamentals\n\n### Voice, product-first, MKB-direct\n\nWe shifted from *consultancy* to *product company*, and from *government-first* to *MKB-first*. The voice follows.\n\n| Avoid | Prefer |\n|---|---|\n| Formal \"u\", third-person | Direct \"je\", \"jij\" |\n| Abstract ambition (\"digital transformation\") | Concrete outcome (\"install OpenCatalogi in 2 minutes\") |\n| Process-centric (\"our implementation methodology\") | Result-centric (\"this app solves this problem\") |\n| Service-provider language | Self-aware product language (\"we built X, and it works\") |\n| Jargon as competence-signal | Jargon only when truly necessary, with explanation |\n| Long, complete sentences | Short sentences, white space, scannable |\n\n**Banned phrases** (untranslatable Dutch consultancy clichés): *digitale transformatie*, *ketensamenwerking*, *waardevolle inzichten*, *samen werken we aan*. If you write one, delete the sentence and rewrite as a concrete result.\n\n### Apps vs Solutions, terminology\n\nThis distinction holds across all communication:\n\n- **App** = software we build and ship. Concrete, installable. *OpenCatalogi*, *OpenRegister*, *DocuDesk*.\n- **Solution** = what a customer achieves with one or more apps. *WOO compliance*, *zaakafhandeling*, *softwarecatalog*.\n\nNever write \"our WOO app\", there isn't one. Write \"our WOO solution, built on OpenCatalogi and OpenConnector.\"\n\n### CTA hierarchy, download-pressure, not upgrade-pressure\n\nThe primary CTA on every product page is **\"Install from Nextcloud app store.\"** Always. Never \"Get started\", \"Sign up\", \"Start trial\". No urgency tactics, no exit-intent popups, no upgrade nags. All apps are free; Support is optional and lives outside the marketing site.\n\n| Rank | CTA |\n|---|---|\n| 1 | Install from Nextcloud app store |\n| 2 | Try the demo |\n| 3 | Read the docs |\n| 4 | View on GitHub |\n| 5 | View Support tiers \u0026 pricing |\n| 6 | Contact us *(footer only)* |\n\n---\n\n## Visual foundations\n\n### Color proportion (the 70/20/8/2 rule)\n\n| Share | Color | Use |\n|---|---|---|\n| **70%** | White `#FFFFFF` | Background, breathing room |\n| **20%** | Cobalt `#21468B` | Brand, structure, body text, primary CTAs |\n| **8%**  | KNVB orange `#F36C21` | Accents, focus rings, hover, one badge per screen |\n| **2%**  | Vermillion `#AE1C28` | Errors, destructive only |\n\n**Plus** Nextcloud blue `#0082C9` (~5% in ConNext context only): the *Next* in the wordmark, brand-citation of \"Nextcloud\" in copy, the workspace hex on platform diagrams.\n\nCobalt-on-white = **9.05:1 contrast (WCAG AAA)**, yes, you can use cobalt for body text.\n\n### Hexagon as a system\n\nThe hexagon is not just the logo wrapper, it's a recurring shape that signs every Conduction surface.\n\n| Use a hex for | Keep rectangular |\n|---|---|\n| List bullets | Inputs, textareas, selects |\n| Pagination, step indicators | Buttons (with subtle radius) |\n| Status badges (stable / beta / experimental) | Modals, dialogs, drawers |\n| Category tags, filter chips | Content cards (the *content* gets the hex; the card stays rectangular) |\n| Avatars (hex-clipped portraits) | Tables |\n| Section dividers (line broken by a hex) | Code blocks |\n| Timeline beads, ratings, empty-state icons | |\n\n**Rule**: shapes that *indicate* (status, order, category) are hex. Shapes that *do* (typed in, clicked, read inside) are rectangular.\n\n**Orientation**: always **pointy-top**. No flat-top variants anywhere.\n\n### Typography\n\n| Role | Font | Weights |\n|---|---|---|\n| Body + headings | **Figtree** | 400 / 500 / 600 / 700 |\n| Code + monospace | **IBM Plex Mono** | 400 / 500 |\n\nBoth OFL-licensed via Google Fonts. Headings 600/700, body 400, line-height 1.5 for body and 1.2 for headings. No italics for emphasis, use weight or color. No second display font; Figtree 700 is enough.\n\nType ramp (px): `12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 48`.\n\n### Illustration style, flat-isometric hex-prism\n\nAll illustrations across all surfaces use the **flat-isometric hex-prism** style (reference: honeycomb.io platform diagrams). Hexagons extruded into prisms from a ~30° isometric angle, flat color faces (no gradients, no lighting), cobalt-dominant with KNVB-orange accents and pastel category colors. **No people, no faces, no characters.** White background, subtle 2D drop-shadow for depth.\n\nFor diagrams that need humans (About, testimonials), prefer text-only or abstract hex-figures, never stock-photo-style filled vector characters.\n\n### What we never do visually\n\n- ❌ Stock photos of \"diverse team meeting\", handshakes, whiteboards\n- ❌ 3D renders, gradient backgrounds. Solid fills only, no exceptions, Nextcloud blue included.\n- ❌ Other shades of blue on the logo\n- ❌ Orange as a primary button fill (cobalt owns that)\n- ❌ Two orange accents on the same screen\n- ❌ Flat-top hexagons\n- ❌ Emoji as decoration in product UI\n- ❌ Italics for emphasis\n- ❌ \"Get started\", \"Sign up\", trial-urgency CTAs\n- ❌ Inter, Roboto, Arial, Fraunces, system-font stacks (we have Figtree)\n\n---\n\n## Iconography\n\n**Lucide** ([lucide.dev](https://lucide.dev)) is the standard icon library, ISC-licensed, line-style, broad peer adoption. Use stroke-width 2, 24px default size, `currentColor` for tinting. Icons are visual aids, not load-bearing, every icon-only button gets an `aria-label`.\n\nFor app icons specifically: each app gets its own glyph **inside the pointy-top hexagon wrapper** in `brand/assets/`. App glyph hex fill is **cobalt**, **cobalt-700**, **white-on-cobalt outline**, or **vermillion**. Never orange (orange is accent, not container). Never solid Nextcloud blue, that's a *guest color* reserved for the brand-word \"Nextcloud\" in copy and the workspace hex on platform diagrams, not for Conduction-built apps. Nextcloud blue is always solid `#0082C9`, never a gradient.\n\n---\n\n## Brand citation: \"Next\" in Nextcloud-blue\n\nThe `.next-blue { color: var(--conduction-color-brand-nextcloud); }` utility colors three (and only three) things:\n\n1. The **\"Next\"** half of the **ConNext** wordmark, always.\n2. The brand-word **\"Nextcloud\"** wherever it appears in copy.\n3. Idiomatic **\"next\"** when it's directly about Nextcloud-as-platform (*\"take Nextcloud to the [next] level\"*).\n\n**Do not** apply it to functional \"next\" (next page, next year, next step) or letter-strings inside other words (index, annexed). Brand citation must remain deliberate.\n\n---\n\n## Index of files\n\n```\nconduction-design-system/\n├─ README.md                          ← this file\n├─ tokens.css                         ← CSS custom properties (drop-in)\n├─ brand/\n│  ├─ tokens.json                     ← DTCG format (Style Dictionary, Tokens Studio)\n│  └─ assets/\n│     ├─ avatar-conduction.svg            ← cobalt, transparent bg\n│     ├─ avatar-conduction-on-white.svg   ← cobalt on white (default)\n│     └─ avatar-conduction-on-blue.svg    ← white on cobalt (inverse)\n├─ preview/\n│  ├─ index.html                      ← live overview of all design system cards\n│  ├─ type.html                       ← Figtree + IBM Plex Mono ramp\n│  ├─ colors.html                     ← palette swatches with usage rules\n│  ├─ spacing.html                    ← spacing scale, radii, shadows, hex shapes\n│  ├─ components.html                 ← buttons, badges, app cards, hex pagination + page-level components\n│  ├─ brand.html                      ← logos, ConNext wordmark, brand citation\n│  ├─ pages.html                      ← gallery of full-page layouts\n│  ├─ components/                     ← page-level component HTML files\n│  │  ├─ hero.html                        ← hero w/ hex-prism ecosystem cluster\n│  │  ├─ platform-overview.html           ← platform-as-honeycomb visual\n│  │  ├─ apps-grid.html                   ← filterable apps grid\n│  │  ├─ pipeline-flow.html               ← horizontal hex-prism pipeline\n│  │  └─ stats-strip.html                 ← four-up headline numbers band\n│  ├─ pages/                          ← full-page HTML layouts\n│  │  ├─ apps-catalog.html                ← filterable apps catalogue page\n│  │  ├─ apps-grid.html                   ← compact apps grid alternative\n│  │  └─ solution-page.html               ← long-form solution writeup w/ sticky aside + solution hex\n│  └─ identity/                       ← verbal brand foundation\n│     ├─ index.html                       ← identity gallery\n│     ├─ foundation.html                  ← values, what we build, the triad\n│     ├─ audience.html                    ← MKB / Gov / Dev tiers\n│     ├─ products.html                    ← apps × solutions, taglines, architecture\n│     ├─ voice.html                       ← registers, rewrite recipes, banned phrases\n│     └─ system.html                      ← visual rationale (why cobalt / Figtree / hex)\n└─ SKILL.md                           ← how to invoke this design system\n```\n\n---\n\n## Local development\n\nThe site is plain static HTML, no build step, no runtime. To work on it locally with the same paths as production (`https://designsystem.conduction.nl/` redirects to `preview/`), serve the folder over a local HTTP server. Don't open files via `file://`, the root redirect and a couple of relative paths only behave correctly under HTTP.\n\n**Recommended, VS Code Live Server.** Install the [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) (Ritwick Dey), then right-click [`index.html`](./index.html) → **\"Open with Live Server\"** (or click **\"Go Live\"** in the status bar). The browser opens at `http://127.0.0.1:5500/` and auto-reloads on every save.\n\n**One-line alternatives if you don't use VS Code:**\n\n```bash\npython3 -m http.server 8000     # zero install on most Linux/macOS\nnpx serve -l 8000               # if you have Node\nphp -S localhost:8000           # if you have PHP\n```\n\nThen open `http://localhost:8000/`. Live reload only with VS Code's extension or `npx live-server`.\n\n**Notes:**\n- Google Fonts (Figtree + IBM Plex Mono) are CDN-loaded by [`tokens.css`](./tokens.css). Offline they fall back to system fonts.\n- The site is published from `main` via GitHub Pages, push to `main` and changes go live within ~30 seconds.\n\n---\n\n## Provenance\n\nBuilt from the canonical Conduction brand sources:\n\n- [`BRAND.md`](https://github.com/ConductionNL/.github/blob/feature/brand-2026/BRAND.md), what \u0026 how\n- [`DESIGN.md`](https://github.com/ConductionNL/.github/blob/feature/brand-2026/DESIGN.md), why (rationale, color comparison tables, font choices)\n- [`brand/tokens.json`](https://github.com/ConductionNL/.github/blob/feature/brand-2026/brand/tokens.json), DTCG tokens\n- [`briefs/website/visual-motifs.md`](https://github.com/ConductionNL/.github/blob/feature/brand-2026/briefs/website/visual-motifs.md), hex motif catalog, illustration style, per-section treatments\n\nTheme version: `theme-conduction-2026` · Scope A (color + typography) · Spacing/radii/shadows proposed in this kit, not yet ratified upstream.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconductionnl%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconductionnl%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconductionnl%2Fdesign-system/lists"}