Pico Corp

Pico Corp (hugo-theme-pico-corp) is a minimal corporate and agency theme for Hugo, built on Pico CSS 2, that ships composable page sections, a case-study system and a complete demo site with no build step, no JavaScript framework and no webfont requests.

What is Pico Corp?

Pico Corp is an MIT-licensed Hugo theme for corporate and agency websites, developed by PhantomPixelDev on GitHub. It takes TOML site configuration, YAML front matter and YAML files in data/ as input, and outputs a static site produced by Hugo's asset pipeline — concatenated, minified and fingerprinted CSS and JS, plus build-time image processing.

The theme needs Hugo 0.146.0 or newer (tested on 0.161.1) and works with the standard Hugo edition, because there is no Sass and therefore no need for Hugo extended. No Node, package manager or build step is involved. Pico CSS 2.1.1 is vendored at assets/css/pico.min.css, and eight small theme stylesheets layer on top of it. A demo site for the fictional Berlin product studio Northstar Digital lives in exampleSite/ and doubles as the reference configuration: home page, about, six services, six case studies, a journal with categories and tags, contact and legal pages.

Key Features

• Hugo plus Pico CSS 2 stack — one stylesheet and one script, concatenated, minified, fingerprinted and served with subresource integrity in production; roughly 4 KB of deferred vanilla JavaScript and no webfonts.
• Composable page sections — order hero, logos, services, work, about, stats, process, testimonials, pricing, faq, timeline, values, team, content and cta blocks from a page's front matter; an unknown section type fails the build with a message naming the page.
• Case-study and service layouts — case studies carry client, category, year, duration, challenge, solution, results, stats, technologies, gallery, testimonial and related projects, ordered by weight then date; services carry benefits, process, deliverables, stack and related work.
• Journal system — categories, tags, pagination, reading time, author bylines keyed in data/authors.yaml, an optional table of contents, and related articles from Hugo's built-in related-content index.
• Data-driven content — clients.yaml, stats.yaml, values.yaml, process.yaml, testimonials.yaml, pricing.yaml, faq.yaml, team.yaml, timeline.yaml and authors.yaml each feed their matching section.
• Seven shortcodes — button, callout, stats, figure, gallery, faq and testimonial, all in angle-bracket form so they render their own inner markdown without enabling unsafe Goldmark rendering.
• Image pipeline — a single utils/image.html partial emits a picture element with a WebP source, original-format fallback, srcset at 480/768/1200/1600 px, intrinsic width and height, and lazy loading except for a priority hero image.
• SEO and dark mode — Organization, Article and BreadcrumbList JSON-LD (with any schema.org Organization subtype), Open Graph and X cards, sitemap, RSS and a production-gated robots.txt; light and dark token sets driven by system preference, a localStorage toggle, or a forced scheme, with a ten-line inline script that applies the stored choice before first paint.
• Contact form and i18n — the contact form posts to Formspree, Netlify Forms (a netlify flag adds the expected attribute and honeypot) or your own endpoint, and every user-facing string lives in i18n/en.toml.

Who should use Pico Corp?

• Agencies and design studios — publish services, client case studies with measured results and team pages from one Hugo site without maintaining a JavaScript stack.
• Freelance Hugo developers — start client work from a theme whose demo configuration (exampleSite/hugo.toml) already sets every parameter the theme reads.
• B2B consultancies and professional-service firms — run an announcement bar, header CTA, pricing section, FAQ and contact form that can point at Formspree or Netlify Forms.
• Content-led teams — write long-form journal posts with authors, tags, reading time and related articles while keeping the marketing pages in the same repository.

What can you do with Pico Corp?

• Launch an agency site: assemble home, about and section index pages from a front-matter sections list, then restyle by setting primaryColor, primaryColorDark, radius and headingFont instead of editing CSS.
• Showcase client results: build case studies with challenge, solution, statistics, a gallery and a pulled quote, and surface the best few on the home page with the work section's featuredOnly and feature options.
• Run a service catalogue: create one page per service from the services archetype, with benefits, process phases and deliverables, then cross-link services to related work.
• Add measured performance and analytics later: ship with zero third-party requests, then enable Plausible or Google Analytics by filling in a single parameter.

How does Pico Corp work?

Install Pico Corp either as a Hugo module (add the module import path to hugo.toml and update with hugo mod get -u) or as a Git submodule in themes/ with theme = "hugo-theme-pico-corp". Sections and landing pages are assembled from a sections list in front matter, where each entry's type maps to a partial in layouts/_partials/sections/ and the remaining keys configure that block. Build the site with hugo --gc --minify; hugo.IsProduction gates minification, fingerprinting and analytics, so a plain build is already a production build. Netlify, Cloudflare Pages and GitHub Pages configurations are documented, including a netlify.toml that pins HUGO_VERSION.

FAQ

What Hugo version does Pico Corp require?

Pico Corp requires Hugo 0.146.0 or newer because it uses the current template layout with _partials/ and flat kind templates; it is tested on 0.161.1. The standard Hugo edition is sufficient — there is no Sass, so Hugo extended is unnecessary, and no Node or package manager is needed.

Is Pico Corp free?

Yes. Pico Corp is released under the MIT licence, and Pico CSS, vendored at assets/css/pico.min.css, is also MIT licensed. The demo photography comes from Lorem Picsum and is placeholder imagery only, so you should replace everything in assets/images/ before launching a real site.

Does Pico Corp need JavaScript or a build step?

No build step is required beyond running Hugo. Roughly 4 KB of deferred vanilla JavaScript handles the scheme toggle and mobile navigation; the page stays readable without it, FAQs are native details elements, and no third-party requests are made until you set an analytics parameter.

How do I change the colours and fonts in Pico Corp?

Set primaryColor, primaryColorDark, radius and headingFont under [params], which are compiled into the generated stylesheet. For deeper changes, add assets/css/custom.css in your own site; it is appended last, so overriding tokens such as the container width or display font wins.

Can I use Pico Corp for a non-agency website?

The layouts are content-type driven rather than company-specific: case studies, services and journal posts are separate archetypes with their own front matter, and no company detail is hardcoded in a template. A studio, consultancy or in-house product team site can drop the sections it does not need and still use the same contact, legal and SEO scaffolding.