02 · Colour

Colour

One electric blue is the whole brand. #4B67E5 is the primary, the one you reach for first. The lighter blue is for hover and highlights, the darker blue for pressed states and depth, and the pale tint for soft fills. The neutrals do the quiet work. Click any block to copy its hex.

#E7EAFASoft fills, chips, washes
#6481FFHover + highlights
#3B57D6Pressed + depth
WSC Blue · Primary
#4B67E5
The one you reach for first. Buttons, links, accents and full panels.
#000000
Pure black, rare
#FFFFFF
Cards + surfaces
#F8F8F8
Page background
#D1D1D8
Disabled, faint lines
#13B47A
Success, ‘included’ ticks
#E5484B
Errors, destructive actions
#F8DE40
Review stars
03 · Typography

Typography

Inter, exclusively. The signature is big, tight headlines: heavy weight, negative tracking and sub-1.0 line-height. Click any row to copy its CSS.

Aa
Inter · Variable, 100–900
Self-hosted variable font. Free on Google Fonts. Headlines run Bold/Extrabold with tight tracking; body sits at Regular and Medium.
Regular Medium Semibold Bold Extrabold

In context

Content Sprints™

Make great content, fast.

Walk away with 30+ assets, delivered in 4 days. We handle the strategy, shoot and edit so you can review, approve and post.

04 · Voice & tone

Voice & tone

Direct, warm and conversational. British English throughout. Lead with what the customer gets, never corporate filler.

We do

Write in British English. Optimise, colour, whilst.
Say “you” over “we”. Address the customer directly.
Stay punchy and outcome-led. Two short sentences beat one long one.
Be confident, slightly cheeky. Personality is allowed.
Use sentence case and keep numbers as numerals. 4 days, 30+ assets.

We don’t

Use em dashes. Use a full stop or a comma instead.
Use the Oxford comma. Write “strategy, shoot and edit”.
Reach for corporate filler or jargon. Say the plain thing.
Drop in emoji in product or marketing copy.
Forget the ™ on Content Sprints at first prominent use.
Hero
“Content Sprints™. Book one today and you’ll have more creative than you’ve had all quarter.”
Guarantee
“Great content, fast. Or your money back.”
Reassurance
“No retainer. No risk. Just results.”
05 · Components

Components

Pill buttons and rounded white cards do most of the work. Hover the buttons to see the states. Primary pills turn blue, ghost pills gain a blue edge.

VariantFillStrokeText
Primary#121212None#FFFFFF
Ghost#FFFFFF#EBEBEB · 1px#121212
Blue#4B67E5None#FFFFFF
Buttons
Pills. One primary per view.
  • 45px tall, 0 24px pad
  • 999px radius
  • Inter Medium 13px
  • Hover: primary & blue deepen, ghost gains a blue edge
Free Most popular
BadgeFillStrokeText
Free#EEF0F4None#6A7282
Paid#4B67E5None#FFFFFF
Most popular#121212None#FFFFFF
Badges
Small pills that flag status.
  • 28px tall, 999px radius
  • Inter Bold 12px
Core Tool Free Coming soon New
TagFillStrokeText
Core #E7EAFA None #4B67E5
Tool #EEF1FD #C5CEF7 · 1px #4B67E5
Free #E7F8F0 #BCE8D6 · 1px #0F9E6C
Coming soon #FBF4D6 #EFDF95 · 1px #BD9412
New #4B67E5 None #FFFFFF
Tags
Tiny uppercase labels for status.
  • 7px corner radius
  • 1px stroke where shown
  • Inter Bold 11.5px
  • Uppercase, +0.03em tracking
Book your Sprint Strategy included Available now AI-assisted
ChipFillStrokeText
Solid#4B67E5None#FFFFFF
Soft#E7EAFANone#4B67E5
Dot#FFFFFF#EBEBEB · 1px#2D3548
Icon#FFFFFF#EBEBEB · 1px#2D3548
Pill chips
38px rounded pills, four fills.
  • Status dot in green #13B47A
  • Icon tile in tint #E7EAFA
  • 999px radius
30+ assets, delivered in 4 days
Strategy, shoot and edit, handled
Review and approve in-app
No long-term retainer
30+ assets, delivered in 4 days
Strategy, shoot and edit, handled
Review and approve in-app
Cancel any time
PartOn whiteOn blueExcluded
Badge fill#13B47AWhite 20%#E7E9EF
Glyph#FFFFFF#FFFFFF#9AA1AD
Label#121212#FFFFFF#6A7282
Feature ticks
Included rows for pricing tables.
  • 24px circular badge, white check
  • Green #13B47A on white, glass on blue
  • Muted grey dash for excluded
Content Sprint Project
Billed yearly
PartFillStrokeDetail
Seg track#F0F0F2None4px padding
Active seg#FFFFFFNoneSoft shadow, ink text
Switch on#4B67E5NoneWhite 20px knob
Switch off#D1D1D8NoneKnob slides left
Toggles
Segmented pick and an on/off switch.
  • Both 999px radius
  • Active label in ink
  • Click to try them
30+ assets
Ads, organic, product and UGC, delivered in 4 days.
PropertyValue
Fill#FFFFFF
Stroke#EBEBEB · 1px
Radius18px
Shadow0 0 25px rgba(0,0,0,.03)
Cards
White. The border does the work.
  • Let the hairline separate
  • No heavy shadow

Full-bleed blue for hero moments and the final call to action. The dark pill stays dark on blue.

PropertyValue
Fill#4B67E5
Text#FFFFFF
Inner pill#121212
Radius34px
Blue panel
Hero moments and final CTAs.
  • Dark pill stays dark
  • One per page, max
4.5 stars15+ Reviews
PartColour
Filled tile#13B47A
Empty tile#DCDCE6
Star glyph#FFFFFF
Rating label#121212
Sub-label#8A93A8
Review stars
Trustpilot-style green squares.
  • Half-fill for the .5
  • Social proof, hero rating
Timing
At least 1 week before shoot day
PartColour
Background#FDF7DF
Border#F0E3A8 · 1px
Icon tile#F5D34A
Icon glyph#7A5E12
Eyebrow#B8941F
Title text#7A5E12
Callout
Soft gold note for key info.
  • Pale gold fill, gold tile
  • Brown text for contrast
06 · Iconography

Iconography

A small set of simple geometric icons, drawn as inline SVG. Mostly solid fills, monochrome in ink, blue or green. No icon font, no emoji.

ArrowSVGPNG
CheckSVGPNG
StarSVGPNG
Review starsSVGPNG
CircleSVGPNG
DotSVGPNG
ChecklistSVGPNG
SwooshSwooshSVGPNG
07 · Tokens

Radii, shadow & spacing

Generous rounding, minimal diffuse shadows, an 8px spacing base. Click any token to copy its CSS variable.

Corner radius

Pill
999px · buttons, chips
Card
30px · feature cards
Inner
15px · nav, inner cards

Shadow

Soft
Resting card
Direction
Ambient · even
Offset X / Y
0 / 0px
Blur
25px
Spread
0px
Colour
#000 · 3%
Nav / hover
Floating lift
Direction
Ambient · even
Offset X / Y
0 / 0px
Blur
25px
Spread
0px
Colour
#000 · 5%
Pop
Active marker
Direction
Downward
Offset X / Y
0 / 5px
Blur
10px
Spread
0px
Colour
#000 · 15%

Spacing · 8px base

08 · AI prompts

Brief an AI in one paste

Paste this into any AI tool before you ask it to write or design. It sets the brand, the voice and the rules in one go.

Brand onboarding prompt
You are writing and designing for We Should Create (WSC). Treat this as the complete brand brief and match it exactly.

ABOUT
WSC makes high-volume video and photo content for businesses through Content Sprints™: strategy, shoot and edit delivered in 4 days. You bring the goals, we handle the strategy, shoot and edit, and you walk away with 30+ assets. UK-based. The promise: great content, fast, or your money back.

VOICE AND TONE
Direct, warm and confident, with a little cheek. British English throughout (optimise, colour, whilst). Lead with what the customer gets, not what we do. Use "you" more than "we". Punchy and outcome-led, never corporate filler. Two short sentences beat one long one.
Rules: never use em dashes, use a full stop or a comma instead. No Oxford comma, write "strategy, shoot and edit". Sentence case. Keep numbers as numerals (4 days, 30+ assets, £2990). No emoji. Write Content Sprints™ with the trademark on first prominent use.

COLOUR
Brand blue #4B67E5 is the primary, used for one thing per screen, never as decoration. Blue light #6481FF for hover and highlights. Blue dark #3B57D6 for pressed and depth. Blue tint #E7EAFA and wash #F0F2FD for soft fills and chips.
Ink #121212 for primary text and dark buttons. Black #000000 sparingly. Grey #6A7282 for secondary text. Grey light #D1D1D8 for disabled and faint lines.
White #FFFFFF for cards. Page background #F8F8F8. Hairline borders #EBEBEB.
Green #13B47A for success and included ticks, red #E5484B for errors, gold #F8DE40 for review stars. These three are secondary, used sparingly for meaning only, never as a brand colour or decoration. Build on white and off-white with ink text.

TYPOGRAPHY
Inter only (variable, 100 to 900). The signature is big, tight headlines.
Hero: weight 800, 58px, line-height 0.9, tracking -0.05em.
Heading 1: 800, 55px, 0.96, -0.06em.
Heading 2: 700, 40px, 1.0, -0.04em.
Heading 3: 600, 20px, 1.15, -0.03em.
Lead: 400, 16px, 1.4. Body: 400, 14px, 1.27.
Label (buttons, small UI): 500, 13px, -0.03em.
Eyebrow: 600, 12px, -0.02em, uppercase, blue. Sentence case everywhere.
In a hero layout, stack eyebrow, headline, a grey body line then the button, spaced 16, 24 and 32px apart (s-4, s-5, s-6). The headline sits in Bold 700 for a confident hero, Extrabold 800 only for the largest marketing moments.

SPACING, RADII AND SHADOW
Space on an 8px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96.
Radii: pills 999px for buttons and chips, cards 18 to 30px, inner 15px, media 28px. Nothing sharp.
Shadows soft and diffuse: resting 0 0 25px rgba(0,0,0,0.03), hover and nav 0 0 25px rgba(0,0,0,0.05), pop for active markers 0 5px 10px rgba(0,0,0,0.15). No hard drop shadows, no inner shadows.

COMPONENTS
Buttons are pills, 45px tall, padding 0 24px, Inter Medium 13px, icon gap 6px. Primary is ink #121212 with white text and turns blue on hover. Ghost is white with a 1px #EBEBEB border and gains a blue border and text on hover. Blue is #4B67E5 and deepens to #3B57D6 when pressed. One primary per view. Press shrinks to 0.97.
Cards: white, 1px #EBEBEB border, soft 25px shadow, 18 to 30px radius. Let the border separate things, not heavy shadow.
Chips: 26 to 30px pills with a blue tint fill or a thin blue border. Badges: small pills, neutral grey for Free, blue for Paid, ink for Most popular.
Toggle: blue track with a white 26px thumb that slides, active label in ink. Segmented control: pill track #F0F0F2, active segment white with a soft shadow and ink text.
Feature ticks for pricing and feature lists: a 24px circular badge with a white check, green #13B47A on white or a 20% white glass circle on blue. Excluded rows use a muted grey circle with a dash and grey text.
Tags: 24px rounded rectangles, uppercase Bold 11.5px. Core and New in blue, Tool in light blue, Free in green, Coming soon in gold.
Review stars: Trustpilot-style green #13B47A rounded squares with a white star, half-filled for the .5, for social proof only.
Callout: pale gold #FDF7DF note with a 1px #F0E3A8 border, a gold tile and brown #7A5E12 text for key information.

ICONOGRAPHY
Simple geometric inline SVG, mostly solid fills, one colour per icon by meaning (ink, blue or green). The set covers arrow, check, circle, dot, checklist, star and a Trustpilot-style review star, plus the blue "m" swoosh motif. Every mark ships as a transparent SVG and PNG. No icon font, no emoji, no clip-art. Reuse before drawing new.

MOTION
Subtle fade-up on entrance: translateY 16px to 0 with opacity in, about 0.6s, ease cubic-bezier(0.22, 0.61, 0.36, 1). Hovers transition over 0.15 to 0.18s. Confident, never bouncy.

LAYOUT
Off-white canvas. Group content into soft white rounded cards with hairline borders and generous space. The blue "m" swoosh appears large and low-key, bleeding off edges, as the only decorative texture. No gradients, no photographic backgrounds, no noise.

LOGO
Primary is the black lockup, the blue version is secondary. Give it clear space of at least the height of the "m". Place it on white, off-white or solid blue. Never recolour, stretch or rotate it.

When unsure, pick the simplest, most confident option, and show the outcome first.
We Should Create
Brand guidelines · Keep this page bookmarked