Themes and custom CSS
The 20 profile presets, five layouts, self-hosted fonts, every theme option, and styling your page with custom CSS using the stable .p-* classes and --p-* variables.
Every profile has a theme: the layout, typography, colors, background, and component styles of the page. You set it in the Theme panel of the profile workspace, and the canvas updates as you go.
Presets
A preset is a complete design, not just a color swap. Pick one and your content is laid out, typeset, and colored the way it was designed; then change anything you like. The preset gallery shows each preset rendered with your own page, so you see the real result before you switch.
| Preset | Layout | Look |
|---|---|---|
| Studio | Stack | The polished default: calm and precise. Dark. |
| Paper | Editorial | A clean reading page for writers, engineers, and designers. Light. |
| Aurora | Card | A dreamy creator card with a softly moving background. Dark. |
| Bento | Bento | A tile grid for people with a lot to show. Light. |
| Neon Grid | Stack | Synthwave. Dark. |
| Terminal | Editorial | A developer portfolio styled like a man page. Dark. |
| Crypt | Stack | Gothic, with glowing embers. Dark. |
| Bubblegum | Stack | Bubbly and loud. Light. |
| Brutal | Stack | Neo-brutalist poster energy. Light. |
| Gallery | Editorial | A white-cube portfolio, images first. Light. |
| Vinyl | Split | A musician landing page: release art on one side, links on the other. Dark. |
| Executive | Split | A business card for consultants and sales. Light. |
| Estate | Card | Realtor and hospitality card. Light. |
| Meadow | Stack | Handmade and garden-fresh. Light. |
| Retro | Editorial | A 70s print magazine. Light. |
| Sunset | Card | A warm, bold creator card. Dark. |
| Mono | Stack | Pure black and white, zero ornament. Dark. |
| Arcade | Bento | A gamer and streamer grid with a now-playing tile. Dark. |
| Linen | Stack | A warm neutral for coaches, food, and wellness. Light. |
| Glacier | Split | A clean tech founder page. Light. |
Several presets also offer the opposite mode, and you can set a page to follow the visitor's system light or dark setting.
Layouts
- Stack: one centered column, the classic link-in-bio shape.
- Editorial: a reading page with your identity at the top and generous type.
- Split: your identity on one side and your content on the other on wide screens, stacked on phones.
- Bento: your links and sections as a grid of tiles.
- Card: a compact contact card, ideal behind a QR code or an NFC card.
Every layout is built phone first and adapts to any screen size.
Customizing
The Theme panel groups every option:
- Colors: background, text, accent, surfaces, and borders. Colors that would be hard to read are flagged with a contrast check.
- Typography: a heading and a body font from the catalog below, plus size, weight, letter case, and spacing.
- Background: solid, glow, gradient, mesh, image, or pattern (dots, grid, lines, noise, synth grid, stars, checker, topographic), with optional grain and a gentle animation (drift, pulse, embers, twinkle, or shift). Animations switch off for visitors who prefer reduced motion.
- Buttons: filled, outline, soft, glass, shadow, brutal, underline, minimal, or tiles; square, rounded, or pill shape; three sizes; and link icons.
- Layout: one of the five layouts, column width, photo shape and size, and where your badges sit.
- Effects: spacing, corner radius, section title style, motion, and whether visitors see the share button, the Save contact button, and a QR code in the share sheet.
You can reset the theme to its preset at any time, or copy a theme and paste it onto another profile.
Fonts
Hep.gg hosts every font itself, so your page loads them quickly and no visitor data goes to a third-party font service. The catalog has 28 families: Bricolage Grotesque, Caveat, Cormorant Garamond, DM Sans, DM Serif Display, Fraunces, Fredoka, Geist, Geist Mono, IBM Plex Mono, Instrument Serif, Inter, Inter Tight, JetBrains Mono, Lora, Manrope, Newsreader, Orbitron, Outfit, Pixelify Sans, Playfair Display, Plus Jakarta Sans, Quicksand, Sora, Space Grotesk, Space Mono, Syne, and Unbounded. Each covers Latin and extended Latin, and emoji always render with the visitor's system emoji font.
Custom CSS
Add your own CSS in the Page panel. It is applied after the theme, so your rules win without needing !important, and it can style the whole page, including html, body, and @keyframes animations.
Target the page with its stable classes and attributes:
| Selector | What it matches |
|---|---|
.p-page | The whole page area |
.p-main | The column or grid that holds your sections |
.p-hero, .p-avatar | The hero block and your photo |
.p-section | Every section |
.p-title | Section titles |
.p-link, .p-btn | Links and buttons |
.p-social | Social icons |
.p-footer | The footer |
[data-section-type=link-list] | Every section of one type (use any section type) |
[data-section-id=<id>] | One specific section |
Theme values are exposed as CSS variables you can read or override:
| Variable | Holds |
|---|---|
--p-bg, --p-fg, --p-muted | Background, text, and secondary text colors |
--p-accent, --p-accent-fg | Accent color and the text color on top of it |
--p-surface, --p-border | Card surfaces and borders |
--p-font-heading, --p-font-body | The two font stacks |
--p-radius, --p-radius-btn | Corner radius for surfaces and buttons |
--p-gap, --p-pad | Spacing between sections and page padding |
.p-link {
border-width: 2px;
}
[data-section-type=social-icons] a:hover {
color: var(--p-accent);
}
body {
background-image: linear-gradient(180deg, transparent, var(--p-surface));
}For safety, @import rules are removed, and url() only loads images from hep.gg (including your uploads), from your page's own address, or small inline data: images. Anything else is dropped.
Pages made before the new themes
Profiles created before the new theme system keep their original look exactly until you choose to change it. Open the Theme panel and pick a preset to switch to the new layouts, fonts, backgrounds, and button styles; undo, or restore a version, brings the original back. On the original layout, custom CSS keeps working the way it always did, and the older --profile-accent and --profile-bg variables still work on every layout.