# khairinkamarizal/logokit architecture

> Architecture diagram of the GitHub repository khairinkamarizal/logokit, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/khairinkamarizal/logokit
- Repository: https://github.com/khairinkamarizal/logokit

## Overview

LogoKit is a browser-based logo asset-pack generator. The user enters a brand name, uploads and orders logo assets, configures colors and export options, reviews the estimated ZIP contents, then generates and downloads the pack. The generator branches by SVG versus raster input: SVGs receive recolored digital variants and CMYK EPS exports, while raster art is preserved and rendered into supported raster formats. The README documents these export capabilities; sampled generator code confirms its calls into format and packaging utilities, while unsampled step implementations are represented by their exact tree paths.

Main entry points: [`app/pages/index.vue`](https://github.com/khairinkamarizal/logokit/blob/master/app/pages/index.vue) (Wizard coordinator), [`app/utils/generator.ts`](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/generator.ts) (Pack generator), [`app/components/steps/GenerateStep.vue`](https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/GenerateStep.vue) (Export review), [`app/utils/zip.ts`](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/zip.ts) (ZIP creation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_wizard["Brand Setup"]
  node_wizard_page["Wizard coordinator<br/>[index.vue]"]
  node_brand_step["Brand details<br/>[BrandStep.vue]"]
  node_assets_step["Logo assets<br/>[AssetsStep.vue]"]
  node_colors_step["Colors and options<br/>[ColorsStep.vue]"]
  node_step_nav["Step navigation<br/>[StepNav.vue]"]
  node_summary["Job summary<br/>[SummarySidebar.vue]"]
  node_generate_step["Export review<br/>[GenerateStep.vue]"]
  node_tree_preview["ZIP tree preview<br/>[ZipTreePreview.vue]"]
end

subgraph group_generation["Pack Generation"]
  node_generator["Pack generator<br/>[generator.ts]"]
end

subgraph group_formats["Format Processing"]
  node_color_utils["Color logic<br/>[color.ts]"]
  node_svg_utils["SVG processing<br/>[svg.ts]"]
  node_raster_utils["Raster rendering<br/>[raster.ts]"]
  node_eps_utils["CMYK EPS export<br/>[eps.ts]"]
end

subgraph group_delivery["ZIP Delivery"]
  node_zip_utils["ZIP creation<br/>[zip.ts]"]
  node_download["Browser download<br/>[zip.ts]"]
end

node_user(("Brand user"))
node_browser(("Browser"))

node_user -->|"uses wizard"| node_wizard_page
node_wizard_page -->|"renders navigation"| node_step_nav
node_wizard_page -->|"renders step"| node_brand_step
node_wizard_page -->|"renders step"| node_assets_step
node_wizard_page -->|"renders step"| node_colors_step
node_wizard_page -->|"renders summary"| node_summary
node_wizard_page -->|"renders review"| node_generate_step
node_wizard_page -->|"requests pack"| node_generator
node_wizard_page -->|"derives SVG color"| node_color_utils
node_wizard_page -->|"downloads ZIP"| node_zip_utils
node_wizard_page -->|"passes preview data"| node_generate_step
node_generate_step -->|"displays structure"| node_tree_preview
node_generator -->|"checks contrast and names"| node_color_utils
node_generator -->|"parses and recolors"| node_svg_utils
node_generator -->|"renders raster outputs"| node_raster_utils
node_generator -->|"exports print artwork"| node_eps_utils
node_generator -->|"packages generated files"| node_zip_utils
node_eps_utils -->|"converts CMYK"| node_color_utils
node_zip_utils -->|"saves ZIP file"| node_browser

click node_wizard_page "https://github.com/khairinkamarizal/logokit/blob/master/app/pages/index.vue"
click node_brand_step "https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/BrandStep.vue"
click node_assets_step "https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/AssetsStep.vue"
click node_colors_step "https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/ColorsStep.vue"
click node_step_nav "https://github.com/khairinkamarizal/logokit/blob/master/app/components/stepper/StepNav.vue"
click node_summary "https://github.com/khairinkamarizal/logokit/blob/master/app/components/stepper/SummarySidebar.vue"
click node_generate_step "https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/GenerateStep.vue"
click node_tree_preview "https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/ZipTreePreview.vue"
click node_generator "https://github.com/khairinkamarizal/logokit/blob/master/app/utils/generator.ts"
click node_color_utils "https://github.com/khairinkamarizal/logokit/blob/master/app/utils/color.ts"
click node_svg_utils "https://github.com/khairinkamarizal/logokit/blob/master/app/utils/svg.ts"
click node_raster_utils "https://github.com/khairinkamarizal/logokit/blob/master/app/utils/raster.ts"
click node_eps_utils "https://github.com/khairinkamarizal/logokit/blob/master/app/utils/eps.ts"
click node_zip_utils "https://github.com/khairinkamarizal/logokit/blob/master/app/utils/zip.ts"
click node_download "https://github.com/khairinkamarizal/logokit/blob/master/app/utils/zip.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_wizard_page,node_brand_step,node_assets_step,node_colors_step,node_step_nav,node_summary,node_generate_step,node_tree_preview,node_user,node_browser toneBlue
class node_generator toneAmber
class node_color_utils,node_svg_utils,node_raster_utils,node_eps_utils toneMint
class node_zip_utils,node_download toneRose
```

## Components

### Brand Setup

- [Wizard coordinator](https://github.com/khairinkamarizal/logokit/blob/master/app/pages/index.vue): `app/pages/index.vue`
- [Brand details](https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/BrandStep.vue): `app/components/steps/BrandStep.vue`
- [Logo assets](https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/AssetsStep.vue): `app/components/steps/AssetsStep.vue`
- [Colors and options](https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/ColorsStep.vue): `app/components/steps/ColorsStep.vue`
- [Step navigation](https://github.com/khairinkamarizal/logokit/blob/master/app/components/stepper/StepNav.vue): `app/components/stepper/StepNav.vue`
- [Job summary](https://github.com/khairinkamarizal/logokit/blob/master/app/components/stepper/SummarySidebar.vue): `app/components/stepper/SummarySidebar.vue`
- [Export review](https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/GenerateStep.vue): `app/components/steps/GenerateStep.vue`
- [ZIP tree preview](https://github.com/khairinkamarizal/logokit/blob/master/app/components/steps/ZipTreePreview.vue): `app/components/steps/ZipTreePreview.vue`

### Pack Generation

- [Pack generator](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/generator.ts): `app/utils/generator.ts`

### Format Processing

- [Color logic](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/color.ts): `app/utils/color.ts`
- [SVG processing](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/svg.ts): `app/utils/svg.ts`
- [Raster rendering](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/raster.ts): `app/utils/raster.ts`
- [CMYK EPS export](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/eps.ts): `app/utils/eps.ts`

### ZIP Delivery

- [ZIP creation](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/zip.ts): `app/utils/zip.ts`
- [Browser download](https://github.com/khairinkamarizal/logokit/blob/master/app/utils/zip.ts): `app/utils/zip.ts`

### Other components

- **Brand user**
- **Browser**

## Connections

- Brand user → Wizard coordinator: uses wizard
- Wizard coordinator → Step navigation: renders navigation
- Wizard coordinator → Brand details: renders step
- Wizard coordinator → Logo assets: renders step
- Wizard coordinator → Colors and options: renders step
- Wizard coordinator → Job summary: renders summary
- Wizard coordinator → Export review: renders review
- Wizard coordinator → Pack generator: requests pack
- Wizard coordinator → Color logic: derives SVG color
- Wizard coordinator → ZIP creation: downloads ZIP
- Wizard coordinator → Export review: passes preview data
- Export review → ZIP tree preview: displays structure
- Pack generator → Color logic: checks contrast and names
- Pack generator → SVG processing: parses and recolors
- Pack generator → Raster rendering: renders raster outputs
- Pack generator → CMYK EPS export: exports print artwork
- Pack generator → ZIP creation: packages generated files
- CMYK EPS export → Color logic: converts CMYK
- ZIP creation → Browser: saves ZIP file