S&J MARKETING / BRAND REFERENCE
Good work deserves to be understood.
S&J design system · November 8, 2026
S&J / Writing
Writing
Write the name as “S&J”. Use “S&J Marketing” where a full name is needed. Never “S&J Creative”. “S&J Marketing & Design” is the legal name only.
Voice is conversational intelligence: professional without being formal, clever without trying hard, opinions without posturing. Write to one reader, in sentence case, in plain words.
Lines to match: “Good work deserves to be understood.” “Start with a conversation. Stay for the work.” “Tell us what you need. We’ll come back with what it would take.”
One headline word may be italic (display-emphasis): “Good work deserves to be understood.”
No em dashes. Use a comma, a colon or a full stop.
Avoid: “more than just”, “seamless”, “elevate”, “unlock”, “transform”, “empower”, “leverage”, “robust”, “comprehensive”, and design jargon (“visual systems”, “touchpoints”, “solutions”).
Never describe the size of the studio, claim an office, or frame work as rushed. Never invent clients, results, statistics or testimonials. Leave a clear placeholder where a number is missing.
No emoji, no hashtags, no automatic calls to action.
S&J / Color
Color
brand-orange
#FF5533 · The lead color. Fields, main buttons, the ampersand on white. Never small text (3.18:1 on white).
brand-cobalt
#166AFF · Second field color, secondary button. Use it wherever something needs to feel strong and dark. White text on it is 4.63:1.
brand-raspberry
#FF4E8B · Third field color, button variant. White text only, bold or 19px and up (3.13:1).
neutral-white
#FFFFFF · Page background. Text on orange, cobalt and raspberry.
neutral-off-white
#F7F5F0 · Soft fields, paper button, cards on white.
neutral-off-black
#333333 · Text and lines only. Never a background, field or button fill.
neutral-mute
#6B6860 · Secondary text and captions on white and off-white.
neutral-line
#D9D5CB · Hairlines. Decorative only.
hover-orange
#E94A2A · Hover fill for orange.
hover-cobalt
#0F58DB · Hover fill for cobalt.
hover-raspberry
#F23B7C · Hover fill for raspberry.
hover-paper
#ECE9E1 · Hover fill for paper and outline buttons and tags.
disabled-bg
#DEDBD3 · Disabled button fill.
disabled-fg
#8B887F · Disabled button text.
Rules:
The page is white. Color arrives as flat fields. Orange leads. No gradients, grain or shadows.
No black or off-black fills, ever. Where black would go, use white or cobalt.
Don’t stack cobalt and raspberry fields back to back.
S&J / Type
Type
display-xl · 88px
Good work deserves to be understood.
display-lg · 56px
Good work deserves to be understood.
display-md · 38px
Good work deserves to be understood.
display-sm · 26px
Good work deserves to be understood.
display-emphasis · 56px
Understood.
body-lg · 18px
Good work deserves to be understood.
body · 16px
Good work deserves to be understood.
body-sm · 14px
Good work deserves to be understood.
button · 15px
Good work deserves to be understood.
label · 12px
SELECTED WORK
label-strong · 12px
SELECTED WORK
eyebrow-lg · 14px
SELECTED WORK
DM Mono is only for labels, navigation, tags and eyebrows. It’s always uppercase, and never used for body text. No other text is set in caps.
S&J / Space, shape, layout
Space, shape, layout
Space is base 4: 4, 8, 12, 16, 24, 32, 48, 72 (space-1 to space-18).
One radius: 4px, everywhere. Full-bleed fields use 0. No pills, no shadows, no floating cards.
Separate things with a 1.5px off-black rule or a change of field, not a box.
Grid: 12 columns from 1024px, 8 from 720px, 4 below. Gutter 24px. Content max 1200px. Side margin 48px from 1024px, 24px below.
Section padding: 72px desktop, 48px mobile.
S&J / The ampersand and logo
The ampersand and logo
The ampersand is the main character. Use the files, never a typed or redrawn one.
Colors: orange, white or off-black only. Orange on white or off-white. White on orange, cobalt or raspberry. Off-black on white or off-white only. Never cobalt or raspberry.
Hero crop: huge, cut off by the edge of its field. One per view, and it never crosses into a second field.
Never tilt, rotate, animate, outline, stretch, use as a bullet, repeat as a pattern or put text over it.
Seasonal costumes only for main holidays (fall, Christmas, Valentine’s Day, Easter).
Logo lockups: wordmark, stacked, ampersand beside (the main one), ampersand above. Each comes in orange, white and off-black. In the beside lockup the name sits slightly below the ampersand’s middle on purpose. Clear space is the height of the capital S on every side. The wordmark is no narrower than 120px on screen.
S&J / Images and icons
Images and icons
Images sit in color fields: a flat field frames the image with an even margin (24px, or 16px for small tiles). One field color per image, square corners, no tint or filter, no text on the image.
Cool or dark images take orange. Warm ones take cobalt. Very colorful work takes off-white.
Icons: Nucleo, Core outline style only. Off-black on light, white on color. No emoji.
S&J / Buttons
Buttons
ON A COLOR FIELD
S&J / Tags, labels and links
Tags, labels and links
Branding
Selected
New
Hover
SELECTED WORK
See the work
Hover example
S&J / Cards
Cards
SERVICE CARD
Branding
A clear way to show people who you are.
Starting at [price]
PROJECT IMAGE
Project name
BRANDING / WEBSITE / YEAR
QUOTE CARD
[Approved client quote]
CLIENT NAME / ORGANIZATION
STAT CARD
[Number]
What it counts and where it comes from.
SOURCE / DATE
S&J / States at a glance
States at a glance
Default
Hover
Pressed
Focus
Hover the buttons to see a subtle change in fill. Pressing moves them down by 1px. Focus is shown as a visual specimen.
Accordion
What does a clear brief include?
+