Brand & design system
Experience Puerto Rico
Thoughtfully guided tours on the island we love.
Version 1.0.0  Â·  Canon 1.2.1  Â·  iheartprtours.com
I Heart PR Tours | Brand System01
Name

I Heart PR Tours

State where the name came from and what its parts carry.

Written form

Use I Heart PR Tours for the formal company name and identity applications. IHPRT is approved for casual shorthand and general prose after the full name is established. Never use IHPRT as a substitute logo or alter the supplied identity artwork.

Parent
None
Register
warm-professional
Flourish
Declined
Casing
Title case in prose, lowercase in identifiers

Product principle

Experience Puerto Rico

Personality
TraitExpressionAvoid
WarmInvites guests into the Puerto Rico we loveGeneric enthusiasm
Locally informedBrings history, culture, and local perspective to lifeUnsupported claims
ThoughtfulPlans well while leaving room to enjoy the placeArtificial urgency
Promises
  • Local knowledge and personality shape every experience.
  • Carefully chosen places reveal more of Puerto Rico.
  • Guests receive thoughtful guidance and room to enjoy the journey.
The sharp edge

Use the fixed red only in AA-compliant pairings. Lighter blues and sand tones are supporting fills, not ordinary text on white.

I Heart PR Tours | Brand System02
Logo system

Marks and lockups

Use the exact supplied dark or light lockup for its intended surface. Use the colored heart for reduced, favicon, and application-icon contexts. Single-ink files are derived only through the approved source-faithful mask process.

Clear space

One clear-space unit on every side: 18 units on the 375 × 375 canvas, 9.6 percent of artwork width. No text, border, icon or crop enters that band.

Minimum size
mark96 px
horizontal160 px
stacked144 px

Below 64 px the reduced master takes over. It ships as its own file. Do not rasterise the full mark down at runtime.

Fixed lockup proportions

LockupMark heightGapAlignment
Horizontal160 units34 unitsOptical center
Stacked1.80C0.45CCentered on wordmark ink width

The horizontal row records its approved master composition. C is the outlined wordmark cap height used by the stacked lockup. X is the clear-space unit declared above. Keep one X clear around every master and never resize the mark and wordmark independently.

Prohibited

No rotation, skew, stretch, outline, bevel or glow. Never recolour individual elements. Never set the wordmark in live text or a substitute typeface. Never combine this mark with another organization’s mark into one lockup.

Horizontal, product surface
Mark
Light surface
Reduced master
I Heart PR Tours | Brand System03
Colour

Palette

White paper and soft paper establish the light-first identity. Red carries action, blue provides the primary supporting structure, and brown appears occasionally as a warm secondary note.

Accents on dark surfaces

primary
#68A9DD
brand-accent-deep
#1C5B8D
brand-emphasis
#A1CFF4
destructive
#E9505F

Neutrals, dark surfaces

background
#08131D
card
#101F2C
secondary
#172A3A
border
#262626
Light reading surface
primary
#1C5B8D
background
#FFFFFF
muted
#EEF4F8
muted-foreground
#555555
Light surfaces

The bright accent #1C5B8D measures 2.53:1 on the light reading surface and is never text there. The light token block substitutes #68A9DD at 7.17:1 automatically. The legal foreground on an accent fill is #000000 at 8.31:1. Every fill token in brand.json carries its measured foreground.

Semantic use
ColourMeans
AccentPrimary value, selection, links, focus
EmphasisNeeds attention, threshold exceeded
FaultFailed or timed out. Always with text.
Colour vision

The emphasis and failure colors may not be reliably separable under deuteranopia. That is acceptable only because state is never carried by colour alone: every state ships a written label.

I Heart PR Tours | Brand System04
Colour

Chart colors

Chart colors serve data visualization. Brand applications use the identity accent and the neutral surfaces. Each chart color is derived from the identity accent and measured against its surface so every entry clears 4.5:1.

chart-1
#68A9DD
chart-2
#50B5B1
chart-3
#A796D6
chart-4
#83B179
chart-5
#CE8AAC
Contrast checks

Lightness is calculated separately for dark and light surfaces. Chart hues preserve the measured separation from semantic emphasis and failure colors, and no two entries sit closer than the declared minimum.

The same palette on the light reading surface
chart-1
#1C5B8D
chart-2
#006565
chart-3
#5F4A84
chart-4
#346432
chart-5
#7E3F5E
Derived values
SeriesDarkLight
chart-1#68A9DD#1C5B8D
chart-2#50B5B1#006565
chart-3#A796D6#5F4A84
chart-4#83B179#346432
chart-5#CE8AAC#7E3F5E
Rules of use

Series order is fixed: chart-1 is always the primary measurement. Never reorder to make a chart look better. Never introduce a sixth colour; past five series, switch to a form that does not depend on hue. A series never uses the semantic emphasis or failure colors, because those carry state.

I Heart PR Tours | Brand System05
Typography

Display, interface, code

I Heart PR Tours uses three approved type families. Poppins handles display text, Source Sans 3 handles interface and reading text, and Courier Prime is reserved for literal command blocks.

Experience Puerto Rico
Thoughtfully guided tours on the island we love.
Roles
FunctionTypefaceWeights
Display, headingsPoppins700
Body, interfaceSource Sans 3400, 600
Literal code blocksCourier Prime400
Geometry
AxisValue
Radii6 / 8 / 12 / 16 / pill
Spacing4 8 12 16 24 32 48 64 96 120
Focus2px ring at 2px offset
Available weights

Only the listed local faces are approved. Any other weight makes the renderer synthesise a faux bold, which prints badly and forces outlined glyphs into exported PDFs. Courier Prime is used only for literal command blocks.

Scale, display
TokenSizeTracking
display-xl72-0.030em
display-lg56-0.025em
display-md40-0.020em
display-sm28-0.015em
display-xs20-0.010em
Scale, reading
TokenSizeLeading
body-lg18.41.6
body-md161.7
body-sm141.6
body-xs121.5
eyebrow120.12em caps
I Heart PR Tours | Brand System06
Optional expressions

Expressions and atmosphere

These approved treatments extend the identity for selected campaign and editorial contexts. They are not substitutes for the core logo masters.

Vertical sand expression

An approved atmospheric treatment for spacious campaign and editorial placements.

Horizontal sand expression

An approved atmospheric treatment for wide campaign and editorial placements.

Use with intention

Choose these atmospheric marks when the setting benefits from a tactile island reference. Keep the surrounding composition quiet, preserve the artwork as supplied, and pair it with the core identity whenever recognition must be immediate.

I Heart PR Tours | Brand System07
Affiliation

Independent identity

This brand has no ShruggieTech parent or ownership endorsement.

Vendor and trademark boundary

I Heart PR Tours is an independent third-party brand. I Heart PR Tours owns its trademarks and is responsible for its tours, services, and applicable terms.

Load the system

npx shadcn@latest registry add @i-heart-pr-tours=https://brand.shruggie.tech/i-heart-pr-tours/brand/r/{name}.json
npx shadcn@latest add @i-heart-pr-tours/theme @i-heart-pr-tours/fonts
npm i next-themes

What ships in the kit

PathContentsn
logos/svg/Vector masters, every lockup and colourway16
icons/Web, Android, Apple, macOS, and Windows application suites120
favicons/Compatibility aliases for the authoritative web suite18
tokens/CSS and JSON with measured contrast5
PathContentsn
nextjs/globals.css, shadcn registry, fonts, provider14
enforcement/AGENTS.md, ESLint, stylelint4
qc/Contact sheets. Proof somebody looked.162
guidelines/The system rendered from itself2
I Heart PR Tours | Brand System08