Amiga User Interface Style Guide

Started by djunod · Thu 2026-10-29 (4 days ago) · in Amiga

31views

Thu 2026-10-29 (4 days ago) · edited

PXL_20220917_155232640~2

One of my first big projects at C= was to write the content of the UI Style Guide.

Lots of meetings and conversations, but in the end it worked out well.

One of my favorite review comments from bix was basically

Too late, this should have come out years ago

~DNJ~

Sat 2026-10-31 (2 days ago) · edited

Found this scan of the Amiga User Interface Style Guide online.

~DNJ~

Sat 2026-10-31 (2 days ago) · edited

Here's the complete pdf...

Amiga_User_Interface_Style_Guide

amiga-user-interface-style-guide.pdf · 69.5 MB

View Download ↓

hmm, looks like I should add a searchable pdf viewer for community.

~DNJ~

Text and lists

**bold**, *italic*, ~~struck~~
## Heading, ### Smaller
- item for a list, 1. item for a numbered one; indent two spaces to nest
- [ ] to do and - [x] done for checkboxes
A blank line starts a new paragraph

Links and quotes

[words](https://...) for a link; another site opens in a new tab
A bare address becomes a link by itself
A link to an Instagram post, a YouTube video or a post on X, on a line of its own, shows it; in a sentence, it shows below
> words to quote

Code and tables

`code` inside a line
A block between fence lines, its language after the first:
```
```php
echo 'hi';
```
```

A table:

| Part | Price |
|------|-------|
| Fan  | $12   |

Pictures

![description](images/name.jpg) - from this site's image library
![description](shared/name.jpg) - from Shared Images, the same on every site here
The words in [ ] describe the picture; a click opens it full size
Several in a grid: see Gallery

Gallery

Pictures between :::gallery and :::, one per line, become a grid that fits the page:

:::gallery min=220 captions
![Front](shared/front.jpg)
![Side](shared/side.jpg)
:::

Options on the first line, any you like:

min=220: narrowest column, px
gap=12: space between, px
ratio=4:3: one shape for all; auto keeps each
fit=contain: whole picture, not cropped
layout=masonry: columns, each keeps its shape
captions: each picture's words in [ ] shown under it

Callouts and prompts

A callout box is a quote starting with its kind:
```
> [!TIP]
> Words in the box.
```
Kinds: NOTE, TIP, IMPORTANT, WARNING, CAUTION
A prompt for an AI is a fence marked ```prompt: its lines wrap and are never coloured as code

In a post

Drop or paste a picture into the box, or use Insert picture: it goes in as ![name](shared/name.jpg)
Drop a video into the box, or use Insert video: it goes in as ![name](files/name.mp4), a player with a picture of it, and shows in Media
community/threads/12 links another thread; on a line of its own it is a card
![Wayne](community/members/wayne-fields.3f2a9c1b0d) on a line of its own is a member's signature card; paste their profile's address

On this site

Pictures from Admin → Images: ![The workbench](images/workbench.png); files from Admin → Files: [The manual](files/manual.pdf), or ![The manual](files/manual.pdf) on a line of its own for a card with a Download button.

Reality Check, Inc.

Forums for Reality Check, Inc.

Amiga User Interface Style Guide

Delete?