Brand guidelines
One brand. Eight practices behind it.
Everything you need to represent DGTL correctly: the mark, the lockup, color, type, and voice. If something you need isn't here, ask us before improvising.
Version 1.0, July 2026
The mark
The Octet Grid: eight cells in a three-by-three grid with the center removed. The eight cells are the eight practices. The empty center is the client the practices surround. The mark tells the firm's story without a single word, which is exactly what a mark is for.
Construction: a 64-unit canvas, eight 14-unit squares with a 3-unit gap and a 3-unit corner radius. The center cell is absent, never filled, never replaced with a letter or icon.
Clear space: keep at least one cell width of empty space on all four sides of the mark. Nothing enters that zone, including the wordmark in non-lockup contexts.
Minimum size: 16 pixels square on screen. Below that, use the wordmark alone. In print, 6 millimeters.
What not to do
- Don't rotate, skew, or mirror the mark.
- Don't recolor it outside the approved palette (brand blue, black, white).
- Don't add shadows, gradients, outlines, or any effect.
- Don't fill the center cell. The empty center is the point.
- Don't redraw or approximate it. Use the files on this page.
- Don't place it on busy photography or low-contrast backgrounds.
The lockup
The primary lockup pairs the mark with the DGTL wordmark, set in JetBrains Mono semibold (weight 600) with tight tracking. The mark sits at 1.125 times the wordmark's font size, with a gap of half the mark's width. Use the lockup in headers, footers, documents, and anywhere the brand introduces itself.
DGTL
On light backgrounds: brand-600 mark, near-black wordmark.
DGTL
On dark backgrounds: brand-500 mark, near-white wordmark.
The wordmark is always DGTL in caps, always JetBrains Mono, always semibold at weight 600. It never appears in Inter, never in lowercase, never spaced out.
Downloads
Every approved file, straight from the source. SVG for anything that scales, PNG where a raster is required. If a format you need is missing, ask instead of converting.
Color
Two families, one accent discipline. Blue carries the brand. Coral punctuates it. Neutrals do the reading work.
Brand blue
The primary family. Technical practices (Build, AI, Data, Secure) use brand-600 through brand-900. The mark uses brand-600 on light surfaces and brand-500 on dark.
brand-50
#EFF4FF
brand-100
#DBE6FE
brand-300
#93B4FD
brand-500
#3B76F6
Dark-mode tint
brand-600
#2563EB
Primary. 5.2:1 on white, AA
brand-700
#1D58D8
6.1:1 on white, AA
brand-900
#1E408A
brand-950
#172954
Coral
The accent. One coral element per viewport, maximum. In most views that element is the primary CTA, set in coral-700 with white text. coral-500 is retired from text and button roles: at 2.8:1 against white it fails WCAG AA, so it survives only as a decorative accent.
coral-100
#FFE8D9
coral-300
#FFAE80
coral-500
#FF6B35
Accent only. 2.8:1 with white, fails AA text
coral-700
#C73C12
CTA + white passes AA 4.5:1
coral-900
#802C16
Neutrals
A blue-tinted slate ladder in the same hue family as brand blue. Light mode sets near-black text on a slate-50 page surface (#f8fafc) with white cards and #e2e8f0 borders. Dark mode sets near-white text on midnight navy (#020617) with #0f172a panels and #1e293b borders. Both themes are first-class: every surface ships light and dark, and contrast meets WCAG AA in both.
Color rules
- One coral element per viewport. The primary CTA has first claim.
- coral-700 plus white for buttons and CTA text. Never coral-500.
- Technical practices tint with the brand family, business practices (Marketing, Sales, Studio, Advisory) with the coral family.
- No Tailwind default hues. Every color on the site comes from these tokens.
- Dark mode is not an afterthought. If a color pairing ships, it ships in both themes at AA contrast.
Typography
Two typefaces, no exceptions. Inter for everything readers read. JetBrains Mono for the wordmark, eyebrows, and code.
Aa
Inter
UI and body text. Loaded with latin and latin-ext subsets so Spanish accents render in the brand face, not a fallback.
Aa
JetBrains Mono
Weight 600 only. The wordmark, section eyebrows, data labels, and code. Used sparingly, it reads architectural. Used everywhere, it reads like a terminal.
Scale
Eight practices. One team.
Eight practices. One team.
Eight practices. One team.
Eight practices. One team.
Eight practices. One team.
Voice
Latitude zero. Offset zero.
Primary slogan for cold surfaces (LinkedIn banner, deck covers). Always within eye-span of the H1 or the Quito fact line: latitude zero is the address, offset zero is the promise (UTC-5 year-round, zero seams).
Nothing between.
Second voice, accompanied surfaces only (deck interiors, /framework, this guide) until the defined awareness trigger fires: three signed reference clients or meaningful branded search. Never alone on a cold surface.
DGTL reads like an engineer who can write, not a marketer who knows engineering jargon. Confident, direct, opinionated when warranted.
Principles
Specific beats clever
Every claim carries a number, a timeframe, or a concrete example. Round numbers and vague quantities read as filler.
Contractions on
We're, don't, you'll, it's. Zero contractions is a formality tell, and formality is not the same as professionalism.
Vary the rhythm
Short sentences mixed with long ones. Never all short. Never all long.
Active voice, direct address
You and we. Never 'clients' or 'users' when the reader is the client.
Opinions stated plainly
No hedging, no 'some might say'. If we believe something, we say it.
Banned outright
These never appear in DGTL copy. The em-dash ban is absolute: use periods, commas, colons, or rewrite the sentence.
Punctuation
Em-dashes anywhere. Ellipses outside quotations.
AI tells
'delve', 'seamless', 'robust', 'leverage', 'empower', 'streamline', 'cutting-edge', 'comprehensive', 'innovative', 'elevate', metaphorical 'landscape', and their relatives.
Geographic framing
'nearshore', 'offshore', 'cost efficiency', 'cheap', 'affordable'. Quito is a strategic choice, never a cost play.
Sentence starters
'Moreover,', 'Furthermore,', 'Additionally,', 'In conclusion,'.
Spanish voice
Latin American Spanish, tú-form, neutral across markets. Rewritten, never translated literally. The English voice rules apply in Spanish too.
- Tú, never usted. Friendly-professional, no country-specific slang.
- No calques: 'usar' instead of 'aprovechar' as a leverage calque, no 'revolucionar', no 'de vanguardia'.
- English technical tokens stay in English when LATAM buyers use them that way: app, cloud, backend, sprint, dashboard, CRM.
- Certifications never translate: SOC 2, ISO 27001, HIPAA, GDPR, WCAG AA.
Iconography
Lucide React, and only Lucide React, until the commissioned custom set ships.
- Every icon renders as inline SVG with currentColor, so it tints correctly in both themes.
- No third-party icon CDNs, no hotlinked images, no mixed icon families.
- Icons support the text next to them. An icon that needs a caption to make sense is the wrong icon.
Motion
The polish should be felt, not seen. If a user notices the animation, it's too much.
- Every animated component respects prefers-reduced-motion.
- Nothing auto-advances. Carousels that move by themselves fail WCAG and got removed once already.
- Motion communicates hierarchy and causality, never decoration for its own sake.
DGTL
Questions
If a use case isn't covered here, don't improvise. Write to us and we'll answer within one business day.
hello@withdgtl.com