Primary lockup / darkUse on black or dark panel surfaces.
Visual Identity
This page translates the brand direction into visual decisions for websites, documentation, product interfaces, diagrams, and presentation materials.
Design Principles
The identity should feel:
- structured
- legible
- durable
- operational
- infrastructure-aware
- quietly sophisticated
Design choices should support trust and comprehension. When in doubt, choose clarity over ornament.
Logo Direction
The eventual logo system should support:
- a primary horizontal lockup
- a compact single M mark or abstract system mark
- favicon and app icon variants
- dark and light mode versions
- one-color usage
- small-size legibility
Recommended mark direction:
- full McGuire Technology wordmark as the primary identity
- geometric single M only when a compact mark is necessary
- abstract system, grid, or architecture-inspired mark options
- grid-based construction
- subtle infrastructure or topology influence
- balanced symmetry
- strong silhouette at small sizes
Avoid using MT as a primary mark. The initials are ambiguous and can be read as unrelated terms such as Mountain or Empty, which weakens recognition and makes the identity less precise. Prefer the full McGuire Technology wordmark, a single M when a compact mark is needed, or an abstract system-inspired symbol.
Core Brand Assets
The current logo direction uses a routed single M built from four complete pipeline strokes. The mark should feel like data flow, infrastructure, observability, and operational systems without becoming a literal circuit-board icon.
Logo Files
Primary lockup / dark
Primary lockup / lightUse on warm light surfaces and documentation backgrounds.
Standalone markUse when the name is already nearby or space is constrained.
App iconUse for product shells, documentation favicons, and compact launch surfaces.
One-color markUse for engraving, single-color documents, stamps, and low-color contexts.
Reversed markUse as a compact white mark on black or deep slate backgrounds.
Application Examples
Operational dashboardDark product surfaces should use the mark as a quiet system identifier, with blue and cyan reserved for active data flow and selected states.
Architectural signagePhysical and large-format uses should preserve the full four-stroke mark, strong spacing, and high-contrast wordmark treatment.
Use SVG whenever possible. PNG versions are included for tools that cannot consume vector assets.
Color
Primary palette
The base palette now works as two balanced variants: a dark-mode foundation and a light-mode foundation. These are the default surfaces the rest of the system should align to.
#030303Dark mode base and shell background
#0A0A0AElevated dark surfaces and cards
#ECE7DELight mode base and calm page backgrounds
#F4F0EALight mode panels, cards, and soft surfaces
#334155Secondary text, nav, structural UI
#64748BMuted text, borders, metadata
Accent palette
Use a small semantic set of accent colors for meaning, not for decoration. The palette below is inspired by Bootstrap-style states: primary, success, warning, danger, and informational cues.
#2563EBPrimary actions, links, selected states
#0F766ECompleted work, healthy systems, trust cues
#D97706Warnings, attention, review states
#DC2626Errors, removal, unsafe or critical actions
#0EA5E9Informational highlights, neutral guidance
#7C5A46Optional warmth for softer contextual accents
Light / Dark mode palette
The palette should work cleanly in both dark and light interfaces. Dark mode uses a black base with dark surfaces, while light mode uses a warm gray-beige base for a calmer, more natural reading experience.
Dark mode
Black
Panel
Signal Blue
Teal
Use for dashboards, terminal-heavy systems, documentation shells, and high-contrast app surfaces.
Light mode
Gray-Beige
Panel
Signal Blue
Teal
Use for docs, proposals, open web surfaces, and interfaces that need a calmer, high-legibility baseline.
Typography
Use Ubuntu Sans as the default digital typeface. It is legible and practical, but it has enough warmth and recognizable character to keep the brand from feeling generic.
Use Ubuntu Mono for:
- code snippets
- technical labels
- environment names
- system metadata
- diagrams and architecture references
Font Cards
McGuire Technology
Use for documentation, product UI, navigation, labels, body copy, and most public brand surfaces.
Practical technology systems for operational clarity, automation, governance, and reliability.
Regular 400Medium 500Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?'"()[]{} / \ | @ # $ % & * + - =
< > ~ ^ _ ` TM ™ ® © § ¶
Operational Clarity
Use for page titles, section openers, pull quotes, presentation covers, and moments that need more brand character.
Systems built to last need language that feels calm, capable, and human.
Regular 400Medium 500Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?'"()[]{} / \ | @ # $ % & * + - =
< > ~ ^ _ ` TM ™ ® © § ¶
system.status = reliable
Use for code, CLI examples, IDs, config keys, environment names, version strings, and compact technical metadata.
deploy --target=prod --region=us-central-1
Regular 400Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?'"()[]{} / \ | @ # $ % & * + - =
< > ~ ^ _ ` => -> :: && ||
99.98% uptime
Use Ubuntu Sans for metric labels and Ubuntu Mono for dense values that need alignment or quick comparison.
Requests1,284,096
Error rate0.017%
Latency p95184 ms
2026-06-09 22:14:08 UTC
+12.4% -03.8% 0.00042 8/16 nodes
McGuire Technology
Use for early wordmark studies, project mastheads, badges, lockup exploration, and strong brand moments.
MCGUIRE TECHNOLOGY™
McGuire / M / mcguire.tech / operations / controls
Layout
Use layouts that feel ordered and inspectable:
- clear section hierarchy
- strong alignment
- generous margins
- practical tables
- restrained panels
- compact labels
- obvious navigation
Avoid layouts that depend on decoration to feel complete. The brand should still feel strong with plain type, spacing, and structure.
Imagery
Use:
- architecture diagrams
- system maps
- topology visuals
- product screenshots
- interface states
- technical workflows
- abstract geometry with a clear systems logic
Avoid:
- handshake stock photos
- people pointing at laptops
- glowing padlocks
- generic cloud graphics
- dark anonymous hacker scenes
- decorative images that do not explain the work
Interface Cues
For software products and internal tools, prefer:
- shadcn/ui as the default UX component system for React and Next.js applications
- dense but readable dashboards
- filters and segmented controls
- clear status indicators
- concise tables
- restrained cards for repeated objects
- explicit empty, loading, and error states
- icon buttons where commands are familiar
Operational tools should feel efficient for repeated use, not like landing pages.
Use shadcn/ui components and semantic design tokens as the starting point for product interfaces. Reach for existing primitives such as Button, Card, Table, Badge, Tabs, Dialog, Sheet, Sidebar, Command, Alert, Empty, Skeleton, Tooltip, Select, Switch, Checkbox, and Slider before designing custom controls.