# Ankra — Intelligent by design

Complete platform redesign concept · 8 September 2026

## Open the work

Open **index.html** in a browser to browse, search, and explore all 170 frames. No installation is needed. The gallery works locally; navigation links demonstrate proposed flows and never operate live infrastructure.

For the editable Figma version, use the importer below. For the quickest visual import, drag **ANKRA-COMPLETE-BOARD.svg** into a Figma Design canvas.

## What's included

| Deliverable | Contents |
| --- | --- |
| ANKRA-COMPLETE-BOARD.svg | One 7,680 × 43,650 px board, arranged into 11 chapters |
| boards/ | 11 smaller chapter boards for easier import and review |
| screens/ | 170 individual vector frames |
| figma-importer/ | Offline development plugin that creates native editable Figma artwork |
| index.html | Searchable interactive gallery and linked walkthrough |
| DESIGN-SYSTEM.md | Identity, typography, tokens, layouts, interaction, accessibility, and AI rules |
| AUDIT.md | Existing-platform findings, evidence levels, and review limitations |
| HANDOFF.md | Workflow contracts, migration approach, and implementation acceptance criteria |
| route-coverage.csv | All 252 discovered live route patterns, plus one local-only route, mapped to designs |
| assets/ | Proposed SVG brand marks and lockups; Inter webfont and its license |
| design-tokens.json / .css | Color, spacing, radius, and typography tokens, including dark theme |
| preview/images/ | Browser-rendered presentation images of key screens |
| scripts/ | Reproducible vector generation and validation sources |
| qa/ | Build, browser, semantic-contrast, and importer-simulation reports |

There are 141 product/state frames; the remaining 29 cover direction, foundations, components, reporting, and route coverage. The design includes eight dark-theme examples and two mobile frames. Shared resource patterns intentionally cover multiple Kubernetes kinds and provider variants; this is not 252 separate bespoke page layouts.

## Import editable artwork into Figma

1. Unzip the package and keep the **figma-importer** folder intact.
2. Open a new, empty **Figma Design** file in the Figma desktop app.
3. Open **Plugins → Development → Import new plugin from manifest…** and select `figma-importer/manifest.json`.
4. Run **Ankra — Complete redesign importer** from Plugins → Development.
5. Choose **Complete board, system, and route coverage**, then **Build the Ankra design**. Keep the plugin open until the completion message appears. The smaller **Core walkthrough** is useful for a first test.
6. Two pages are created: **Ankra / Complete redesign** and **Ankra / Shared components**. Select the `overview` frame and use Present to explore the linked experience.
7. Rename and save the Figma file in your workspace. If you need a `.fig` archive, export a local copy from Figma after importing.

This follows Figma's documented [development-plugin import workflow](https://help.figma.com/hc/en-us/articles/360042786733-Create-a-plugin-for-development). No Community publication, Ankra credentials, npm install, or API token is required by this importer. Its network permission is set to `none`.

### If Figma asks for a plugin ID

The supplied manifest intentionally does not invent a Figma-issued ID. Create a new development plugin named **Ankra redesign** using the **Custom UI** template. Copy the generated manifest's `id` into the supplied `figma-importer/manifest.json`, preserving its other fields, then import that manifest again. Figma assigns IDs through its new-plugin workflow; see its [manifest documentation](https://developers.figma.com/docs/plugins/manifest/) and [quickstart](https://developers.figma.com/docs/plugins/plugin-quickstart-guide/).

### What remains editable

Text is native Figma text. Surfaces, vector paths, charts, and diagrams remain layered. Buttons and status controls use shared components with editable label properties and horizontal auto layout. Navigation is also shared. Text styles and semantic colors are reusable. Screen layouts use explicit coordinates to preserve the art direction; they are not fully responsive auto-layout templates.

The importer creates light and dark color modes when supported. If the file cannot add a second mode, dark frames receive fixed dark colors and separate dark control masters. See Figma's [variable collection API](https://developers.figma.com/docs/plugins/api/VariableCollection/) for mode restrictions.

Inter and Roboto Mono are requested by name. If Roboto Mono is unavailable, the importer falls back to Inter. Check font availability and line wrapping in Figma after import. The bundled Inter WOFF2 serves the browser preview; it is not a desktop font installer.

### SVG alternative

Drag the complete board into a blank Design canvas, or start with a file in **boards/**. Individual screens are in **screens/**. SVG import is the visual fallback; do not expect it to create shared components, variable bindings, auto layout, or prototype connections. For those, use the native importer.

## Suggested review sequence

1. Direction: `cover`, `principles`, `architecture`.
2. Brand/system: `brand-mark`, `brand-colors`, `typography`, `layout-system`, `components-ai`.
3. AI operating loop: `overview` → `ai-home` → `ai-chat` → `ai-investigation` → `ai-plan` → `ai-execution`.
4. Delivery: `applications`, `app-overview`, `app-deploy`, `stack-builder`, `stack-review`.
5. Operations: `cluster-overview`, `resources`, `security`, `cost`.
6. Trust and resilience: autonomy/settings, access controls, dark examples, mobile, and recovery states.
7. Audit and route coverage to validate the migration with product owners.

## Validation and boundaries

The generated SVGs were browser-rendered and checked for text width, overlap, frame bounds, broken navigation targets, and browser errors. The importer passed a local Figma API contract simulation. **An actual import inside a live Figma editor has not been performed in this environment.** The package is an importable design handoff, not an already-saved `.fig` file or a published Figma URL.

All displayed users, resource names, prices, metrics, and operational outcomes are illustrative. AI verification is proposed behavior, not a claim about actions taken on your clusters. No live infrastructure, platform configuration, or production UI was changed.

The platform review combines all-route inventory, local source inspection, server-rendered route checks, and selected hydrated live-page reviews. Not every resource instance, role, subscription tier, or error path was exercised live. **AUDIT.md** makes those distinctions explicit.

Plugin discovery did not expose a usable Figma authoring connection in this session, so this handoff uses an offline native importer and SVG exports.

## Rebuild or extend

From the unzipped **ankra-next** folder:

```sh
node scripts/build.mjs
node scripts/verify-design.mjs
node scripts/verify-importer.mjs
node scripts/serve.mjs
```

Then open `http://127.0.0.1:4177/`. Build and importer simulation require only Node.js. Browser QA additionally uses Playwright available in the original portal workspace; its dependency path is documented in HANDOFF.md. Rebuilding the shared package uses the sanitized route-coverage snapshot, not private live-page captures.

Original design and proposed brand artwork are provided for Ankra's review. Inter retains its included SIL Open Font License. The redesigned mark is a proposal, not an assertion that the current brand has been replaced.
