Brand Guidelines

Penvio’s visual identity is built on the Inkwell + Quill concept — a refined, modern take on the craft of document creation.

Logo

The Penvio logo consists of a pen-line icon on a navy background paired with the Penvio wordmark in Fraunces serif.

Icon: Lucide pen-line in white on a #1E3A5F navy rounded square
Wordmark: “Penvio” in Fraunces, 600 weight
Variants: Icon-only (for favicons, app icons) and full (icon + wordmark)
Minimum size: 24px for icon-only, 120px width for full logo
Clear space: Maintain at least the icon width as padding around the logo

Color Palette

Primary Colors

Color	Hex	HSL	Usage
Navy	`#1E3A5F`	214, 52%, 25%	Primary actions, brand identity
Teal	`#14B8A6`	173, 80%, 40%	Success states, accents, completed
Pink	`#F472B6`	330, 86%, 70%	Highlights, badges, secondary accent
Surface	`#F4F4F5`	240, 5%, 96%	Backgrounds, cards, panels

Semantic Colors

Token	Light Mode	Dark Mode	Usage
`--primary`	`#1E3A5F`	`#3B6FA0`	Buttons, links, focus
`--accent`	`#14B8A6`	`#14B8A6`	Success, completion
`--destructive`	`#EF4444`	`#EF4444`	Errors, delete actions
`--background`	`#FFFFFF`	`#18181B`	Page background
`--foreground`	`#18181B`	`#FAFAFA`	Primary text
`--muted-foreground`	`#71717A`	`#A1A1AA`	Secondary text, labels
`--border`	`#E4E4E7`	`#27272A`	Borders, dividers
`--card`	`#FFFFFF`	`#1A1A1A`	Card backgrounds

Navy Scale

Use these shades when you need lighter or darker variants of the primary navy:

Shade	Hex	Usage
50	`#EEF2F7`	Subtle backgrounds, hover states
100	`#D4DFEC`	Selected state backgrounds
200	`#A9BFD9`	Light borders
300	`#7E9FC6`	Borders, secondary elements
400	`#5380B3`	Lighter interactive elements
500	`#3B6FA0`	Primary (default)
600	`#2D5580`	Hover state
700	`#1E3A5F`	Active/pressed state, brand
800	`#152A45`	Dark text on light backgrounds
900	`#0D1A2D`	Darkest variant

Typography

Font Families

Font	Family	Weight	Usage
Fraunces	Serif	600	Headlines, brand text, logo wordmark
DM Sans	Sans	400-600	Body text, UI labels, buttons

Type Scale

Element	Font	Size	Weight	Line Height
Page title	Fraunces	28px	600	1.2
Section heading	Fraunces	22px	600	1.3
Card heading	Fraunces	18px	600	1.4
Body text	DM Sans	14px	400	1.6
Small text	DM Sans	13px	400	1.5
Caption	DM Sans	12px	400	1.5
Button label	DM Sans	14px	500	1.0

UI Patterns

Buttons

Primary: Navy (#1E3A5F) background, white text, border-radius: 8px
Secondary: White background, #E4E4E7 border, dark text
Destructive: Red (#EF4444) background, white text
Ghost: Transparent background, text inherits context color

Status Indicators

Active/Current step: Navy (#1E3A5F)
Completed: Teal (#14B8A6)
Pending/Inactive: Gray (#E4E4E7)
Error/Failed: Red (#EF4444)

Border Radius

Base radius: 12px (--radius: 0.75rem)
Cards and panels: 12px
Buttons and inputs: 8px
Badges and pills: 999px
Logo mark: 16px

CSS Variables

All brand colors are available as CSS custom properties via globals.css:


:root {
  --primary: 214 52% 25%;        /* Navy #1E3A5F */
  --accent: 173 80% 40%;         /* Teal #14B8A6 */
  --background: 0 0% 100%;       /* White */
  --foreground: 240 6% 10%;      /* #18181B */
  --border: 240 6% 90%;          /* #E4E4E7 */
  --ring: 214 52% 25%;           /* Navy focus ring */
  --radius: 0.75rem;             /* 12px base */
}

Use with Tailwind: bg-primary, text-accent, border-border, etc.

Tailwind Extensions

Custom color scales are available in tailwind.config.ts:

teal-50 through teal-950 (accent scale)
pink-50 through pink-950 (secondary accent)
Semantic tokens: primary, secondary, accent, muted, destructive

Next Steps

Introduction - Learn about Penvio’s features
Glossary - Common terms and definitions
Supported Formats - File formats Penvio supports