Visual Brand Guide & Identity Kit

01 — Brand Overview

About Publica Now

Publica Now is a marketplace for independent creators to sell and distribute literary works, music, photography, film, zines, courses, and poetry. The brand stands for creative independence, original work, and removing gatekeepers between creators and audiences.

Mission

Empower independent creators to own their craft and catalog — free from traditional gatekeepers.

Voice

Warm, confident, and approachable. The brand speaks directly to creators and readers with clarity.

Personality

Artistic yet accessible. A blend of editorial elegance (serif headings) and modern simplicity (clean UI).

02 — Logo & Wordmark

Publica Now

The wordmark uses Instrument Serif in italic style, conveying editorial heritage and creative elegance. It is always rendered as text, not a graphic.

PublicaNow

Specifications: Font: Instrument Serif | Style: Italic | Weight: 400 (Regular) | Minimum size: 18px | Clear space: 1x the height of the “P” character on all sides

03 — Color System

Light Mode Palette

A warm, paper-like foundation with a bold burnt orange accent. The palette evokes the warmth of physical books and creative studios while feeling distinctly modern.

Core Colors

Accent Primary

#E05A2B

CTAs, links, highlights, brand accent

Accent Hover

#FF8555

Hover state for interactive elements

Text Primary

#1A1816

Headings, body text, emphasis

Text Secondary

#6B6560

Descriptions, supporting text

Text Tertiary

#A09A93

Placeholders, meta info, captions

BG Primary

#FAFAF7

Main background, warm off-white

BG Secondary

#F0EDE8

Cards, input fields, sections

BG Tertiary

#E5E1DB

Hover states, active elements

Border Subtle

#E0DCD6

Card borders, dividers

Border Visible

#CCC7BF

Button outlines, visible borders

Light vs. Dark Mode

Light Mode

BG Primary#FAFAF7

BG Secondary#F0EDE8

BG Tertiary#E5E1DB

Text Primary#1A1816

Text Secondary#6B6560

Accent Primary#E05A2B

Border Subtle#E0DCD6

Dark Mode

BG Primary#0C0C0C

BG Secondary#161616

BG Tertiary#1E1E1E

Text Primary#F5F0EB

Text Secondary#A09A93

Accent Primary#FF6B35

Border Subtle#2A2725

04 — Category Color System

Content Type Colors

Each content category has a designated color used for badges, tags, and icon accents. These colors are consistent across light and dark modes, using Tailwind's 400 shade for text and a 10-15% opacity tint for backgrounds.

Literary

Music

Photography

Visual Design

Film

Courses

Zines

Poetry

Usage pattern: Text: text-{color}-400 | Background: bg-{color}-500/10 | Border: border-{color}-500/20

05 — Typography

Type System

The brand uses a dual-font system: Instrument Serif for editorial presence and emotional warmth, paired with Inter for clean readability in UI and body text.

Instrument Serif Google Fonts — Regular 400 — Serif

Independent creators.

Original work.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789

H1 / Hero No gatekeepers. 60px / 75px line-height

H2 / Section What are you looking for? 30px / 36px line-height

H3 / Card title Featured works 18px / 24.75px line-height

Usage: Headlines, section titles, card titles, CTA headlines, wordmark. Always weight 400, never bold.

Inter Google Fonts — 400, 500, 600 — Sans-serif

Discover literary works, music, photography, film, zines, and more from creators who own their craft.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789

Body / Large Distribute free works to build your audience. 18px / 28px / 400

Body / Regular No monthly fees, no hidden charges. 15px / 24px / 400

Label / Small Pablo Laurino · Free 13px / 20px / 400

Section Label EDITOR'S PICKS 12px / 600 / 2px spacing

Nav Explore Browse Pricing 14px / 500

Usage: Body text, navigation, buttons, labels, form inputs, descriptions, metadata. Fallback: ui-sans-serif, system-ui, sans-serif.

06 — Illustration Style

Illustration Language

Publica Now's illustrations are a core part of the brand identity. They use a warm, editorial style that blends geometric abstraction with human figures to celebrate creativity across disciplines.

Hero Illustration

A rich, multi-figure composition showing diverse creators at work: a writer, a painter at an easel, a cellist, someone at a laptop, and figures interacting with abstract shapes. Set against a cream/warm beige background with layered geometric forms (arches, circles, rectangles). The scene conveys a bustling creative studio atmosphere.

Creator Avatars

Illustrated portrait avatars in circular frames with warm orange/gold backgrounds. Characters are rendered in a stylized, semi-flat style with warm skin tones and editorial clothing (blazers, creative attire). Each avatar shows expressive poses with geometric accent details (leaves, shapes). Used for "Featured creators" profiles.

Login Page Waves

An abstract, flowing wave composition with organic curved layers. Uses the brand's warm palette in soft gradients: cream, blush pink, muted terracotta, and slate grey. Creates a sense of calm, artistic movement. The waves flow from bottom-left to upper-right with subtle depth layering.

Style Guidelines

Shape language: Geometric abstraction with arches, circles, and organic curves. Flat or semi-flat rendering with subtle gradients for depth. Figures: Stylized human forms with warm, diverse skin tones. No outlines; silhouette-based with selective interior detail. Palette: Constrained to brand oranges, charcoals, creams, and warm neutrals. Composition: Dense, layered scenes with overlapping elements. Vignette-style on cream backgrounds.

07 — UI Components

Key UI Patterns

The interface uses generous rounding, warm neutrals, and the accent orange to create a friendly, approachable feel. Here are the core component patterns.

Buttons

Explore the catalog Start selling

Create your shop

Border-radius: 12px | Primary: filled #E05A2B with white text | Secondary: transparent with border

Cards

Work Title

Creator Name

Free

Border-radius: 12-16px | Border: 1px solid #E0DCD6 | Background: white or #F0EDE8

Search & Inputs

Border-radius: 12px | BG: #F0EDE8 | Border: 1px solid #E0DCD6 | Text: #A09A93 (placeholder)

Dashboard Stat Cards

TOTAL VIEWS

32

PUBLISHED

9

Stats use Instrument Serif for large numbers, uppercase labels in Inter 600

08 — Spacing & Radius

Design Tokens

Consistent spacing and generous border radii give the interface its warm, approachable personality.

Border Radius

8px
Small

12px
Default

16px
Cards

20px
Panels

Full
Avatars

Spacing Scale

4px

8px

12px

16px

24px

32px

40px

48px

60px

80px

09 — Dark Mode

Dark Mode Implementation

Dark mode is toggled via a .dark class on the <html> element (Tailwind dark mode pattern). All color tokens remap automatically through CSS custom properties.

Publica Now

Explore Browse Pricing

Independent creators.

Original work.

No gatekeepers.

Discover literary works, music, photography, film, zines, and more.

Explore the catalog Start selling

Key design notes: The accent shifts from #E05A2B to #FF6B35 in dark mode for better contrast. Background tones use warm charcoal (#0C0C0C, #161616, #1E1E1E) rather than pure blacks. Text uses warm off-white #F5F0EB rather than pure white. The warm undertone is maintained throughout both modes.

10 — CSS Variables Reference

Design Token Reference

Complete CSS custom properties for implementation. Copy these directly into your project's stylesheet.

/* Light Mode (default) */
:root {
  --color-bg-primary: #fafaf7;
  --color-bg-secondary: #f0ede8;
  --color-bg-tertiary: #e5e1db;
  --color-text-primary: #1a1816;
  --color-text-secondary: #6b6560;
  --color-text-tertiary: #a09a93;
  --color-accent-primary: #e05a2b;
  --color-accent-hover: #ff8555;
  --color-border-subtle: #e0dcd6;
  --color-border-visible: #ccc7bf;
}

/* Dark Mode */
.dark {
  --color-bg-primary: #0c0c0c;
  --color-bg-secondary: #161616;
  --color-bg-tertiary: #1e1e1e;
  --color-bg-accent-warm: #1a1410;
  --color-text-primary: #f5f0eb;
  --color-text-secondary: #a09a93;
  --color-text-tertiary: #6b6560;
  --color-accent-primary: #ff6b35;
  --color-accent-secondary: #e8d5b7;
  --color-accent-hover: #ff8555;
  --color-border-subtle: #2a2725;
  --color-border-visible: #3d3835;
}