Design
System
Everything that makes Modh look and feel the way it does.
Colors, type, spacing, components, animations, mesh gradients,
mezzotint textures, and ready-to-use video backgrounds.
All in one place.
Brand Mark
Lockup
Modh
ModhUsage
Minimum clear space: 1x mark height on all sides.
White mark on dark. Black mark on light.
In code: dark:invert handles automatic switching.
Color
Light Mode
Dark Mode
Accent
Utility Tokens
| Token | Light | Dark |
|---|---|---|
Typography
Plus Jakarta Sans
400 / 500 / 600 / 700 / 800
Geist Mono
400 / 500
Scale
Design System
Build the software.
Every engagement follows the same protocol.
Diagnosis
We embed with your team, ship real systems, and leave. Your people own everything.
Your team sees working software on day one.
Labels & System Text
Spacing
Radius
Components
Buttons
Surface Tiers
Base
Subtle inner glow + noise texture. 1px border + 0.5px outer ring. The default card surface.
Elevated
Dual radial glows, inset edge highlights. Gradient border intensifies on hover. For featured cards.
Signature
Gradient border via mask-composite with grain overlay. For CTA and pricing hero.
Border Tiers
1px solid + 0.5px outer ring. Double-line depth effect.
Gradient border via mask-composite. Brighter at top. Intensifies on hover.
Gradient border with elevated surface and grain overlay. The signature Modh card.
Card Compositions
Standard
Subtle border, hover glow. The default surface.
Highlighted
Gradient border, top-weighted glow. For emphasis.
$2k
one-time
Pills
Icon Containers
Inputs
Status
Motion
One easing curve everywhere.cubic-bezier(0.23, 1, 0.32, 1)
Scale 1.02x. Purple wash slides up via ::after.
Micro-lift, purple-tinted shadow, inset highlight. Aurora easing.
24px Y + opacity. 0.8s duration. Stagger via delay.
GSAP ScrollToPlugin. 1s duration, power3.inOut easing. 80px offset for navbar clearance. Via useSmoothScroll() hook.
All animations respect prefers-reduced-motion. Durations go to near-zero. useInView returns visible immediately.
Layout
Container
max-w-6xl : 1152px. Standard sections.
max-w-5xl : Protocol, design system.
max-w-4xl : Hero, centered content.
px-6 : Horizontal gutter. Always.
Grids
Breakpoints
| Prefix | Width | Usage |
|---|---|---|
| (base) | 0px | Mobile-first default |
| md: | 768px | Grids shift. Nav switches. Primary. |
| lg: | 1024px | Hero text scales up. |
Texture
SVG feTurbulence grain overlay. Fixed, full viewport, z-9999.
3% opacity. Adds film-stock texture across every surface.
Aurora
Five accent colors inspired by the northern lights. Use them for gradients, highlights, and the rich mesh backgrounds that give Modh its signature look. Each mesh variant has a distinct mood. Pick the one that fits.
Palette
Gradient
Mesh Gradients
Living Mesh (WebGL)
GPU-accelerated mesh gradients via Paper Shaders. Organic distortion, swirl, and built-in film grain. Use for hero sections, overlay cards, and showcase moments.
Animated Mesh (CSS)
Lighter alternative using CSS radial gradients animated via requestAnimationFrame. Lower GPU cost. Good for cards, sections, and battery-conscious contexts.
Pauses automatically for prefers-reduced-motion.
Pauses automatically for prefers-reduced-motion.
Usage
// Static mesh (zero runtime cost)
import { AuroraMesh } from '@/components/aurora-mesh'
<AuroraMesh variant="ember" />
// Variants: borealis | ember | frost | moss | dracula | violet | aurora
// Living mesh (WebGL, Paper Shaders)
import { PaperMesh } from '@/components/paper-mesh'
<PaperMesh palette="violet" speed={0.12} />
// Palettes: borealis | violet | ember | frost | moss | dracula
// Animated mesh (CSS rAF, lighter)
import { AuroraMeshAnimated } from '@/components/aurora-mesh-animated'
<AuroraMeshAnimated palette="aurora" speed="slow" />Overlay Patterns
Text overlays that sit on top of mesh backgrounds. Headlines use Jakarta Sans. Labels, numbers, and metadata use Geist Mono. These are the building blocks for video title cards, bullet lists, data callouts, and lower thirds.
Why Your $100K
Project Failed
Imran Gardezi
The Support Bottleneck
Section Card
“One message. Twenty-three minutes gone.”
Imran Gardezi
3 Signs of Dev Purgatory
- 01Your team ships features nobody asked for
- 02Every sprint ends with carry-over
- 03You measure activity, not outcomes
73%
of enterprise software projects fail
Source: Standish Group, 2024
Imran Gardezi
Founder @ Modh
Video Edit Styles
Every overlay, background, and transition in the Modh video system. White text on black. Framer-style easing. Custom sound design.
The Edit Timeline
What plays during your video, in sequence. Each composition enters and exits with paired opacity and translateY.
Title Card
Full-screen title and subtitle on black. Framer-style fade and translateY entrance.
Lower Third
Glass card with pulse dot, name, and role. Slides in from left, slides out at end.
Section Card
Bottom toast banner for section transitions. Transparent background, glass card with numbered section.
Bullet Overlay
Numbered bullet list on black with eyebrow label. Tight 2-frame stagger between items.
Outro
End screen on black. White pill CTA button (modh.ca style), muted URL, subtle subscribe.
Cinematic Tools
Compositing layers for demos, B-roll windows, and split-screen moments.
Mesh Backgrounds
4K looping aurora meshes. Use as DaVinci timeline backgrounds or composite behind overlays.
Render Locally
cd video-engine npm install # Render all templates python ../scripts/render-templates.py # Dry run (show commands without rendering) python ../scripts/render-templates.py --dry-run # Render single composition npx remotion render src/index.ts TitleCard --output out/title-card.mp4 # Render aurora backgrounds only npm run render:aurora-all
Template Config
{
"compositionId": "TitleCard",
"props": {
"title": "Why Your $100K Software Project Failed",
"subtitle": "And what to do instead"
},
"render": "npx remotion render src/index.ts TitleCard --props '{...}'"
}Ship It
The entire Arctic Midnight design system, encoded as a Claude Code skill. Every color token, every component pattern, every animation rule, every convention. Drop it into any project. Claude builds in your system from day one.
SKILL.md
Colors, typography, spacing, components, animation, mesh gradients, Remotion compositions, quality rules. One file. Complete system knowledge.
mkdir -p .claude/skills/design-system curl -o .claude/skills/design-system/SKILL.md \ https://modh.ca/exports/design-system-skill.md
# In Claude Code, run: /design-system # Claude now knows every token, pattern, # component, and convention in Arctic Midnight.
Core Blocks
Data-driven, composable blocks for building any page type. Each consumes brand-config JSON via props and follows all design system rules.
Layout
We build AI systems that work
Strategy, architecture, and hands-on engineering for companies that refuse to waste another dollar on software that doesn't ship.
Stop building. Start shipping.
Book a strategy session and get a clear path forward in 90 minutes.
Trust
15 years. Shopify. Brex. Motorola. Pfizer.
Built systems at
“Imran diagnosed the real problem in 30 minutes. Our previous agency spent 6 months building the wrong thing.”
Content
Dev Purgatory
Your project is perpetually 80% done. The remaining 20% takes longer than the first 80%.
Expensive Rubbish
You paid six figures for software nobody uses. It technically works. It practically doesn't.
New tool every quarter. No institutional memory. Each migration costs more than the last.
You need to rewrite everything in the latest framework
You need to stitch what works into what's missing
AI will replace your developers
AI will make your best developers 10x more dangerous
Diagnosis
We audit your current system, identify what is working, what is broken, and what is missing.
Scope + Sequence
Clear project plan with milestones, dependencies, and risk mitigation built in.
Build
Hands-on engineering. We ship working software every week, not slide decks every month.
Diagnose
Audit current state
Scope
Define the plan
Build
Ship working code
AI Strategy
Figure out where AI actually helps your business, not where it sounds cool.
System Architecture
Design systems that scale without drowning in complexity.
Hands-on Build
We write the code. Ship every week. No slide decks.
6-month agency engagement
Slide decks, weekly status calls, scope creep, and a product nobody tested with real users.
90-minute strategy session
Clear diagnosis, prioritized roadmap, and a decision framework you can use immediately.
Force Multiplier
Find the one change that makes everything else easier or unnecessary.
Feedback Loops
Build systems that tell you when they're broken before your users do.
Conversion
Strategy Session
$50090-minute deep-dive into your technical challenges. Walk away with a clear diagnosis and prioritized next steps.
Ideal for: Founders evaluating options
Book nowDev Consulting
$15-25K/moEmbedded senior engineering support. Architecture, code review, and hands-on building.
Learn moreMVP Build
$25-75KFrom validated concept to shipped product. Fixed scope, weekly demos, production-ready.
Learn moreIs your engineering team actually shipping?
- 5-minute diagnostic
- Score your team health
- Get actionable fixes
Free: Engineering Health Check
No spam. Unsubscribe anytime.
Common questions
Overlay
Any content on any mesh background
“Stop building. Start shipping.”
ModhAll 5 mesh variants available: aurora ember frost moss dracula. Set animated for RAF-driven motion.
Mezzotint
Screen-print inspired texture layer. Posterized noise creates chunky, wormy grain instead of fine film dots. Gradient masks control where texture appears, giving a 3D spherical shading effect.
Grain Types
Finer, 6-step posterize
Chunky, 3-step posterize
Mask Distribution
3D spherical shading
Directional fade
Uniform texture
Palette Variants
Usage
import { MezzotintGradient } from '@/components/mezzotint-gradient'
// Mezzotint texture (chunky, screen-printed)
<section className="relative">
<MezzotintGradient variant="ember" grain="mezzotint" mask="radial" />
<div className="relative z-10">Content here</div>
</section>
// Stippled texture (finer, more subtle)
<section className="relative">
<MezzotintGradient variant="frost" grain="stippled" mask="linear" intensity={0.4} />
<div className="relative z-10">Content here</div>
</section>
Social Formats
Platform-native compositions for Reels, Shorts, Instagram feed, carousels, LinkedIn posts, and OG link previews. Each format respects safe zones and renders with AuroraMesh + grain for compression survival.
Compositions
1080 x 1920
Reels / Shorts / TikTok
1080 x 1350
Instagram feed
1080 x 1080
Carousels / LinkedIn
1200 x 630
Link previews / OG meta
Safe Zones (Vertical 9:16)
Toggle with
showSafeZone: trueBento Layout (Portrait 4:5)
80px edge padding. Corners + center layout.
Aurora Drift Motion
Slide up 20px + fade
Scale 1.0 to 1.15 over 10s
Letter-spacing 0 to -0.04em
Render Commands
cd video-engine # Individual formats npm run render:vertical-hero # 9:16 reel (1080x1920) npm run render:portrait-feed # 4:5 feed post (1080x1350) npm run render:square-grid # 1:1 carousel slide (1080x1080) npm run render:og-image # OG image still (1200x630, PNG) # All social formats npm run render:social-all # With custom props npx remotion render src/index.ts VerticalHero \ --props='{"headline":"Your title","palette":"violet"}' \ --output out/custom-reel.mp4 # OG image (still, not video) npx remotion still src/index.ts OGImage \ --props='{"title":"Your title","subtitle":"modh.ca"}' \ --output out/og.pngQuality Checklist