pg-reports Design System
A visual catalogue of every component, typographic style, and page template used in Paper Giant PDF reports.
Color Palette
Primary purple and secondary gold, with generated tint levels from 10% through 80%.
Gradient Bar
Decorative horizontal gradient strip from primary to secondary. Used as a visual separator between content sections.
Section Header
Large title for content pages. Inter SemiBold at 38pt. Spans full width of the content grid.
The Future of Digital Inclusion
Subtitle
Colored sub-heading within content. Uses the primary colour for emphasis.
Understanding the landscape
Intro Paragraph
Larger opening text that introduces a section. Spans full width above the two-column body text.
Across the country, communities are grappling with rapid technological change. This section examines the structural barriers that prevent equitable access to digital services, and the emerging strategies that are beginning to close the gap.
Body Paragraph
Standard body text. In the report, these flow into two columns via the content grid.
Digital literacy programs have shown measurable impact in regional communities, particularly among older demographics who reported a 34% increase in confidence when using government services online. The key success factor was sustained, face-to-face support from trusted local organisations.
However, infrastructure gaps remain a persistent challenge. In areas where broadband connectivity is unreliable or unavailable, even the most well-designed programs struggle to achieve lasting outcomes. Investment in foundational connectivity must accompany skills-based interventions.
Inline Quote
Bordered pull-quote within content flow. Charis SIL italic in primary colour, with top and bottom rules.
It's not just about having a device. It's about having someone who can sit with you and help you feel like you belong in the digital world.
Full-Page Quote
A large-format quote that occupies an entire page. White text on primary background.
We need to design systems that meet people where they are, not where we wish they were.
Stats Grid
Row of stat callouts with large figures and descriptions. Auto-fits into a responsive grid.
Shifts Cards
Gradient arrow cards showing a FROM → TO transformation. Left border uses a primary-to-secondary gradient. Arrow line is also gradient.
Chart Container
Rounded container for charts with a tinted background. Holds SVG charts or a placeholder.
Image Block
Full-width image container with optional caption. Spans the entire content grid.
Bullet List
Unordered list with primary-coloured bullet markers. Styled consistently with body text.
- Improve broadband infrastructure in underserved regions
- Fund community-led digital literacy programs
- Develop culturally appropriate training materials
- Establish ongoing mentorship and peer support networks
Ordered List
Numbered list using native HTML ordered list styling.
- Conduct a baseline assessment of digital skills across target demographics
- Co-design program content with community representatives
- Pilot the program in three regional locations over six months
- Evaluate outcomes and refine the model for broader rollout
Callout Box
Rounded background panel in three variants: primary tint, secondary tint, and white with border.
Key finding
Programs that combine device provision with sustained, in-person support achieve 2.5x higher engagement rates than device-only interventions.
Recommendation
State governments should allocate dedicated funding streams for community-led digital inclusion programs, separate from infrastructure investment.
Definition
Digital inclusion refers to the ability of individuals and groups to access and use information and communication technologies. It encompasses not just connectivity, but skills, confidence, and motivation.
Page Break Indicator
Invisible element that forces a page break in the PDF output. Shown here as a visual indicator.
Cover Page
Full-bleed cover with title, image area, and logo. Black background with white typography.
Digital Inclusion in Regional Australia
Section Divider
Full-page section break with title on primary background. Title anchored to bottom-left.
The Digital Divide
We need to design systems that meet people where they are.
Content Page Layouts
Five layout variants are automatically selected based on block composition: standard, prose, chart-focus, stats, and mixed.
Section Title
An introductory paragraph that spans the full width of the content area and sets context for the section.
Body text flows into the first column of a two-column grid layout.
Second column of body text continues the narrative alongside the first column.
Dense Text
Single-column layout for text-heavy sections without visual elements.
All body text runs in a single, narrower column for improved readability on long-form content. This layout is selected when a section is primarily paragraphs.
A sub-section heading
Subsequent paragraphs continue in the single column format, maintaining a comfortable reading measure.
Data Insights
Intro text precedes the chart.
Supporting analysis text after the chart.
Additional commentary in the second column.
By the Numbers
Overview
A section mixing charts, stats, and prose.