NewsreaderDisplay and headingsWeights 400-500
Turn more searches into sales.
Brand guidelines / V1.4 / July 2026
Enok SEO Style Guide
Clear and credible beats loud.
Enok is a senior search team, and the brand should feel like one: editorial, warm, and precise. These standards keep the identity, interface, evidence, and writing consistent everywhere the company appears.
01 / Identity
The swoosh and the wordmark.
The mark is a wave gathering forward. It may work alone in tight spaces, while the horizontal lockup carries the full name with a fixed proportion and optical baseline.
Minimum markThe mark may not appear below 16px tall.
Minimum lockupThe horizontal lockup may not appear below 90px wide or 0.95in in print.
ClearspaceKeep one full mark width clear on every side.
Approved treatmentsInk or Pine on light fields. Ivory on Ink or Pine. Signal Green on dark fields only.
Lockup construction
Mark, then wordmark, on one visual base.
Set the mark left of the Jost SemiBold wordmark, align both to the visual baseline, and use a gap of roughly half the mark width. The wordmark remains Jost 600, uppercase, with its production tracking intact.
1x1x1x1x
Enok SEO
Enok SEOEnok SEOEnok SEOEnok SEO- Large
- 34 x 28px mark, 30px wordmark, 15px gap
- Standard
- 25 x 21px mark, 22px wordmark, 11px gap
- Small
- 19 x 16px mark, 17px wordmark, 9px gap
- Optical baseline
- Align the visible base of the name to the mark's lower edge. Never center the text box.
Approved backgrounds
Every surface has one correct lockup.
Enok SEOEnok SEOEnok SEOEnok SEOEnok SEOEnok SEOIcon treatments
Small spaces use the mark alone.
Misuse
What never happens to the mark.
- 01Stretching or squashing the mark
- 02Setting the wordmark in Signal Green
- 03Adding shadows, outlines, or effects
- 04Placing a lockup over photography or texture
- 05Rotating, cropping, or repeating the mark
- 06Using the Signal Green mark on a light field
- 07Resetting the wordmark in another typeface
- 08Applying gradients or unapproved colors
Social safe areas
Keep the identity clear across every crop.
Social banners use an Ink field with the Ivory lockup. Keep profile-image zones open, export at the exact platform size, and never place the lockup on photography.
Enok SEOEnok SEOEnok SEOEnok SEOEnok SEO02 / Color
Warm neutrals. One signal.
Ivory, Sand, Clay, Ink, and Pine create the editorial field. Signal Green is reserved for action and high-value emphasis. Functional colors communicate state, never decoration.
#F6F3EBPrimary canvas#EFEBDDWarm secondary surface#EAE4D4Supporting section band#FFFEFACards and quiet contrast#191713Primary text and dark field#14241CPrimary brand field#1B2E23Cards on pine only#2EE06BPrimary action and signalInk on Signal Green
White never appears on Signal Green.
Use Ink for labels, buttons, icons, diagrams, and data marks on Signal Green. Signal Green on Ivory is decorative only and never carries required text.
Functional palette
State colors have one documented job.
Signal Hover
#29C95FPrimary-action hover
Link Green
#0F9D44Large or underlined links
Deep Green
#0A7A33Accessible green emphasis
Mint Wash
#EAFBECSuccess background
Tan
#A6946EEditorial secondary accent
Brick
#A3402FError text and icons
Red Soft
#D06A54Negative data accent
Red Deep
#7E3122High-contrast error state
Blush
#FBEBE7Error background
03 / Typography
Four voices, each with one job.
Newsreader carries hierarchy, EB Garamond carries the argument, Hanken Grotesk handles every functional label, and Jost appears only inside the approved wordmark.
EB GaramondEditorial body and pull quotesWeights 400-500
Customers find brands they trust through search, social media, and AI. Enok makes your brand the one they find.
Hanken GroteskUI, navigation, labels, CTA, and dataWeights 400-600
Navigation, labels, controls, captions, and data stay quiet, direct, and easy to scan.
JostEnok wordmark onlyWeights 600
Enok SEO04 / Layout and backgrounds
Space creates the hierarchy.
Build open, full-width bands around constrained content. One concept earns each section, one action receives visual priority, and the rising curve marks a real change in the argument.
Spacing scale
8162432486496128
Use the production 8px scale for component spacing and larger section rhythm.
Content widths
- 1360px
- Shell: navigation, hero, and cover spreads
- 1264px
- Content: standard section container
- 680px
- Prose: article body measure
Section descent
Ivory heroSand proofClay detailPine chaptersSignal actionInk footer
Hub pages begin on Ivory, deepen as the argument advances, and end on Ink.
320pxMinimum supported canvas. One column with 18px page gutters.
375pxCompact mobile. Long labels wrap without shrinking controls.
768pxTablet. Two-column comparisons may remain paired when content fits.
1024pxSmall desktop. Section shells use 40px gutters.
1440pxPrimary design canvas. Content stays inside the 1360px shell.
1920pxWide desktop. Measure stays fixed while outer whitespace grows.
05 / UI elements
Pills, rules, and one clear next step.
Controls are restrained and literal. Hanken Grotesk labels the action, 1px rules create structure, and comparison surfaces keep the same anatomy so differences stay easy to read.
Actions
Buttons document default, hover, focus, active, and disabled states. Every target is at least 44px tall, and the label names the outcome.
Form states
Enter a full email address, such as name@company.com.
Keep labels visible and errors beside the field. Brick marks the border, icon, and helper text, so color is never the only signal.
Tinted elevation
Warm surfaceDark surface
Light surfaces use a deepened Tan shadow. Dark surfaces use a deepened Pine shadow. Neutral gray and pure black shadows are not part of the system.
Card parity
Comparable services share one anatomy.
Technical SEO
The site, made crawlable.
- Crawl control
- Architecture
- Performance
Digital PR
The trust, earned.
- Mentions
- Reviews
- Citations
Plans are scoped, not sold.
Diagnosis comes before a package, price, or prescribed list of deliverables.
06 / Imagery and graphic language
Show the work. Draw the system.
Photography and screenshots prove who did the work and what the product does. Diagrams use thin lines, circles, orbits, and the rising swoosh only when they clarify a relationship.
Orbits
Hierarchy comes from radius, line weight, and labels. Signal Green identifies one point of focus.
The rising curve
The logo's trajectory becomes a section transition and CTA detail, never a repeated wallpaper motif.
Evidence frames
Browser and report frames explain a real product moment with one highlighted customer result.
07 / Motion
Slow, looping, purposeful.
Animation supports the product story without delaying access to the content. The meaningful still state is always complete.
- 01
Long loops
Ambient search, orbit, and typing sequences run for 11 to 18 seconds so the page feels active without becoming busy.
- 02
Purpose first
Movement must explain ranking change, system relationships, progress, or state. Decoration alone is not a reason to animate.
- 03
Quiet entrances
Content may fade up by 24px over 700ms with a short stagger. Interface feedback stays brief and immediate.
- 04
Still by default when requested
Reduced-motion mode stops ambient loops, removes entrance movement, and preserves every label, value, and action.
08 / Voice
Write like a senior consultant, not a vendor.
Use plain business language, concrete outcomes, and supportable claims. Confidence comes from judgment and evidence, not urgency or inflated adjectives.
Sounds like Enok
"More sales from the traffic you do not pay for."
"Diagnosis first. Then the work."
"We will tell you honestly whether Enok is the right partner."
Short declaratives. Specific outcomes. Clear limits.
Never
"Skyrocket your rankings with cutting-edge AI!"
"Guaranteed number one results or your money back."
"Synergistic omnichannel search domination."
No hype, no guarantees, no jargon walls, no emoji, and no em dashes.
Section titles
"Start with the pages closest to revenue."
Structural copy can carry a little dry wit while the supporting argument stays factual.
CTA lines
"Know you need help? We will pick the path together."
The ask is direct and human, with a clear outcome instead of generic funnel language.
Claims
State the measure and the limit.
Identify the source, timeframe, attribution boundary, and uncertainty whenever they affect the decision.
09 / Accessibility
Everyone gets the clear version.
WCAG 2.2 AA is the minimum. Approved pairings, semantic structure, visible focus, full keyboard access, reduced motion, and 320px reflow are release requirements.
Ink on Ivory
16.1:1AAA, any text
Ivory on Pine
14.6:1AAA, any text
Ink on Signal Green
10.2:1AAA, CTA labels
Signal Green on Pine
9.2:1AAA, headings and accents
Link Green on Ivory
3.2:124px+ or underlined links only
Brick on Ivory
5.7:1AA, error text and icons
Signal Green on Ivory
1.6:1Never text; decorative only
Keyboard and focus
Visible focus exampleEvery interactive element has a high-contrast focus ring that remains visible on light and dark fields.
Structure and alternatives
Use landmarks, one literal H1, ordered heading levels, useful alt text, descriptive links, and status text that does not rely on color.
Reflow and targets
Layouts must reflow at 320px without document-level horizontal scrolling, preserve source order, and provide 44px minimum touch targets for controls.
Reduced motion
Ambient loops stop and transitions become immediate while the complete still state remains available.
10 / Downloads and press assets
Approved files, ready to use.
Use the production files below instead of screenshots, copied logos, or recreated wordmarks. Each download keeps the approved proportions and source quality intact.
Downloadenok-mark-ink.pngLight surfaces and printDownloadenok-mark-ivory.pngInk and Pine surfacesDownloadenok-mark-pine.pngTonal use on light surfacesDownloadenok-mark-green.pngDark surfaces, avatars, and campaignsDownloadparis-vega-founder-headshot.jpgApproved founder portraitDownloadreporting-product-preview.pngApproved product evidence preview
Press boilerplate
"Enok SEO is a senior search team. Customers find brands they trust through Google, social media, and AI instead of just ads. Enok makes your brand the one they find, and makes your website easy to buy from. Learn more at enokseo.com."
Use as one paragraph. Edits require owner approval.
Name in print
- First mention
- Enok SEO, always two words
- Later mentions
- Enok is acceptable
- Do not use
- EnokSeo, Enokseo, EnokSEO, or Enok S.E.O.
11 / Governance
Rules only work with an owner.
The guide is versioned, the owner is named, and exceptions have one documented path. Narrative fields may be edited in Metatron, while design tokens, assets, ratios, and component rules remain code-controlled.
Version history
V1.0Identity, color, typography, graphic language, UI, motion, and voice.
V1.1Accessibility, web standards, press assets, and governance.
V1.2Completed color states, lockup matrix, shadows, and Signal Green usage.
V1.3Hanken Grotesk UI voice, card parity, scoping strip, and section-stack rules.
- Source of truth
- This page, the production brand constants, the approved lockup component, and the files linked here define the current Enok public identity.
- Owner
- The founder owns brand decisions. Questions, asset requests, and judgment calls route to hello@enokseo.com.
- Change control
- A rule change updates the version, code-owned tokens, source assets, examples, and this guide in the same release.
- Quality gate
- Review the optical baseline, clearspace, contrast, copy, responsive behavior, motion preference, links, and export quality before release.
- Exceptions
- Written owner approval is required before an exception ships. Record the reason, scope, and expiration so one exception does not silently become a rule.