Primary Logo
Default lockup for dark digital surfaces and branded collateral.
Brand Assets
ShotCraft brand assets for editors, partners, and product teams.
Download the official logo suite, pull the approved warm-dark color system, inspect the editorial type scale, and grab the full brand guide as a production-ready PDF.
Domain: shotcraft.xyzVersion 1.0Logos, colors, typography, usage rules
Primary lockupDark surfaces
Clear space1x icon height
Minimum width160px
Logo Downloads
Approved logo variants with direct downloads.
Use the SVG originals. Do not redraw, recolor, or add shadow effects.
The light and primary variants are for dark environments. The dark variant is reserved for warm light backgrounds and print-style layouts.
Icon Mark
Use for avatars, favicons, compact placements, and stamps.
Light Version
For layered placement over dark photography or low-key backgrounds.
Dark Version
For warm light layouts, decks, and editorial print compositions.
Color System
Warm dark surfaces, precise gold accents, and semantic depth.
ShotCraft color system — refined dark theme with warm amber accent. Inspired by darkroom aesthetics and premium photography portfolios.
Gold (Primary Accent)
CTAs, highlights, active states, brand moments
5 tones
Tone#F5C84A
gold-300
RGB 245, 200, 74HSL 46° 90% 63%
Default#E8A020
gold-400
RGB 232, 160, 32HSL 39° 82% 52%
Tone#C8780A
gold-500
RGB 200, 120, 10HSL 34° 91% 41%
Tone#A85C05
gold-600
RGB 168, 92, 5HSL 31° 94% 34%
Tone#7A3E02
gold-700
RGB 122, 62, 2HSL 29° 97% 24%
Dark Backgrounds
Page backgrounds, surface hierarchy — warm near-black for premium feel
4 tones
Tone#0D0C0B
bg-base
Page background / outermost layer
RGB 13, 12, 11HSL 30° 8% 5%
Tone#161412
bg-surface
Card / panel background
RGB 22, 20, 18HSL 30° 10% 8%
Tone#1E1B18
bg-elevated
Elevated surfaces, modals, dropdowns
RGB 30, 27, 24HSL 30° 11% 11%
Tone#252118
bg-overlay
Hover states, overlay tints
RGB 37, 33, 24HSL 39° 21% 12%
Borders & Dividers
3 tones
Tone#252118
border-subtle
Subtle dividers
RGB 37, 33, 24HSL 39° 21% 12%
Tone#332D24
border-default
Standard card borders
RGB 51, 45, 36HSL 37° 17% 17%
Tone#4A4136
border-strong
Prominent borders, input fields
RGB 74, 65, 54HSL 34° 16% 25%
Text Colors
Warm-shifted neutrals — avoid cold grays for photography feel
4 tones
Tone#F2EEE8
text-primary
Headings, body text
RGB 242, 238, 232HSL 36° 29% 93%
Tone#C4BAB0
text-secondary
Supporting text, meta
RGB 196, 186, 176HSL 30° 14% 73%
Tone#7A6E66
text-muted
Placeholder, disabled, captions
RGB 122, 110, 102HSL 22° 10% 44%
Tone#0D0C0B
text-inverse
Text on light/gold backgrounds
RGB 13, 12, 11HSL 30° 8% 5%
Semantic Colors
8 tones
Tone#4A9B6F
success
Success states, confirmation
RGB 74, 155, 111HSL 148° 35% 45%
Tone#1A3326
success-subtle
Success background tint
RGB 26, 51, 38HSL 148° 33% 15%
Tone#C45252
error
Errors, destructive actions
RGB 196, 82, 82HSL 0° 44% 54%
Tone#2E1818
error-subtle
Error background tint
RGB 46, 24, 24HSL 0° 31% 14%
Tone#D48C2A
warning
Warnings, caution
RGB 212, 140, 42HSL 36° 66% 50%
Tone#2A200D
warning-subtle
Warning background tint
RGB 42, 32, 13HSL 38° 53% 11%
Tone#4A8DB5
info
Info states, links
RGB 74, 141, 181HSL 203° 41% 50%
Tone#0F2030
info-subtle
Info background tint
RGB 15, 32, 48HSL 207° 52% 12%
Warm Neutrals (for light-mode or neutral contexts)
10 tones
Tone#FAFAF8
warm-50
RGB 250, 250, 248HSL 60° 14% 98%
Tone#F4F2EE
warm-100
RGB 244, 242, 238HSL 40° 20% 94%
Tone#E8E4DC
warm-200
RGB 232, 228, 220HSL 40° 19% 89%
Tone#D4CEC4
warm-300
RGB 212, 206, 196HSL 38° 13% 80%
Tone#A09890
warm-400
RGB 160, 152, 144HSL 28° 9% 60%
Tone#706860
warm-500
RGB 112, 104, 96HSL 28° 8% 41%
Tone#4A4440
warm-600
RGB 74, 68, 64HSL 22° 7% 27%
Tone#302C28
warm-700
RGB 48, 44, 40HSL 28° 9% 17%
Tone#1E1B18
warm-800
RGB 30, 27, 24HSL 30° 11% 11%
Tone#0D0C0B
warm-900
RGB 13, 12, 11HSL 30° 8% 5%
Typography
Editorial serif headlines, refined sans body copy, technical mono.
ShotCraft typography system — editorial serif headings paired with refined sans-serif body text. Evokes high-end photography publications.
heading
Cormorant Garamond
Precision, warmth, and visual restraint.
Elegant, editorial serif — used in luxury fashion, photography books, and high-end magazines. The high contrast between thick and thin strokes is photography-appropriate. The italic is especially beautiful for pullquotes.
Weights: 300, 400, 500, 600, 700 | Styles: normal, italic
body
DM Sans
ShotCraft teaches product photographers how to create images that move products, not just pixels.
Clean, geometric sans-serif with subtle personality. More refined than Inter — slightly wider letterforms make it feel editorial. Pairs well with Cormorant without competing.
Weights: 300, 400, 500, 600 | Styles: normal, italic
mono
JetBrains Mono
preset.shadow_drop = realistic
Premium developer mono — refined over coding use. For code examples, settings values, technical specs.
Weights: 400, 500 | Styles: normal
Type scale
Based on the 1.25 major-third scale defined in the brand guide.
Use Cormorant for H1-H3
display
Hero headlines only
76px
Precision sells products.
h1
Page titles, major section headers
61px
Precision sells products.
h2
Section headings
49px
Precision sells products.
h3
Sub-section headings
39px
Precision sells products.
h4
Card titles, feature headings
31px
Precision sells products.
h5
Sidebar headings, list titles
25px
Precision sells products.
h6
Small card headers, inline headings
20px
Precision sells products.
label
Category labels, section eyebrows, tags — all-caps small text
11px
Craft matters
body-lg
Lead paragraphs, featured body text
18px
Precision sells products.
body
Default body text
16px
Precision sells products.
body-sm
Supporting text, meta, captions
14px
Precision sells products.
small
Fine print, timestamps, footnotes
12px
Precision sells products.
mono
Code, settings values, technical specs
14px
Precision sells products.
hero
headingdisplay / Cormorant Garamond 600
eyebrowlabel / DM Sans 500 uppercase tracked
descriptionbody-lg / DM Sans 400
section
headingh2 / Cormorant Garamond 500
eyebrowlabel / DM Sans 500 uppercase tracked
bodybody / DM Sans 400
card
headingh4 or h5 / Cormorant Garamond 600
metasmall / DM Sans 500 uppercase tracked
bodybody-sm / DM Sans 400
pullquote
quoteh3 italic / Cormorant Garamond 300i
attributionbody-sm / DM Sans 500
Usage Rules
Essential layout, spacing, and expression rules.
These are the non-negotiables pulled directly from the official guide.
Essentials
- Clear space around the logo should equal at least one icon height on every side.
- The primary logo should never render below 160px wide. The icon alone should never go below 24px.
- Cards use the surface stack with a precise 8px radius and subtle warm border.
- Primary buttons stay gold on dark. Hover states darken instead of glowing brighter.
Do
- Use photography as the primary storytelling layer.
- Pair serif headings with controlled whitespace and warm neutrals.
- Lead with craft, process, technique, and practical proof.
- Reserve gold for interaction, emphasis, and brand moments.
Do not
- Do not introduce purple, blue-violet, or cyan into the UI.
- Do not use pill buttons, bubbly cards, or stock SaaS styling.
- Do not place the logo directly over busy photography.
- Do not swap the editorial serif headings for generic sans headlines.
Brand Guide
Download the full PDF guide with logo usage, palette, type, spacing, and do-not-break rules.
The exported PDF includes the full guide, a table of contents, embedded logo artwork, live color swatches, and the official typography system.