This deck is for designers, agencies, and freelancers applying the Hydra brand across digital surfaces. Every rule has a spec. Every principle has a finished example.
Speaks in citations. Ships the fix. Quantifies everything. Never uses adjectives where a number fits.
Equal to the width of one vertical stroke on all four sides. At 32px mark, clear space = 5px minimum.
16px. Below this the crossbar disappears. Use text-only "Hydra" wordmark instead.
6mm. At 300 DPI this is 71px. Use the SVG source, never upscale a PNG.
Dark bg only. With glow.
Light bg. Email, GitHub.
Single color dark. Embossing, watermarks.
Legal docs, fax, 1-color print.
Rule: Display gradient is for dark surfaces only. UI gradient for light. Mono white or mono black when color is not available. Never mix these modes on a single surface.
Never use custom fills or off-brand colors.
Never stretch or squash. Constrain proportions.
Always upright. No tilts, no angles.
Never place on similar-value background.
Glow only. Hard shadows never.
Never outline or stroke the mark.
Solid or near-solid backgrounds only.
Low contrast. Use UI gradient instead.
Naming convention: hydra_[asset-type]_[variant]_[size].[ext] Access: Figma brand file (request via #brand in Slack). PNG exports at 1x and 2x live in /assets/logos/ in the main repo.
H right bar runs full height, split by an 18px gap at y12. Top square and lower column share the same x-axis — one break, two reads: H crossbar and i tittle simultaneously.
Display gradient on dark base.
High contrast. Gradient reads clearly. Glow adds depth.
Display gradient on light.
Low contrast. #34D399 on white = 2.1:1. Fails WCAG AA.
UI green for citations on light: #059669 border, #F0FDF4 fill.
Display green on light: #34D399 = 2.1:1 on white. Fails WCAG.
Target: WCAG AA for all text. #34D399 is decorative only on dark. Never use it as text color on light backgrounds.
Italic weights are never used. Avoid faux bold. Mono fallback: 'SF Mono', 'Fira Code', monospace. Never subset without confirming all required glyphs.
Extreme tight tracking at display scale. Weight 900. Numbers lead. Short, declarative.
Green eyebrow → white heading → dim body. Three distinct levels. Never collapse into two.
Citations always in mono. Green = convention name. Teal = file path. White = count.
Never weight 400 or below at display scale. Never zero tracking above 24px. Looks unfinished.
All-caps is for 11px eyebrow labels only. Never on body copy, never on headings, never above +14em tracking.
Hydra vocabulary is numbers and mechanisms, not adjectives. Never: revolutionary, seamless, robust, cutting-edge. Never italic.
Off-grid values (6px, 10px, 14px) are permitted only for optical corrections. Never for structural spacing.
Document off-grid values in code comments when used. Never undocumented.
Line heights follow a 4px grid. 16px text → 24px line height. 13px text → 20px. Always divisible by 4.
Every node represents a real system component. Every connector is a real data flow. No abstract decorative shapes. If a node cannot be labeled with its actual function, remove it.
Source: Heroicons v2 Outline as base. Custom icons follow the same grid and stroke spec. Never mix icon families. Never resize by adding stroke-width — only scale the SVG element.
No animation. Data display, number updates, status toggles. Motion here reads as lag, not polish.
Micro-interactions. Button press, hover state, checkbox, tooltip appear. Feels responsive, not slow.
Panel open/close, modal, slide transition, menu expand. Default for most UI motion.
Full-page transitions, onboarding steps, major state changes. Use sparingly.
Elements enter fast, exit slow. Ease-out on enter (responsive feel). Ease-in on exit (deliberate feel).
Opacity transitions always accompany transform transitions. Never transform without opacity change.
Never animate layout properties (width, height, top, left). Use transform and opacity only for performance.
Respect prefers-reduced-motion. All animations must be disabled when the system flag is set.
Fast start, gradual deceleration. Use for enter animations. Elements arrive immediately.
Slow start, fast exit. Use for exit animations. Elements leave with intention.
Symmetric acceleration. Major state transitions, page changes. Deliberate and weighted.
Show the key metric as a large number above or beside the chart. The chart is evidence, not the headline.
Every chart answers a specific question. If you cannot state the question in one sentence, remove the chart.
Use the color sequence in order. Never introduce a 4th data color. Use opacity variations within one color before adding a new hue.
Every chart gets a caption: what it shows, the period, and the data source. No unlabeled data.
Never truncate the y-axis to exaggerate trends. Hydra's brand is credibility — misleading charts destroy it.
All buttons: height 40px default (32px compact, 48px large). Padding 16px horizontal. Border-radius 8px. Font 13px/700. Min-width 80px. Never all-caps button labels.
Every email has exactly one CTA. The stat block is the evidence. The headline is the claim. The CTA captures the install. Never more than 3 paragraphs of body copy.
Consider typed catch block — matches async-error-handling convention. Not blocking.
The comment updates live as code changes. It is not static. The GitHub check system surfaces green/red in the PR merge UI independently of the comment body.