Design system
Every style and part of this site
Colours, text styles and components as the template uses them. Change a style or a component once and every page follows.
Black/Black
#000000
The page
Black/Matt Black
#141414
Tags, chips and dark tiles
Black/Black 70%
Black at 70%
The tablet and phone nav bar, the hero shade
Brand/Orange
#FF6017
Section titles, the "I am…" line, stars and stat signs
Brand/Light Orange
#FF7738
The contact panel, the "Wait… There's more!" panel, category labels
White/Cream
#FAF5EA
Cream fills and the active page dot
White/White
#FFFFFF
Pure white details
White/White 80%
White at 80%
Soft white fills
White/White 50%
White at 50%
The dim words of the About intro
White/White 30%
White at 30%
Quiet lines and inactive marks
White/White 10%
White at 10%
Borders on cards and lines
White/White 5%
White at 5%
Card and panel fills
Text/White
#FAF5EA
All text on dark grounds
Text/Black
#000000
Text on the orange panels
Heading 1
Clash Display
157 / 100 / 66
The Home hero title
Capturing Life’s Best Moments
Heading 1b
Clash Display
66 / 56 / 30
Inner page titles
Let’s talk
Heading 2 - L
Clash Display, orange on the page
120 / 90 / 50
Section titles
My Clients
Heading 2 - S
Clash Display
26 / 26 / 19
The line above a section title, and h2 in articles
Smiles and Stories from
Heading 3
Clash Display
28 / 32 / 24
Service and card titles
Documentary Photography
Heading 3 - S
Clash Display
20
Blog card titles and small titles
The art of candid photography
Heading 4
Clash Display
20
Small headings
Cameras
Paragraph - L
Satoshi Light
38 / 32 / 28
Intro paragraphs
A passionate photographer dedicated to capturing life’s most precious moments.
Paragraph - S
Satoshi
17
Body text, captions and articles
Highlight the best features of a property with careful lighting and composition.
Label
Satoshi Medium, capitals
15
Button labels
Book a session
Body 1
Inter, capitals
12
Labels, tags, dates and roles
Aerial & Drone
Body 2
Clash Display Semibold, lower case
40 / 30 / 24
The footer email
finnegan@email.com
Body 3
Clash Display
22 / 18 / 20
Contact details and FAQ answers
finnegan@email.com
Nav Menu
Clash Display
96 / 80 / 40
Page links in the full-screen menu
Albums
Footer Nav
Clash Display Medium
15
Footer links
Reviews
Footer Text - XXL
Clash Display Medium, Text/Black
240 / 202 / 164
The giant name in the footer
Monroe
Nav
The logo and the menu button (Menu). Tablet and phone turn on Bar, a dark blurred strip, so the nav never sits on text. Variant 1, Variant 2.
Nav Menu Overlay
The full-screen menu: its own logo and X, page links (Nav Link) and socials (Nav - Social Link). Active marks the current page. A tap on a link, the logo or the X fades it out (Desktop Closing, Phone Closing) and closes it.
Footer
The contact panel (Aperture CTA, Social Link), the page links and the giant name. CTA Visible hides the panel. Desktop, Tablet, Phone.
Button
Button Text and Link; the arrow box slides on hover. Stroke, Fill.
Button, large
Title and Link: Buy Prints on album pages. Large - Light, Large - Dark, Phone - Light, Phone - Dark, Small-Icon Left.
Button - Text and Button - Submit
Button - Text is a text link (Dark, Light). Button - Submit sends the contact form: Default, Loading, Disabled, Success, Error.
Heading - Viewfinder
Every section heading: Kicker, Title and Lead (Kicker and Lead hide when empty). The two orange corner marks slide in as it scrolls into view. Desktop hugs the title; Tablet and Phone fill the width.
VIEW
Menu, Cursor and Corner
Menu is the two-line menu button (Variant 1, Variant 2). Cursor follows the pointer over albums and posts (View, Read). Corner draws frame corners (Light, Small, Dark).
Let’s Talk
Aperture CTA
The shutter on the contact panel that opens on hover. Variant 1, 2, 3.
Social Link and Nav - Social Link
Social links in the footer (Social, Icon, Link) and in the menu (Social, Link, Visible).
Nav Link
A page link in the menu: Title and Link. Variant 1, Active.
Cube
The turning cube of services (Card - Service on each face) that scroll drives. Variant 1 to 4, Phone.
Hours Behind the Lens
K+
Stats
A figure that counts up (Counter) with its title and sign: Amount, Title, Suffix, Value, Font Size. Variant 1, Variant 2.
Brands
A client logo tile. The logos are placeholders: put your clients’ logos in.
Card - Service
A service: Title and Text. Desktop Light, Desktop Dark, Phone Light, Phone Dark.
Service Image
The photo behind the cube, one per service (1 to 4).
Card - More Service
A further service on the orange panel.
Project
An album on Home: photo, tags, title and link.
"We are thrilled with the product photography provided by Finnegan. They captured our products beautifully, highlighting their unique features and enhancing their appeal. The quality of the images exceeded our expectations, and we highly recommend their services!"
Marcus Tate
Marketing Manager, Blissed Co.
Review
A client review: Image, Text, Name, More Details, Visible. Variant 1 runs in the Home ticker, Variant 2 is the card.
Card - Blog
A post from Blog: image, title, category and date. Vertical, Horizontal (the featured post).
How do I book a photography session with you?
You can book a session by filling out the contact form on my website or by emailing me directly at finnegan@email.com. I'll get back to you within 24 hours to discuss the details and schedule your shoot.
What are your rates for photography sessions?
+ Portrait sessions start at $200. + Event photography starts at $500. + Commercial and product photography pricing is customized based on the project scope.
What does your pricing include?
Pre-shoot consultation. The photography session. Professional editing of selected images. A set number of high-resolution digital images. Online gallery for viewing and downloading photos.
What types of photography do you specialize in?
I specialize in a variety of photography services including portrait, travel, commercial, product, event, and landscape photography. Check out my portfolio to see examples of my work.
What is included in your photography packages?
My packages typically include a pre-shoot consultation, the photography session, professional editing, and a set number of high-resolution digital images. I also offer prints and albums as add-ons.
How long does a typical photo session last?
Most sessions last between 1-2 hours, depending on the type of shoot and the number of locations. Larger events will naturally take longer.
Do you travel for shoots?
Yes, I love to travel! I am available for destination shoots and events worldwide. Travel fees may apply depending on the location.
What should I wear to my photo session?
I recommend wearing something that makes you feel comfortable and confident. Solid colors and minimal patterns work best. We can discuss wardrobe options during your pre-shoot consultation.
How long will it take to receive my photos?
You will receive a preview gallery within a week of your shoot. The final edited images will be delivered within 2-4 weeks, depending on the scope of the project.
FAQ Wrapper
The FAQ list. Each row is Faq - Single (Opened, Closed) and opens on tap.
01
Sony World Photography Awards
2024
02
World Press Photo Contest
2023
Awards
An award row: Serial, Title, Year, Image. Opened shows the photo; a closed row opens on hover.
Values
A value in a tilted frame: Title and Font Size.
Gear - Single
An item in the gear list with its icon.
Image Slideshow
The photos that take turns on About. Variant 1 to 3.
Project - Single - Information
A fact on an album page: Title, Information, Icon. Variant 1, Phone.
Social - Contact Page
A social tile on Contact.
Counter.tsx
Inside Stats
Examples.tsx
Not used