Portlio

Portlio public docs

Brand Guide

The canonical reference for how Portlio should look, sound, and explain itself in public.

Brand Philosophy

Portlio exists because developer portfolios go stale faster than developer work does. GitHub keeps the real record: repositories, commits, READMEs, languages, stars, links, and active project history. Portlio turns that source of truth into a portfolio that can be reviewed, edited, published, and kept current.

The brand should feel practical, direct, and confident. It should never pretend automation is magic. The product reads public repository data, filters out private repositories, lets the user choose what appears, and writes deployment output only when the user explicitly publishes.

Mission And Vision

Why Portlio exists

Mission

Eliminate manual portfolio maintenance for developers by connecting portfolio content to their real GitHub work.

Where it is going

Vision

Every developer has a portfolio that stays current automatically, without rebuilding pages after every new project.

Core Values

Practical

Every feature should reduce real portfolio maintenance work.

Transparent

Say exactly what data is read, changed, or published.

Developer-first

Honor GitHub workflows and technical users.

Minimal

Keep the path from repository to portfolio short.

Honest

Avoid inflated claims, fake urgency, or buzzwords.

Efficient

Prefer automation where it saves repeated manual steps.

Target Audience

Software engineers

Need their latest work visible without maintaining a separate site.

CS students

Need a credible portfolio for internships and junior roles.

Full-stack developers

Need to show backend, frontend, deployment, and product context in one place.

Career switchers

Need GitHub projects to tell a clear story for recruiters and hiring managers.

Tone Of Voice

Do

  • Your portfolio updates when you push code.
  • You choose which repositories appear.
  • GitHub Pages can take 1-3 minutes to publish after deployment.
  • We filter out private repositories and only display projects you approve.

Do Not

  • Use vague claims like AI magic or 10x career growth.
  • Imply private repositories are imported.
  • Hide that deployment writes to a GitHub repository.
  • Use glossy effects that clash with the flat visual system.

Color Palette

Cream, ink, midnight, and parchment define the core brand. Emerald and teal are used sparingly for action and success states.

Cream

#f3ede1

Light background

Ink

#1a1a1a

Text, borders, shadows

Midnight

#0e0e0e

Dark background

Parchment

#dfd8c6

Dark text and borders

Emerald

#10b981

Primary accent and success

Teal

#14b8a6

Accent gradient partner

Amber

#f59e0b

Warning and billing notices

Red

#ef4444

Errors and destructive states

Typography

Primary UI typeface

Geist Sans

Used for headings, body copy, navigation, buttons, pricing, and all product surfaces.

Technical typeface

Geist Mono

Used for code snippets, file names, technical labels, hex values, and developer-facing details.
InterOutfitSpace GroteskSyneFira CodePlus Jakarta Sans

UI System

Spacing And Radius

Tailwind spacing follows a 4px grid. The app uses a 0.625rem base radius, with rounded-xl for buttons and rounded-2xl for the established Portlio cards.

Borders And Shadows

Structural UI uses 2px ink or parchment borders with flat offset shadows such as 4px 4px 0 0. Avoid blurred drop shadows.

Buttons

Primary buttons are tactile: solid fill, thick border, offset shadow, and a 1px diagonal press movement on hover.

Iconography

Use Lucide stroke icons for standard actions. Keep icons simple, currentColor-based, and sized consistently with nearby text.

No one-note pages

Use emerald, amber, red, and template colors as accents against the core palette.

No cramped text

Use tight hierarchy in tools and generous leading in documentation copy.

Clear actions

Buttons should describe the command and use icons only when the action is obvious.

Brand Assets

Downloadable SVG assets live in the public brand directory.

Primary Logo

Full lockup for neutral surfaces

public/brand/logo.svg

Dark Background Logo

Light lockup for dark surfaces

public/brand/logo-dark.svg

Light Background Logo

Dark lockup for light surfaces

public/brand/logo-light.svg

Monochrome Logo

Single-color lockup

public/brand/logo-monochrome.svg

Icon Only

Mark without the wordmark

public/brand/logo-icon.svg