Visual identity
Grid system
The 8pt grid is the foundation of the entire Buffini visual system. Margins, spacing, typography, logo construction, trail markers, and accent rules all derive from this common unit.
Vertical spacing uses .1111 inch increments.
.1111 inch
Horizontal rule
Horizontal spacing uses .1111 inch increments
Gutter
Margin
Next Section
CTA is 16pt SemiBoldbuffini.com/12pt regular
QRCODE
QR codes
General guidelines
Color
Use Buffini Blue for QR codes. When a QR code is placed on anything other than a white background, place it within a white box to provide sufficient contrast and ensure reliable scanning.
Size for the Application
QR codes should be large enough to scan comfortably at the expected viewing distance. For typical handheld print pieces, the QR code itself should be a minimum of 0.5555 inches, not including any surrounding white space. Use larger QR codes for posters, signage, environmental graphics, and other applications viewed from greater distances.
Digital Signage
For HD event screens, use a QR code approximately 240 px or larger, not including surrounding clear space. Increase the size based on the expected viewing distance, particularly for large-format displays and presentation screens. Always test the QR code on the actual display, or at an equivalent viewing distance, before use.
QR Code sizes for common templates
- Business Card (3.5" x 2") .5555"
- A5 (5.8" x 8.3") .5555"
- Half Page (5.5" x 11") .5555"
- Postcard (6" x 4") .5555"
- A4 (8.27" x 11.69"): .5555"
- Letter (8.5" x 11"): .5555"
- Legal (8.5" x 14"): .5555"
- Tabloid (11" x 17"): .7777"
- Small Poster (12" x 18"): .7777"
- Medium Poster (18" x 24"): 1.1111"
- Large Poster (24" x 36"): 1.5555"
QR codes for digital signage
- Full HD 1920 x 1080px: 240 px square
Margins and gutter
The 8pt grid is the foundation of the entire Buffini visual system. Margins, spacing, typography, logo construction, trail markers, and accent rules all derive from this common unit.
General guidelines
Use consistent margins
Whenever possible, use the margins provided in the templates below. If a layout requires different margins, adjust them in 8 pt (0.1111 inch) increments to maintain alignment with the established 8 pt grid system and preserve a consistent visual structure.
Gutter spacing
Build gutters on the 8 pt grid using 0.1111 inch increments. Favor wider gutters to create breathing room and improve readability. On an 8.5 × 11 inch layout, use 0.2222 inches (2×) or 0.3333 inches (3×) depending on the layout.
Margins for Common Templates
- Business Card (3.5" x 2") .2222"
- A5 (5.8" x 8.3") .3333"
- Half Page (5.5" x 11") .4444"
- Postcard (6" x 4") .3333"
- A4 (8.27" x 11.69"): .5555"
- Letter (8.5" x 11"): .5555"
- Legal (8.5" x 14"): .5555"
- Tabloid (11" x 17"): .7777"
- Small Poster (12" x 18"): .7777"
- Medium Poster (18" x 24"): 1.1111"
- Large Poster (24" x 36"): 1.5555"
Margins Digital Templates
- Standard Mobile 360 x 800px
- iPhone Pro 390 x 844px
- Web Banner 728 x 90px
- Instagram Square 1080 x 1080px
- YouTube Thumbnail 1280 x 720px
- Web Container 1440 x 900px
- Full HD 1920 x 1080px
Layout
General guidelines
- Start with structure, not visuals
- Use consistent columns, margins, and spacing
- Build hierarchy through span and alignment
- Repeat patterns across pages or screens
- Break the grid only when you can justify it. For example, making something stand out is a good reason to break the grid.
- Baseline of call to action lines up with bottom margin
Page setup
Column setup:
- Start with a five- or six-column grid as the default. Adjust only when the content demands it.
- Use six columns for flexibility and modular layouts, use five columns for asymmetrical layouts
- Use fewer columns when the copy needs slightly wider measures
- Let the type measure and content density drive the decision. If a section naturally resolves into five columns, use a five-column grid for that layout.
Baseline grid = Body copy line height
- The baseline grid defines all vertical spacing on the page
- Align all text to the grid
- Align containers and images to the grid at the top, and when possible, align the bottom edge as well.
Header and footer
Always use the same header and footer templates, unless it’s a special case.
Logo baseline
Head margin
Title
Header
Main Content
Secondary Content
Footer
Letter (8.5" x 11")
- Margins: .5555"
- Columns: 6, 5, 4
- Gutter: .2222" or .3333
- Body Copy: 10pt
- Leading: 16pt
- Spacing intervals: 8pt, 16pt, 32pt, 64pt, 128pt
Structure
Header
Align the cap height of the logotype to the top margin. If a product name is present, align it to the baseline of the logotype on the left side of the layout.
Title
Can vary in height and width.
Main content
Use the flexible modular grid to devise an appropriate layout solution.
Secondary content
Supports the main message but is not essential. Secondary content does not have to be at the bottom, it just can’t compete with the main content.
Footer
The footer is locked to the bottom margin and usually contains a CTA
Small flyer (8.5" x 5.5")
- Margins: .4444"
- Columns: 6, 5, 4
- Gutter: .2222" or .3333
- Body Copy: 10pt
- Leading: 16pt
- Spacing intervals: 8pt, 16pt, 32pt, 64pt, 128pt
Tabloid (11"x17")
- Margins: .7777"
- Columns: 6, 5, 4
- Gutter: .2222” or .3333", or .4444
- Body Copy: 14pt
- Leading: 24pt
- Spacing intervals: 8pt, 16pt, 32pt, 64pt, 128pt
Grids for web
Web uses a flexible grid. Start with a column system and a base spacing unit, then scale it across breakpoints. Keep spacing, alignment, and hierarchy consistent as the layout adapts. The goal is clarity and usability across screen sizes without breaking the system.
General guidelines
Control content width
- Do not let text run full width
- Use max-width containers
- Ideal body text width: 60–75 characters per line
Use spacing, not lines, to separate content
- Let whitespace create structure
- Increase spacing to indicate hierarchy
Asymmetric and aligned
- Left-align most content
- Align elements to column edges
- Avoid “floating” elements
- Use consistent line heights
- Use spacing multiples tied to your base unit
- Align components vertically where possible
Spacing intervals: 16px, 32px, 64px, 128px
Example:Eyebrow: 16pxHeadline: 32pxSubhead: 24pxLead paragraph: 32pxParagraph heading: 16pxBody paragraph: 24pxCaption: 16pxMajor section: 64-128px
Header
2 column
3 column
4 column
6 column
12 column
6 column
4 column
4 column
3 column
3 column
3 column
2 column
2 column
2 column
2 column
2 column
Footer
Desktop
(1024-1440px)12 column, 32px margin, 32px gutter
Desktop wide
(1410-1919px)16 column, 48px margin, 48px gutter
Header
2 column
4 column
8 column
4 column
2 column
2 column
2 column
Footer
Tablet
(600-1023px)8 column, 32px margin, 32px gutter
Header
2 column
4 column
2 column
Footer
Mobile
(<600 px)4 column, 16px margin, 16px gutter
Multimedia grids
Multimedia uses a time-based grid. Combine spatial layout with timing, motion, and pacing. Use consistent margins, alignment, and spacing on each frame, and apply a rhythm to transitions and durations. The goal is continuity so the system holds as the content moves.
General guidelines
Extend the grid across time
- The grid is not just spatial. It’s temporal.
- Reuse the same positions for key elements
- Keep titles, text blocks, and graphics anchored to consistent locations
- Avoid repositioning elements without purpose
Use a spacing system
- Define spacing using a base unit
- Keep padding and gaps consistent
- Maintain equal spacing between similar element
Asymmetric and aligned
- Lock alignments to grid columns
- Align elements to column edges
- Avoid “floating” elements
- Use consistent line heights
- Use spacing multiples tied to your base unit
- Align components vertically where possible
Establish rhythm through timing
- Use consistent delays between elements
- Keep timing predictable
Keep it simple
- Reuse the same layout patterns
- One primary element per frame
- Secondary elements support, not compete
Header
Footer
2 column
3 column
1 column
5 column
4 column
Presentation
Canvas: 1920 × 1080Margins: 128pxColumns: 4, 5, 6Gutters: 64px
Spacing intervals: 16px, 32px, 64px, 128px
Lower third
Header
Safe zone
Video
Canvas: 1920 × 1080Margins: 64pxSafe zone: 64px
Spacing intervals: 16px, 32px, 64px, 128px
