Template: Visual Token Reference Sheet – Memorres Information Center

Purpose

To document all base tokens (spacing, typography, color, radius, shadows, etc.) that act as the single source of truth for both designers and developers. Tokens ensure consistency, scalability, and easy updates across projects.

Table – Visual Tokens

Token Category	Token Name	Value	Usage Example	Notes
Spacing	Space-1	4px	Small icon padding	Base unit, multiples only
	Space-2	8px	Gaps between form fields	Used across mobile & desktop
	Space-3	16px	Card padding	Default block padding
	Space-4	24px	Section spacing	For larger content blocks
	Space-5	32px	Between modules	Desktop preferred spacing
Typography	Font-Primary	Inter, Regular	Body text	Web/app default
	Font-Heading	Inter, SemiBold	H1–H3	Keep hierarchy consistent
	Font-Size-Base	16px	Paragraph text	Minimum readable size
	Font-Size-Large	20px	Sub-headings	Used for emphasis
	Font-Size-XL	32px	H1 headlines	Landing pages, hero text
Color	Color-Primary	#3B82F6	Primary CTAs	Accessible contrast AA
	Color-Secondary	#6366F1	Secondary CTAs	For supportive actions
	Color-Success	#10B981	Success messages	Confirmations
	Color-Error	#EF4444	Error states	Validation fails
	Color-Warning	#F59E0B	Warnings, alerts	Not for critical errors
	Color-Background	#FFFFFF	Page background	Default light theme
	Color-Text	#111827	Primary text	87% opacity for readability
Radius & Shadows	Radius-Small	4px	Buttons, inputs	Default rounding
	Radius-Large	12px	Cards, modals	Friendly, modern look
	Shadow-1	0 1px 2px rgba(0,0,0,0.05)	Card shadows	Subtle depth
	Shadow-2	0 4px 6px rgba(0,0,0,0.1)	Modal shadows	Elevated depth

Usage Notes

Tokens must be applied consistently in all wireframes and UI files.
Never hardcode values (e.g., “#3B82F6” directly) — always use token name (Color-Primary).
Updates in token sheet → propagate across entire design system.
Export tokens into dev handoff tools (Figma Variables, Style Dictionary, JSON exports).