Reference Guides

Quick-lookup information for common design questions.

Reference guides answer questions in the moment—color values, keyboard shortcuts, file formats, specifications. Unlike tutorials that teach, references provide facts quickly. Build and maintain references for information you look up repeatedly.

Color References

Color Format Conversions

FormatExampleUse
HEX#FF5733Web, CSS
RGB255, 87, 51Digital, screens
HSL11°, 100%, 60%Design tools
CMYK0, 66, 80, 0Print
PantonePMS 172 CSpot color print

Common Conversions

Hex to RGB: Each pair of hex digits = 0-255 value

  • #FF = 255, #00 = 0, #80 = 128

RGB to Hex: Convert each value to two-digit hex

  • 255 = FF, 128 = 80, 0 = 00

Online tools: Use converters for accuracy, especially CMYK and Pantone

Contrast Ratios (WCAG)

LevelNormal TextLarge TextUI Components
AA4.5:13:13:1
AAA7:14.5:1N/A

Large text = 18pt+ regular or 14pt+ bold

Typography References

Standard Type Sizes

Web (pixels):

ElementSize Range
Body16-18px
Small/Caption12-14px
H132-48px
H224-32px
H318-24px

Print (points):

ElementSize Range
Body10-12pt
Caption8-9pt
Headline18-36pt+

Line Height Guidelines

Content TypeLine Height
Body text1.4-1.6
Headlines1.1-1.3
Tight display0.9-1.1
Loose/relaxed1.6-1.8

Line Length

Optimal characters per line:

  • Ideal: 45-75 characters
  • Acceptable: 40-90 characters
  • Minimum: 20-40 for narrow columns

Font Weight Names

WeightNumber
Thin100
Extra Light200
Light300
Regular400
Medium500
Semi Bold600
Bold700
Extra Bold800
Black900

File Format Reference

Image Formats

FormatTypeBest For
SVGVectorLogos, icons, web graphics
PNGRasterGraphics with transparency
JPGRasterPhotographs
GIFRasterSimple animations
WebPRasterModern web (smaller size)
TIFFRasterPrint, archival
EPSVectorPrint production, legacy
PDFBothDocuments, print

When to Use What

Logo files:

  • Vector: SVG (web), EPS (print), AI (source)
  • Raster: PNG (transparency), JPG (photos only)

Web images:

  • Icons/graphics: SVG
  • Photos: JPG or WebP
  • Transparency needed: PNG or WebP

Print:

  • Vector: PDF, EPS, AI
  • Photos: TIFF, high-res JPG
  • Resolution: 300 DPI minimum

Color Profiles

ProfileUse
sRGBWeb, screen
Display P3Modern Apple devices
Adobe RGBPrint workflow
CMYK (various)Print production

Keyboard Shortcuts

Figma (Mac)

ActionShortcut
FrameF
RectangleR
EllipseO
TextT
PenP
MoveV
ScaleK
Component⌥⌘K
Instance⌥⌘B
Auto Layout⇧A
Group⌘G
Ungroup⇧⌘G
Duplicate⌘D
Copy/Paste⌘C/⌘V
Paste style⌥⌘V
Undo/Redo⌘Z/⇧⌘Z
Quick actions⌘/
Zoom to fit⇧1
Zoom to 100%⇧0

Illustrator (Mac)

ActionShortcut
SelectionV
Direct SelectA
PenP
TypeT
RectangleM
EllipseL
Artboard⇧O
Pathfinder⇧⌘F9
Group⌘G
Ungroup⇧⌘G
Arrange front⇧⌘]
Arrange back⇧⌘[
Outline view⌘Y

Photoshop (Mac)

ActionShortcut
MoveV
MarqueeM
LassoL
Magic WandW
CropC
BrushB
Clone StampS
EraserE
TypeT
PenP
Free Transform⌘T
Levels⌘L
Curves⌘M
Merge layers⌘E
New layer⇧⌘N

Size References

Social Media Dimensions (2024)

PlatformProfileCover/HeaderPost
Instagram320×320N/A1080×1080 (square), 1080×1350 (portrait)
Facebook170×170820×3121200×630
Twitter/X400×4001500×5001200×675
LinkedIn400×4001584×3961200×627
YouTube800×8002560×14401280×720 (thumbnail)

Dimensions change—verify current specs

Common Print Sizes

US:

NameSize (inches)
Letter8.5 × 11
Legal8.5 × 14
Tabloid11 × 17
Business Card3.5 × 2

International (ISO):

NameSize (mm)
A4210 × 297
A3297 × 420
A5148 × 210
A6105 × 148

App Icon Sizes

iOS:

  • 1024×1024 (App Store)
  • 180×180 (@3x)
  • 120×120 (@2x)
  • 60×60 (@1x)

Android:

  • 512×512 (Play Store)
  • 48-192dp (various densities)

Favicon:

  • 32×32 (standard)
  • 16×16 (minimum)
  • 180×180 (Apple touch)
  • ICO format for legacy

Measurement Conversions

Points, Pixels, Inches

UnitRelationship
1 inch72 points
1 inch96 pixels (web)
1 point1.333 pixels
1 pixel0.75 points

Print Resolution

DPIUse
72Screen only
150Low-quality print
300Standard print
600+Fine detail/small text

Related