Background Color Scheme

BG color
hex: #f3f3f5
rgb: 243,243,245
NAV BG color
hex: #2c353a
rgb: 44,53,58
accent color 1
hex: #a3c58a
rgb: 163,197,138
accent color 2
hex: #e9743d
rgb: 233,116,61
subcategories nav bg
hex: #e4edde
rgb: 228,237,222
-there is a pattern applied over this rectangle (crosshatch 2.gif) - located in the Resources folder
o p a c i t y 85 %

Buttons

Type Example Use Case
Main CTA Complete Booking For our most prominent call to actions (e.g. Complete Booking button)
Secondary CTA Apply For secondary call to actions (e.g Apply button on filters)
Grey Multi-Selection Multiple buttons grouped together with similar but different actions (e.g. List / Weekly View)
Light Grey Selection More Times Single action buttons (e.g. More Times on list view of AD page)
Time Slots 6:00pm 7:00pm Single action buttons (e.g. Time Slots on Weekly view of AD page)
Tertiary CTA Delete Tertiary call to actions -- limited use (e.g. Delete guest button on BS page)
Dark Grey Navigation Contact Press Navigation buttons (e.g. Basic categories on top nav bar)

Text Guidlines

Text Color Palette

Text Size Guidelines

Hover/Click Guidlines - Major Uses

Type Example
Light Grey Standard Breadcrumbs
Dark Grey Standard Press headlines (e.g., CBS)
Green Standard help@vimbly.com
Green Prices $75
Orange Prices $29

Hover/Click Guidlines - Other Uses

Type Example
White Underline Text See Schedule for this Start Date
White Category Text Subcat Names in Nav Bar Dropdown
White Hero Text “New York City” dropdown over hero photo
Light Grey #2 Monday, October 20 <--> 7:00–8:45
Light Grey Footer/Header Text Footer Text Links
Light Grey Sub-Category Text Subcat names on cat pages
Light Grey Activity Times Sun, Nov 2 <- -> 10:00-1:00
Light Grey City Dropdown Chicago
Dark Grey Activity Names Activity name on List View
Dark Grey FAQ Questions FAQ Page Questions

Form Text Fields

Best Practices

  • First tab should take you into first text field, then into next logical field, eventually to submit button
  • Phone numbers should auto-format to: (XXX) XXX-XXXX
    • If over 10 digits, no formatting
    • If under 10 digits, invalidate

Static Text

Type Example Font / Size / Color
Big Photo Text "Find things to do" on hero photo Proxima Nova / 2.625rem / White
Big Alternative Photo Text # text on popular subcategories photos Yummo / 2.625rem / White
Light Grey Page Headings # of guests (Upcoming Activities page) Yummo / 2.625rem / Light Grey
Dark Grey Page Headings Large Page Headings ("Contact Us") Proxima Nova / 2.625rem / Dark Grey
Book Now Hover Text "Book Now" Hover Text on Grid/List View activity tile Yummo / 1.75rem / White
Discounted Activity Prices $612 Yummo / 1.75rem / Orange
Activity Prices $99 Yummo / 1.75rem / Green
Total Price $414 Yummo / 1.75rem / Red
Other Prices & Numbers 4 (number of guests -- Booking Payments page) Yummo / 1.75rem / Dark Grey
Sub-Headings "Vimbly is the fastest way..." text (About static page) Proxima Nova / 1.75rem / Dark Grey
Activity Name Activtiy name on the AD page Proxima Nova / 1.625rem / Dark Grey
Crossed Out Activity Prices 525 Yummo / 1.3125rem / Green
Photo Text Subcategory name on popular subcategory photos on City Home Proxima Nova / 1.3125rem / White
Section Titles / Headlines / Activity Name Section headings on AD page (e.g. About this Activity) Proxima Nova / 1.3125rem / Dark Grey
Big Miscellaneous Text "Get a personalized..." Vimbly Game text on City Home Proxima Nova / 1.3125 / Light Grey
Discount Amount Text Discount amount subtracted from price of booking (Booking Payment page) Yummo / 1.3125 / Light Grey
Small Photo Text "Discover over 28,504 activities..." text on hero photo Proxima Nova / 1.125rem / White
Small Heading/Name Text "Booking Summary" text heading on ticket receipt (Booking Sequence page) Proxima Nova / 1.125rem / Dark Grey
Testimonial / Press Quote Text Testimonial and Press Quote Text Proxima Nova / 1.125rem / Light Grey
Standard Column Headers / Vendor Info / Error Message Text Column headers on Weekly view (Activity Detail page) Proxima Nova / 1rem / White
Gift Code Error Text Invalid gift error text (Booking Sequence page) Proxima Nova / 1rem / Red
Gift Code Applied Text "Gift code applied" text for valid code (Booking Sequence page) Proxima Nova / 1rem / Green
Discounted “Save” Text save (above discount % in list view tile) Yummo / 1rem / Orange
Standard Description / Activity Info / Static Page Text Standard text (e.g. activity description on AD page) Proxima Nova / 1rem / Light Grey
Standard Miscellaneous Text "Total" text to left of the total price (Booking Payment page) Proxima Nova / 1rem / Dark Grey
Alternative Text Activity date above the day of the week and time (Upcoming Activities page) Yummo / 1rem / Dark Grey
Pre-written Form Field Text Pre-written text in form fields (e.g. Name, Email, Phone Number, Credit Card #) Proxima Nova / .9375rem / Light Grey
Inputted Form Field Text User inputted text into the form fields (e.g. Name, Email) Proxima Nova / .9375rem / Darkest Grey
Pre-Written Filter Text Pre-written text in specific filter fields (e.g. Specific Time, Specific Date, Specific Price) Yummo / .9375rem / Light Grey
Inputted Filter Text Selected Start and End times in Specific time filter Yummo / .9375rem / Darkest Grey
Small White Headings "How it Works", "Company", "Get Your Free Guide...", "Social Media" heading text in Footer Proxima Nova / .9375rem / White
User Name Citation User's name who gave the testimonial quote (Private Booking Submission page) Proxima Nova / .9375rem / Green
Booking Info Text Activity date below activity and vendor name (right side of Booking Payment page) Proxima Nova / .9375rem / Light Grey
Section Text Booking info (e.g. Activity name) on right side of Booking Summary ticket (Booking Sequence page) Proxima Nova / .9375rem / Dark Grey
Smallest Headings FAQ page sections (e.g. General Questions, Activity Booking, Cancellation Policiy) Proxima Nova / .8125rem / White
Smallest Green Font Date that review was left in the reviews section (Activity Detail page) Proxima Nova / .8125rem / Green
Small Miscellaneous Text Vendor Name below activity title (AD page) Proxima Nova / .8125rem / Light Grey
Smallest Headings Column headings (e.g. Activity, Qty) in Review Your Booking section (Booking Payment page) Proxima Nova / .8125rem / Dark Grey
Filter Dropdown Text The text in the filter dropdowns on category page Yummo / .8125rem / Light Grey