Brand standards
Brand
standards.
One mark, three colours, three typefaces, square corners. This is the document that governs everything Delcaro Media puts in front of a client. It is public on purpose — most people have never seen inside one, and this is what you get when you hire us to build your brand.
01
The mark
The mark is one piece of artwork. DELCARO sits inside a rule box. MEDIA breaks the bottom rule and hangs below it. Nothing in it is live text, so no font is needed to reproduce it.
Primary — Ink on Paper
Reverse — Paper on Ink
Tinted ground — Ink on Mist
Accent ground — Paper on Blue
Clear spaceRule 1X
X is the cap height of the M in MEDIA. Keep 1X clear on all four sides. Nothing enters that band: no type, no photo edge, no rule, no page trim. Measure from the outer edge of the rule box, and from the lowest point of MEDIA at the bottom.
Constructionmeasured from the master
Every proportion is expressed against C, the cap height of DELCARO. The mark is fixed artwork, so these are for checking a file, not for redrawing one.
| Element | Master px | Ratio to C | Note |
|---|---|---|---|
| DELCARO cap height (C) | 134 | 1.000 | The reference for everything below |
| Rule box stroke | 16 | 0.119 | Even weight on all four sides |
| Rule box, outer width | 855 | 6.381 | Full artwork width |
| Rule box, outer height | 227 | 1.694 | Excludes the MEDIA overhang |
| MEDIA cap height (X) | 63 | 0.470 | Also the clear-space unit |
| MEDIA overhang below the box | 14 | 0.104 | Deliberate. Never trim it flush |
| Inset, left rule to D | 32 | 0.239 | |
| Inset, top rule to cap | 28 | 0.209 | |
| Inset, baseline to bottom rule | 34 | 0.254 | |
| Bottom rule break | 621 → 818 | — | 72.6% to 95.7% of width. MEDIA sits in the gap |
| Artwork aspect ratio | 3.559 : 1 | — | Lock it. Never scale one axis |
Minimum size
| Medium | Minimum width | Falls back to |
|---|---|---|
| Screen | 160 px | D monogram below this |
| Print, offset or digital | 38 mm / 1.5 in | D monogram below this |
| Embroidery, engraving, vinyl | 50 mm / 2 in | The rule break closes up below this |
| Favicon and app icon | any | D monogram only |
The failure point is always MEDIA. Below these sizes the 14 px overhang and the rule break stop reading, and the mark turns into a black bar.
D monogramsquare and round placements
Where the full mark cannot hold, the D from the wordmark stands in. Use it for favicons, app icons, avatars, watermarks, and anything under the minimum width. It never replaces the full mark on a first impression: a website header, a card, a proposal cover, or an invoice always carries the full mark.
The D fills 68% of the tile height and is optically centred. Optical centring is not geometric centring: the round bowl needs a hair more space on the right than the flat stem needs on the left.
02
What breaks the mark
The mark is supplied as one vector file with one colour. Scale it, place it, and stop. Red in this section marks an error. Red is not a brand colour and never appears in Delcaro Media work.
Do not stretch. Lock the 3.559 : 1 ratio.
Do not squash to fill a space.
Do not rotate or tilt. The mark is always level.
Do not recolour. Ink or Paper only.
No gradients behind it and none inside it.
No shadow, bevel, glow, or outline.
Do not convert the fill to a stroke.
Do not crowd it. Hold 1X on every side.
Not on a busy photo. Add a solid panel or a scrim first.
Hold 4.5:1 against the ground. Mid greys fail.
Two more that a screenshot cannot show. Never re-typeset the mark in a font — the letterforms are outlines and no font matches them. Never rebuild it from a raster PNG when the vector is available.
03
Colour
Three colours carry the brand: Ink, Paper, and one electric blue. Everything else is a support tone that exists to keep those three readable.
Core
- Hex
- #0C0C0F
- RGB
- 12 · 12 · 15
- CMYK
- 60 · 50 · 45 · 100 rich black
- HSL
- 240 · 11% · 5%
- Token
- --color-ink
- Hex
- #FAFAF9
- RGB
- 250 · 250 · 249
- CMYK
- 0 · 0 · 0 · 2
- HSL
- 60 · 9% · 98%
- Token
- --color-paper
- Hex
- #2563EB
- RGB
- 37 · 99 · 235
- CMYK
- 84 · 58 · 0 · 8
- HSL
- 221 · 83% · 53%
- Token
- --color-accent
Support
- Hex
- #16161B
- RGB
- 22 · 22 · 27
- Use
- Raised panels on Ink
- Hex
- #F0F0F2
- RGB
- 240 · 240 · 242
- Use
- Section bands, table heads
- Hex
- #E2E2E6
- RGB
- 226 · 226 · 230
- Use
- 1px rules and borders only
- Hex
- #4B4B55
- RGB
- 75 · 75 · 85
- Use
- Secondary body text on Paper
- Hex
- #1D4ED8
- RGB
- 29 · 78 · 216
- Use
- Hover and pressed states
- Hex
- #3B82F6
- RGB
- 59 · 130 · 246
- Use
- Links on Ink — see the note
Accent Light is a required addition. Electric Blue on Ink measures 3.78:1, which fails the 4.5:1 minimum for body text. Anywhere blue text sits on a dark ground — a footer, a dark slide, a dark email — use Accent Light instead. It measures 5.31:1.
Contrast
| Foreground on ground | Ratio | Body text | Large text and UI |
|---|---|---|---|
| Ink on Paper | 18.70 | AAA | AAA |
| Paper on Ink | 18.70 | AAA | AAA |
| Muted on Paper | 8.25 | AAA | AAA |
| Accent Dark on Paper | 6.42 | AA | AAA |
| Accent Light on Ink | 5.31 | AA | AAA |
| Accent on Paper | 4.95 | AA | AAA |
| Paper on Accent | 4.95 | AA | AAA |
| Accent on Ink | 3.78 | Fail | AA |
| Ink on Accent | 3.78 | Fail | AA |
| Line on Paper | 1.24 | Fail | Fail |
Line is a rule colour. It never carries text or an icon that has to be seen. Large text means 24px regular or 18.66px bold and above.
Balance
Blue is a pointer, not a surface. It marks the one thing you want clicked or read next. A page with two blue buttons has no blue button.
| Where | Build | Why |
|---|---|---|
| Ink, large solid areas | C60 M50 Y45 K100 | Rich black. Flat K100 goes grey and mottled across a full card |
| Ink, type under 14 pt | K100 only | Four-plate black on small type shows registration fringe |
| Electric Blue, coated | Pantone 2126 C (nearest) | Confirm against a physical chip before any spot run |
| Electric Blue, process | C84 M58 Y0 K8 | Blue shifts on uncoated stock. Proof it |
| Paper | No ink | Paper is the stock, not a tint. Never print a light grey ground |
04
Typography
Three faces, one job each. Display for headlines, body for reading, mono for labels and numbers. No fourth face, ever.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Web & brand design
Headlines only. Set tracking at -0.03em and line height at 0.95. Turn on text-wrap: balance so a headline never drops one orphaned word. Sentence case, not title case. Never set a paragraph in it.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Independent digital studio in Kitchener, BC, serving Creston and the Kootenays. Custom websites, brand identity, apps, and IT for ambitious businesses.
Everything a person reads in sentences. Body copy runs at 1.125rem / 1.7 and stops at about 68 characters a line. Default tracking. Bold at 600, never 700.
ABCDEFGHIJKLM 0123456789
Section labels · eyebrows · specs · code · prices · dates
Small and uppercase, tracked at 0.2em. It marks structure. It is never a headline and never a paragraph. Use it wherever digits line up in a column, with tabular-nums on.
Scale
| Role | Face | Size | Leading | Tracking |
|---|---|---|---|---|
| Hero | Bricolage 800 | 14vw → 8vw ≥768px | 0.90 | -0.045em |
| Section head | Bricolage 700 | clamp 1.9 → 3.1rem | 0.95 | -0.04em |
| Article H2 | Bricolage 700 | 1.90rem | 1.10 | -0.02em |
| Article H3 | Bricolage 700 | 1.45rem | 1.15 | -0.02em |
| Article H4 | Bricolage 700 | 1.20rem | 1.20 | -0.02em |
| Body | Inter 400 | 1.125rem | 1.70 | 0 |
| Small / caption | Inter 400 | 0.875rem | 1.55 | 0 |
| Eyebrow / label | Geist Mono 500 | 0.75rem | 1.20 | 0.20em |
| Button | Inter 500 uppercase | 0.875rem | 1.00 | 0.025em |
Licence and substitutes
| Face | Licence | Desktop and print | Substitute when unavailable |
|---|---|---|---|
| Bricolage Grotesque | SIL Open Font Licence | Free to install and use commercially | Arial Black, then system sans |
| Inter | SIL Open Font Licence | Free to install and use commercially | Arial, Helvetica, system sans |
| Geist Mono | SIL Open Font Licence | Free to install and use commercially | Consolas, SF Mono, Courier New |
All three are open licence. Install them on the workstation, in the design software, and in Office, so a proposal, an invoice, and a web page match. A substitute is for a client's own machine, not for artwork we produce.
05
Layout
Square corners, hairline rules, generous air, and type that runs big. The grid does the decorating.
The square-corner law
Border radius is 0 on everything: buttons, cards, inputs, images, badges, modals, avatars. The one exception is a round social avatar, where the platform crops it for you. A rounded corner anywhere else is off brand and reads as a stock template.
Measurements
| Item | Value | Note |
|---|---|---|
| Container max width | 96rem / 1536px | Centred, class .container-x |
| Gutter, mobile | 1.25rem | |
| Gutter, ≥768px | 2.50rem | |
| Section padding | 5rem → 7rem | Vertical, mobile to desktop |
| Spacing base | 4px | Everything is a multiple |
| Rule weight | 1px | Line on Paper, white at 10% on Ink |
| Border radius | 0 | Not negotiable |
| Body max line length | ~68 characters | Long copy sits in a narrower column than the grid |
Buttons and links
Primary button: solid Ink, Paper type, uppercase, hover fills Electric Blue. On Ink the button inverts to solid Paper. Text links carry a 1.5px underline that wipes in from the left on hover. One primary button per view.
06
Motion
Fast in, slow to settle. One easing curve across the whole brand.
| Property | Value | Applies to |
|---|---|---|
| Easing | cubic-bezier(0.16, 1, 0.3, 1) | Everything. One curve, no exceptions |
| Hover and state change | 300ms | Colour, border, opacity |
| Link underline wipe | 500ms | Origin flips right → left on hover |
| Overlay and menu | 500ms | Full-screen mobile menu |
| Scroll reveal offset | 30px, 400–600ms | Below the fold only |
Above the fold never starts invisible. A reveal that ships at opacity: 0 and waits for JavaScript delays the first paint and hurts the page score. Content in the first screen animates from a visible state or does not animate. Below the fold, reveal freely.
Honour prefers-reduced-motion everywhere. When it is set, everything arrives in its final state with no transition.
07
Voice
Plain, short, and direct. A Delcaro Media sentence tells a business owner what they get, not how it was built.
Rules
Active voice. One idea per sentence. Twenty words is long. Say can, will, and must. Put the condition first: “If the form fails, we get an email.” Name things the way a client says them, not the way the system stores them. Never open by announcing what you are about to say.
Write this, not that
Web & brand design that turns heads.
Leveraging cutting-edge digital solutions to elevate your online presence.
Your site loads in under a second on a phone.
We utilise best-in-class performance optimisation methodologies.
Custom websites, brand identity, apps, and IT for ambitious businesses.
A full-service, end-to-end partner for all your digital needs.
Say hello →
Click here to submit an enquiry today!
Banned outright: solutions, leverage, synergy, seamless, cutting-edge, best-in-class, game-changing, unlock, elevate, robust. Exclamation marks in client-facing copy. Emoji in headings.
The name
| Context | Correct | Wrong |
|---|---|---|
| All client-facing copy | Delcaro Media | Delcaro, DM, delcaro media |
| Domain and handles | delcaromedia.com | delcaro-media.com |
| Web address in print | www.delcaromedia.com | https://delcaromedia.com/ |
| Phone | 250-977-5565 | (250) 977 5565 |
| Location | Kitchener, British Columbia | Creston, BC |
The studio is in Kitchener. Creston and the wider Kootenays are the service area, and copy says so plainly: “in Kitchener, BC, serving Creston and the Kootenays.”
08
Applications
The mark, the palette, and the three faces, applied. Anything not shown here follows the nearest example.
Business card3.5 × 2 in · 89 × 51 mm
Front
Web design · Brand identity · Apps
SEO · E-commerce · IT support
Back
| Item | Spec |
|---|---|
| Trim | 89 × 51 mm, square corners |
| Bleed | 3 mm all sides |
| Safe margin | 5 mm from trim |
| Ground | Ink, rich black C60 M50 Y45 K100 |
| Mark width | 55 mm, top-left, 1X clear all round |
| Name | Inter 600, 9 pt, Paper |
| Detail lines | Inter 400, 7.5 pt, Paper at 72% |
| Stock | 16 pt or heavier, soft-touch matte laminate |
Email signature
jon@delcaromedia.com
www.delcaromedia.com
Plain HTML, no images except the mark, which is a PNG at 2× and 160px wide. A 3px blue rule on the left is the only colour. No quote, no legal disclaimer, no social icon row, no “sent from my phone”.
Icons and social
| Placement | Size | Artwork |
|---|---|---|
| Favicon | 32 · 48 · 180 px | D monogram, Paper on Ink |
| App icon | 256 px | D monogram, Paper on Ink |
| Social avatar | 400 px square | D monogram, Paper on Ink |
| Social banner | 1500 × 500 | Full mark on Ink, left third, 1X clear |
| Open Graph card | 1200 × 630 | Full mark on Ink with the page headline |
| Video bug | 8% of frame width | Full mark, Paper, lower right, 4% inset |
Documents
Proposals, invoices, and reports: Paper ground, full mark top-left at 45 mm, Bricolage for the title, Inter for everything read in sentences, Geist Mono for line items and totals with tabular figures. One blue element per page at most — usually the total, or the one thing to sign.
09
Download the kit
The vector masters and raster exports, free to take. Press, agencies, and partners: use these rather than pulling a logo off the website or out of an email.
Vector. Print, documents, anything on a light ground.
Download →Vector reverse. Anything on Ink, blue, or a photo panel.
Download →Vector filled with currentColor. It takes the colour of its parent.
Download →Transparent raster for Office, email, and anything that rejects SVG.
Download →Transparent raster reverse, for dark slides and dark email.
Download →Vector. Favicons, avatars, and watermarks on a light ground.
Download →Vector reverse. Favicons and avatars on Ink.
Download →Square, ready for a favicon set, an app store, or a social avatar.
Download →All eight files in one archive.
Download →The vector files hug the artwork exactly, so the file edge is the clear-space edge — add the 1X band yourself. The web SVG is filled with currentColor, so it takes the colour of whatever element it sits in. If you need a size, a format, or a lockup that is not here, ask.
Want one of these for your business?
Brand identity, built to this standard, with the files and the rules to keep it consistent.
