AUS-CS-DesignTools

Design tools for the Department of Career Services, American University of Sharjah.

Everything here runs in the browser. Nothing to install, nothing uploaded, no accounts.

Open the Design Tools →

The home page links to every tool. Inside a tool, the tabs in the top bar switch between tools and "Career Services" takes you back home.

---

Grid Raster

Converts an image into the Career Services raster pattern and exports it as vector or bitmap. Images are processed locally in your browser and never leave your machine.

Using it

1. Drop, paste, or browse for an image.
2. Choose a raster — Node (the plus glyph) or Grid (squares).
3. Set the scale, then adjust brightness, contrast, and gamma until the tones read well.
4. Pick colours from the core brand or AUS palettes, or type a hex code into the field at the bottom of any colour list to add a custom colour. Custom colours are remembered in your browser and appear in every tool; the ✕ beside one removes it.
5. Export.

Which export to use

SVG is the deliverable for anything printed or placed in a layout. It opens at true physical size in Illustrator, InDesign, Figma, and Inkscape, and stays sharp at any scale.

PNG is for screens, slides, and quick shares. Node rasters are drawn with a 0.25 pt hairline; on large grids that hairline falls below a single pixel and the image softens. The tool tells you when this happens — if you see that warning and need it crisp, export the SVG instead.

Getting good results

The raster is driven entirely by brightness, so what you feed it matters more than any setting. High-contrast images with the background removed work best — see "Preparing source images" in the brand deck for the two prompts that prepare a photo for either mode.

Gamma is the control that matters most. It redistributes the midtones without clipping the shadows or highlights, which is where halftone-style output usually lives or dies. Reach for it before brightness or contrast.

---

Pie Generator

pie-generator.html builds segmented radial diagrams — rings of pie slices, some filled with brand colours and the rest left empty — and exports them as SVG or PNG.

Using it

1. Arc — set how far round the circle the diagram goes (1–360°, with 90/180/270/360 presets) and rotate where it starts. 0° is twelve o'clock; slices run clockwise.
2. Centre — turn on the donut hole and set its size as a share of the radius.
3. Divisions — choose the number of rings and slices. Pieces = rings × slices.
4. Colours — add brand colours and set how many pieces each one fills. Every other piece stays empty. A colour can't take more pieces than are free, and if you reduce the rings or slices, the counts scale down to fit. Filled pieces are scattered at random; Shuffle deals a new layout.
5. Background — any palette colour or transparent, filling the whole work area. It is a preview aid only, like "Outline empty pieces": exports always have a transparent background.
6. Export — "Trim to arc" crops the artwork to the drawn arc; "Full circle" keeps the whole square. SVG is at true size (200 mm across a full circle).
7. Fan-out video — the slices start stacked as one stick and fan out to the finished pie (easeInOutCubic). Set the fan duration, press Play to preview, then MP4 to export: 60 fps, 2160 px on the long side, with a short hold at each end. MP4 has no transparency, so the video uses the background colour and the button stays off while the background is Transparent. Export needs a browser with WebCodecs, such as Chrome or Edge. The file is high-bitrate H.264: flat colours stay accurate, but edges between colours soften slightly.

---

Maintaining this

Every tool is one HTML file at the repository root. The tools load fonts from fonts/ and shared code from lib/, so they need to be opened from the published site rather than from disk.

Shared library — lib/

Code used by more than one tool lives here, so it is written once:

File	Holds
lib/brand.css	fonts, :root tokens, masthead and panel layout, slider, toggle, segmented control, colour select, buttons, notices, licence viewer, responsive rules
lib/brand.js	the Career Services and AUS palettes, luminance and contrast check, control wiring, the colour-select listbox, SVG/PNG download and PNG sizing, the Licences panel
lib/mp4.js	MP4 writing (muxer, used by Video Raster and Pie Generator) and an H.264 frame-by-frame encoder (Pie Generator)
lib/licences.js	the tool licence and both font licences, shown in every tool's Licences panel

index.html (home), raster.html, pie-generator.html and — for the tool tabs only — video.html use it. video.html and event-form.html otherwise still carry their own copies and can move over when next edited.

Brand values — colours, spacing, fonts — live in the :root block at the top of lib/brand.css, and the palettes at the top of lib/brand.js. Rebranding means editing those two places.

Raster behaviour — cell sizes, stroke widths, and the thresholds that decide when a glyph fades out — lives in the constants block at the top of the <script> section. Each constant has a comment explaining what it controls.

Two limits exist to keep the browser responsive: source images are capped at 4000 px on the long edge, and the raster grid at 400 units on the short side. The tool tells you when it applies the second one.

Updating the published tool

Upload the changed tool file over the old one, plus the lib/ folder if it changed. GitHub Pages picks it up within a minute. The header carries a build number so you can confirm which version you are looking at before reporting a problem.

Adding another tool later

Add one HTML file at the repository root, link lib/brand.css, lib/licences.js and lib/brand.js, call CS.toolNav('<file>.html'), and add an entry to CS.TOOLS in lib/brand.js. That one entry puts it on the home page and in every tool's tabs. Then list it in this README.

index.html is the home page. Grid Raster lives at raster.html (it was the site root before the home page existed).

---

Licence and credits

Copyright © 2026 Ahnaf Abdur Rahman. All rights reserved. The American University of Sharjah holds a perpetual, irrevocable, royalty-free licence to use and modify these tools — see LICENSE for the full terms.

Anything you export from the tools is yours to use without restriction or attribution.

Two typefaces are embedded under the SIL Open Font License 1.1: Uncut Sans (© 2022 Kasper Nordkvist) and Geist Mono (© 2023 Vercel, in collaboration with basement.studio). Full texts are in licenses/ and viewable inside each tool. See THIRD-PARTY-NOTICES.md for details.