Skip to content
Sketch FG Sketch FG Docs

Visual Reference Overview

import { Aside } from ‘@astrojs/starlight/components’;

This section catalogs the 61 approved visual references for Sketch FG and maps each one to the functional rules in the Product Specification.

Reading order

Section titled “Reading order”
  1. Read the Product Specification first.
  2. Use these pages to find the relevant visual reference for each workflow.
  3. Use screenshots for composition, hierarchy, spacing, visual language, and the interaction state they demonstrate.
  4. If a screenshot contains sample names, addresses, prices, counts, products, roles, labels, or obsolete controls that conflict with the written specification, the written specification always wins.

Interpretation rule

Section titled “Interpretation rule”

Screenshots define approved visual direction and layout only. Product data, permissions, calculations, field dependencies, and application behavior are governed by the master specification. Placeholder content, incorrect sample data, obsolete labels, or illustrative prices in an image must never override the written spec.

Screenshots

Section titled “Screenshots”

The approved images live in public/screenshots/ of this repository, named NN-screen-name-context.png. Each entry below shows a placeholder frame until its image is uploaded — see public/screenshots/README.md.

Pages

Section titled “Pages”