Visual Identity · V1.0
BrandIdentity.
The operating system of modulla. Typography, color, grid and the rules that hold every surface together — engineered for performance.
01 · Wordmark
How is the logo set?
Font
Inter · Medium (500)
Tracking
letter-spacing: −0.04em
Case
All lowercase · always
02 · Typography
Which typefaces do we use?
Oswald
Display · 400 / 500 / 600 / 700 · letter-spacing −0.02em
Engineering
of Time.
Aa Bb Cc Dd Ee Ff Gg 0 1 2 3 4 5 6 7 8 9
Inter
Text · 400 / 600 / 700 · leading-snug
Inter carries every paragraph, every label, every interface signal — a quiet, performant counterweight to the typewriter weight of Oswald. Body copy sits at text-lg, white/60, max-w-3xl.
Aa Bb Cc Dd Ee Ff Gg 0 1 2 3 4 5 6 7 8 9
Printed / Display titles
Section and page headers use Oswald with tight line-height and deliberate overlap between lines. The first line sits flush; the second line is pulled upward with a negative top margin so the ascenders and descenders almost touch — never overlap, never leave a wide gap. Aim for a few pixels of breathing room. Use leading-none or leading-[0.9] on the container, and apply a small negative margin (e.g. -mt-[2px] to -mt-2) on the second span depending on breakpoint and size. The secondary line is always text-white/40.
Example — page hero
BrandIdentity.
Example — section title
What'snew?
Fonts · Canva-style roles
Modulla type system
Title
Oswald · Bold (700) · UPPERCASE
72 / 80
Subtitle
Oswald · Medium (500) · UPPERCASE
44 / 52
Heading
Oswald · Bold (700) · UPPERCASE
28 / 36
Subheading
Oswald · Medium (500) · UPPERCASE
20 / 28
Section header
Inter · Semibold (600) · UPPERCASE · +0.2em
12 / 16
Body
Inter · Regular (400) · leading-snug
18 / 26
Quote
Oswald · Regular (400)
24 / 32
Caption
Inter · Regular (400)
12 / 18
Type scale
03 · Color
What is our palette?
#151515
21 · 21 · 21
Primary surface
#1A1A1A
26 · 26 · 26
Cards · modules
#111111
17 · 17 · 17
Footer · base
#FFFFFF
255 · 255 · 255
Headings · accents
rgba(255,255,255,.6)
Body copy
Paragraphs
#c5ff00
Accent · focus
Rare use only
04 · Components
How are the building blocks used?
Buttons
Module card
AI MOVIES
Modular AI Pipeline for cinematic-quality video and commercial production.
Body paragraph
The Living Grid is a configuration field, not a cage. Modules snap to columns, but whitespace is the dominant material.
Section title (typewriter)
What's
new?
05 · Discipline
What rules govern the system?
✓ Do
- +Use #151515 as the global surface — never pure black.
- +Pair Oswald (display) with Inter (text). No substitutions.
- +Frame section titles as questions — for AEO and clarity.
- +Keep paragraphs at text-lg, white/60, max-w-3xl, leading-snug.
- +Let whitespace dominate. Modules float; they do not crowd.
- +Apply Signal Lime sparingly — focus, links, single accents only.
✗ Don't
- —Don't introduce serif, script or display fonts outside Oswald/Inter.
- —Don't recolor the sygnet. White on dark, black on light — only.
- —Don't place brand logos on the 404 page.
- —Don't add social media links on the Contact page.
- —Don't use purple gradients or generic AI aesthetics.
- —Don't break the title format: modulla | [Name] | Boost your performance!
Engineering Beauty. Engineering of Time.