InItPic Brand Guide

Colors, typography, components, and visual principles for building consistent InItPic experiences.

Color Palette

The InItPic palette is built around a calming ocean blue primary with warm accent tones. Both light and dark token sets are provided for theming.

Light Theme

Primary
#18A0DA
Colors.light.primary
Copy hex value
Secondary / Accent
#30b1e8
Colors.light.accent
Copy hex value
Accent Orange
#F97316
CSS --accent
Copy hex value
Text Primary
#172C36
Colors.light.text
Copy hex value
Text Secondary
#47606B
Colors.light.textSecondary
Copy hex value
Text Tertiary
#7A9099
Colors.light.textTertiary
Copy hex value
Background Root
#F4F9FA
Colors.light.backgroundRoot
Copy hex value
Background Default
#FFFFFF
Colors.light.backgroundDefault
Copy hex value
Border
#DEE9ED
Colors.light.border
Copy hex value
Success
#10B981
Colors.light.success
Copy hex value
Error
#EF4444
Colors.light.error
Copy hex value
Warning
#F59208
Colors.light.warning
Copy hex value
Info
#3B82F6
Colors.light.info
Copy hex value

Dark Theme

Primary
#30b1e8
Colors.dark.primary
Copy hex value
Secondary
#18A0DA
Colors.dark.secondary
Copy hex value
Text Primary
#F4F9FA
Colors.dark.text
Copy hex value
Text Secondary
#B8CCD4
Colors.dark.textSecondary
Copy hex value
Background Root
#0F1F28
Colors.dark.backgroundRoot
Copy hex value
Background Default
#172C36
Colors.dark.backgroundDefault
Copy hex value
Background Secondary
#1E3644
Colors.dark.backgroundSecondary
Copy hex value
Border
#2D4F5E
Colors.dark.border
Copy hex value
Success
#34D399
Colors.dark.success
Copy hex value
Error
#F87171
Colors.dark.error
Copy hex value
Warning
#FBBF24
Colors.dark.warning
Copy hex value
Info
#60A5FA
Colors.dark.info
Copy hex value

Typography Scale

Inter is the primary typeface. The scale follows iOS Human Interface Guidelines sizing with custom weights for brand hierarchy.

Type Scale
Display
34px / 41px / Bold / -0.5
Find yourself in every moment
H1
28px / 34px / Bold
Page Title Heading
H2
22px / 28px / Semibold
Section Heading
H3
20px / 25px / Semibold
Card Title Heading
H4 / Headline
17px / 22px / Semibold
Label or Inline Heading
Body
17px / 22px / Regular
Default paragraph text used throughout the application for readable content blocks.
Callout
16px / 21px / Regular
Slightly smaller body text for secondary information and descriptions.
Subheadline
15px / 20px / Regular
Supporting text beneath headings or in metadata sections.
Small / Footnote
13px / 18px / Regular
Footnotes, timestamps, and auxiliary details.
Caption
12px / 16px / Regular
Captions, labels, and micro-copy in text-secondary color.

Spacing System

A consistent 4px-based scale ensures visual rhythm and harmony across all components and layouts.

Spacing Tokens
xs
4px
sm
8px
md
12px
lg
16px
xl
20px
2xl
24px
3xl
32px
4xl
40px
5xl
48px
inputHeight
48px
buttonHeight
50px

Border Radius Scale

Rounded corners at consistent scales create a friendly, modern aesthetic. Use larger radii for cards and modals, smaller for inputs and badges.

Radius Tokens
xs
8px
sm
12px
md
16px
lg
20px
xl
24px
2xl
32px
3xl
40px
full
9999px

Button Styles

Buttons follow a clear hierarchy: primary for main actions, secondary for alternatives, accent for attention-grabbing CTAs, and ghost for inline text actions.

Button Variants
Primary
Secondary
Accent
Ghost
Small
Small

Height: 50px (default) / 36px (small) · Radius: 12px (default) / 8px (small) · Font: Inter 16px Semibold

Card Styles

Cards use background color for elevation rather than shadows. Three tiers: flat with border, elevated with shadow, and glass with backdrop blur for liquid glass aesthetic.

Flat Card
Default card style with a subtle border and white background. Used for most content containers.
border: 1px solid #DEE9ED
Elevated Card
Uses box-shadow for visual lift. Reserved for interactive or featured content.
shadow: 0 4px 12px rgba(0,0,0,0.08)
Glass Card
Frosted glass effect with backdrop blur. Used on hero sections and premium surfaces for the liquid glass aesthetic.
backdrop-filter: blur(20px)

Input Field Style

Clean, accessible form inputs with clear focus and error states. Height 48px, radius 8px, consistent across all form elements.

Input States
Default
Focused
Error

Height: 48px · Padding: 0 16px · Radius: 8px · Font: Inter 16px Regular · Focus ring: 3px rgba(24,160,218,0.12)

Gradient Swatches

Gradients are used sparingly for hero sections, CTAs, and brand accents. Always at 135-degree angles for consistency.

Hero Gradient
linear-gradient(135deg, #18A0DA, #30b1e8, #5FC4ED)
Warm / Accent
linear-gradient(135deg, #F97316, #FB923C)
Dark Surface
linear-gradient(135deg, #172C36, #1E3644)
Success
linear-gradient(135deg, #10B981, #34D399)

Icon Usage

InItPic uses Feather icons (via @expo/vector-icons) for a clean, consistent line style. Icons are 24px with 2px stroke weight. Browse all icons at icons.expo.fyi.

Common Icons (Feather)
camera
image
user
search
dollar-sign
check
x
message-square
mail
alert-circle

Size: 24px · Stroke: 2px · Style: Line · Color: inherit from parent text color · Library: @expo/vector-icons (Feather set)

Voice & Tone

InItPic speaks with warmth, confidence, and simplicity. The voice is approachable yet professional, making photography technology feel accessible to everyone.

Warm & Personal
Use "you" and "your" to speak directly to the user. Celebrate their moments. "Find yourself in every moment" captures this perfectly.
Clear & Simple
Avoid jargon. Say "find your photos" not "leverage AI-powered facial recognition algorithms." Technology should feel invisible.
Confident but Not Boastful
State capabilities plainly. "Your photos, matched in seconds" is better than "The world's fastest, most advanced photo matching engine."
Trustworthy & Transparent
Be upfront about pricing, data usage, and how facial recognition works. Trust is the foundation of handling personal photos.
Action-Oriented
Lead with verbs. "Take a selfie," "Browse your matches," "Start earning." Keep CTAs short and actionable.
Premium, Not Pretentious
The experience should feel high-quality without being exclusive. Photography is for everyone; the platform is the premium layer.

Do / Don't

Quick reference for maintaining brand consistency across copy, design, and interactions.

Do
  • Use Inter as the primary typeface on all platforms
  • Maintain the ocean blue (#18A0DA) as the dominant brand color
  • Use liquid glass effects on premium surfaces and iOS
  • Keep button text concise and action-oriented
  • Use Feather icons consistently at 24px / 2px stroke
  • Apply the 4px spacing scale for all margins and padding
  • Use background color for card elevation, not shadows
  • Speak in second person ("your photos", "your events")
  • Test all flows on both light and dark themes
Don't
  • Use colors outside the defined palette
  • Mix icon libraries or use filled icons
  • Add drop shadows to flat cards
  • Use ALL CAPS for body text or descriptions
  • Write overly technical copy about AI or facial recognition
  • Use arbitrary spacing values outside the scale
  • Hardcode colors instead of using theme tokens
  • Place important content outside safe areas
  • Sacrifice mobile usability for desktop aesthetics
InItPic Brand Guide · Last updated 2025