Local Notes - Style Guide

Colors - Theme

Light - "Modern Parchment"

Primary (Teal)

#437D7D

Secondary (Yellow)

#FFD54F

Surface

#FEFCF7

Background

#F7F3E9

Input Field

#F0EBE0

Text Main (Dark Brown)

#4E342E

Text Muted (Brown)

#6D4C41

Dark - "Midnight Cartography"

Primary (Warm Amber)

#E5A84C

Secondary (Teal)

#437D7D

Surface

#2A2826

Background

#1C1B19

Input Field

#353230

Text Main (Warm White)

#E3E0DB

Text Muted (Warm Gray)

#A89F95

Typography

Font Family: Nunito (Google Fonts)

Headlines - The quick brown fox

24px / Weight 800

App Bar Title - Local Notes

20px / Weight 900

Title Medium - Section Heading

16px / Weight 800

Body Large - Primary content text for reading

16px / Weight 600

Body Medium - Secondary content and descriptions

14px / Weight 600

Body Small - Captions, metadata, and timestamps

12px / Weight 600

Button - SAVE NOTE

16px / Weight 700

Map Marker Colors

19 colors available for map markers. Applied as runtime tint on white post-it base images.

Canary Yellow

#FFE14C

Neon Green

#C4F24C

Limeade

#BFFF00

Aqua

#00C9B1

Mint

#98E8C1

Teal

#4ECDC4

Cyan

#00BCD4

Bali Blue

#76D6FF

Periwinkle

#8EA4F0

Lavender

#CB9BFF

Hot Pink

#FF6B8A

Cape Town Pink

#FF7EB3

Peach

#FFB4A2

Electric Orange

#FF6700

Orange

#FF9A3C

Warm Red

#E84855

Pastel Mint

#B5EAD7

Pastel Blue

#C7CEEA

Pastel Pink

#FFB7C5

Color Palettes

10 themed palettes. Each palette assigns 5 colors to note types: Experience, Tip, Plan, Warning, Recommendation.

Label

Exp

Tip

Plan

Warn

Rec

Classic

Miami

Rio de Janeiro

Bora Bora

Bali

Cape Town

Marrakesh

Marseille

Helsinki

Jaipur

Icons and Assets

App Logo (Transparent)

Launcher Icons

Standard (512px)

Maskable (512px)

Standard (192px)

Maskable (192px)

Post-it Note Shapes (s1 - s9)

White base images tinted at runtime with marker colors via ColorFilter.mode(color, BlendMode.multiply). Each shape has a unique tilt and drop shadow.

s1

s2

s3

s4

s5

s6

s7

s8

s9

Note Type Colors

Each note type has a default marker color that conveys its purpose at a glance. Users can customize these via color themes or individual assignments, but these defaults establish the semantic meaning of each type.

Experience

#FFE14C - Canary Yellow

Places you have visited and want to remember

Tip

#76D6FF - Bali Blue

Helpful advice about a place

Plan

#BFFF00 - Limeade

Places you want to visit in the future

Warning

#FF6700 - Electric Orange

Cautions or things to avoid at a place

Recommendation

#CB9BFF - Lavender

Places recommended by others

Spacing System

A consistent spacing scale based on multiples of 4px. The 16px base unit is the most common value across the app.

Scale

4px Tiny - icon gaps, tight component internals

8px Small - vertical spacing between related elements

12px Medium - component internal padding, chip spacing

16px Base - card padding, screen margins, section gaps

24px Large - section dividers, generous white space

32px XL - empty states, splash padding, major sections

Common Patterns

Card Padding

16px all sides

List Item Padding

16px horizontal, 12px vertical

Button Padding

24px horizontal, 14px vertical

Input Field Padding

16px horizontal, 14px vertical

Screen Margins

16px horizontal

Section Gap

20-24px between card groups

Border Radius

Four radius tiers keep corners consistent. 12px is the default for most components.

4px

Tiny

Badges, tags

8px

Small

Chips, segments

12px

Default

Cards, buttons, inputs

16px

Large

Dialogs, modals

28px

Pill

Floating search bar, FAB

Elevation & Shadows

Elevation is kept subtle to preserve the warm, paper-like feel. Light theme uses warm brown shadows; dark theme uses black.

Elevation 0

App bar, flat surfaces

Elevation 1

Standard cards (light)

Elevation 2

Standard cards (dark)

Elevation 3-4

Prominent cards, form sections

Shadow Tokens

Light Theme Shadow

rgba(78, 52, 46, 0.08) - warm brown

Dark Theme Shadow

rgba(0, 0, 0, 0.3) - neutral black

Subtle Shadow (CSS)

0 4px 24px rgba(78, 52, 46, 0.08)

Component Rules

Standard component styles used throughout the app. All components use Nunito and follow the border radius and spacing systems above.

Cards

Card Title

Card content with 16px padding all around. Radius 12px, elevation 1 light / 2 dark.

Background: #FEFCF7 / #2A2826

Buttons

Primary: teal #437D7D (light) / amber #E5A84C (dark). Radius 12px. Padding 24h x 14v.

Input Fields

Placeholder text...

Focused input

Fill: #F0EBE0 / #353230. Radius 12px. Focus ring: 2px primary color.

Chips & Segments

Default Chip Selected

Radius 8px. Selected state uses primary color at 20% opacity.

Dialogs

Dialog Title

Content at 14px w600. Background: #FFFBF5 / #2A2826.

Radius 16px. Title: 20px w800. Content: 14px w600.

Snackbar

Snackbar message text

Floating behavior. Radius 12px. Ink background #4E342E (light) / warm white #E3E0DB (dark).

Map Styles

Light - "Parchment"

A warm, muted map style with parchment-toned land, soft beige roads, and teal water. Designed to feel like an old explorer's map while remaining readable. Labels use dark brown tones to match the app's text hierarchy.

Dark - "Midnight Cartography"

A deep, dark map style with charcoal land, dark slate roads, and near-black water. Teal accents on labels provide contrast without harshness, matching the app's dark theme palette.

Parchment

Midnight

Drag the slider to compare light and dark map styles - Manhattan, New York