On dark
Outer white · inner black · primary usage
--background · oklch(0.07 0 0)
Brand guidelines
Productic Studio
Senior product squads on subscription. Elastic capacity, owned outcomes.
1:1 · φ · 16° · 1/16
Mathematics
A mark derived from ratio
The Productic logomark is not an arbitrary shape. It is a geometric construction. Anchored at the golden point P, scaled by φ, and guided by a 4×4 construction grid on a 196×196 px canvas.
Golden ratio
From Fibonacci to the golden point
c. 1202
Fibonacci sequence
In Liber Abaci, Leonardo of Pisa described a sequence where each term is the sum of the two before it: 1, 1, 2, 3, 5, 8, 13, 21… As n grows, the ratio of consecutive terms approaches a constant.
c. 300 BCE. Present
The golden section φ
That limit is φ = (1 + √5) / 2 ≈ 1.618, the golden ratio. A line divided so the whole relates to the longer segment as the longer segment relates to the shorter. Euclid called it the extreme and mean ratio; designers call it the golden point.
Productic logomark
Ratio made concrete
The inner square’s center is P at (74.87, 121.13) SVG. Offset s/φ² = 74.87 px from the bottom-left corner. The mark is 49×49 px on a 196×196 canvas: 1/16 of the area (6.25%). Rotation is -16° about P.
Construction
φ = (1 + √5) / 2 ≈ 1.618034
offset = s / φ² = 74.87 px
P (SVG, origin top-left) = (74.87, 121.13)
Aᵢ / Aₒ = (49/196)² = 1/16 = 6.25%
sᵢ / s = 49/196 = 0.2500
Inner origin (50.37, 96.63) SVG. Corner offset along each axis = 74.87 px. P is the inner square center and rotation anchor.
Geometric proof
Ratio, rendered
Four constructions, from Fibonacci spiral to the finished mark. Every line is measurable; every proportion is intentional.
φ spiral
Nested golden rectangles. Each subdivision removes a 1/φ slice, the same proportion that defines the logomark anchor.
4 × 4 grid
16 cells of 49×49 px on a 196 px canvas. Inner mark 49×49 px (1/16 area). Anchored at P (74.87, 121.13), not grid-aligned.
Golden point P
Offset 74.87 px = s/φ² from the bottom-left corner along each axis. P = (74.87, 121.13) in SVG coordinates.
θ = -16°
Rotation about P. The inner square tilts -16° counter-clockwise. Right edge elevated, left anchored.
φ1.618034
Golden ratio. Asymptotic limit of consecutive Fibonacci ratios
φ²2.618034
φ + 1. Divisor that locates the golden point along each axis
s / φ²74.87 px
Distance from corner to golden point on a side of length s
P(74.87, 121.13)
Inner square center. Offset s/φ² from bottom-left corner; rotation anchor
s196 × 196
Outer bounding square, 1:1 aspect, primary construction field
sᵢ49 × 49
Inner mark, 49×49 px, 1/16 of canvas area (6.25%)
Aᵢ / Aₒ1/16 (6.25%)
(49/196)² = 1/16. Exact rational at this scale
4 × 416 cells · 49 px
4×4 grid, 16 cells of 49×49 px; P offset within field
θ-16°
Structural tilt about P, -16° counter-clockwise, right edge elevated
rₒ8 px
Outer corner radius, 8 px at 196 px canvas scale
rᵢ4 px
Inner corner radius, 4 px at 49 px mark scale
Symbol
Value
Meaning
φ
1.618034
Golden ratio. Asymptotic limit of consecutive Fibonacci ratios
φ²
2.618034
φ + 1. Divisor that locates the golden point along each axis
s / φ²
74.87 px
Distance from corner to golden point on a side of length s
P
(74.87, 121.13)
Inner square center. Offset s/φ² from bottom-left corner; rotation anchor
s
196 × 196
Outer bounding square, 1:1 aspect, primary construction field
sᵢ
49 × 49
Inner mark, 49×49 px, 1/16 of canvas area (6.25%)
Aᵢ / Aₒ
1/16 (6.25%)
(49/196)² = 1/16. Exact rational at this scale
4 × 4
16 cells · 49 px
4×4 grid, 16 cells of 49×49 px; P offset within field
θ
-16°
Structural tilt about P, -16° counter-clockwise, right edge elevated
rₒ
8 px
Outer corner radius, 8 px at 196 px canvas scale
rᵢ
4 px
Inner corner radius, 4 px at 49 px mark scale
Geometry gives the mark its skeleton. Statistics and proportion give it stability at any scale, from favicon to billboard. The logo is mathematics made visible.
Logomark
Surface variants
The logomark inverts with its background. White outer on dark surfaces; black outer on light. The inner square always punches through.
On light
Outer black · inner white · print and light UI
#ffffff
Palette
Color system
A neutral grayscale palette. No accent color. Two anchors, then weighted tonalities for surfaces, type, and edges.
Primary colors
Studio Black and Studio White anchor the brand. Every UI surface and type weight derives from these two.
Studio Black
100% · Surface anchor
Hex#121212
RGB18 18 18
CMYK0 0 0 93
Token--background
Studio White
100% · Type anchor
Hex#FAFAFA
RGB250 250 250
CMYK0 0 0 2
Token--foreground
Black tonality
Surface depth, from pure black through elevated layers to mid neutral.
White tonality
Type and edge weight, from pure white through muted copy to border overlays.
Hex values are sRGB approximations of oklch tokens in globals.css (.dark). Border swatch shows 10% white on Studio Black.
Type
Typography
Satoshi drives UI and marketing type. Geist Mono handles code, labels, and construction values.
Brand Fonts, Styles & Hierarchy
Weights 300-900 via --font-sans.
- Productic StudioBlack36 px
- Productic StudioExtra Bold30 px
- Productic StudioBold24 px
- Productic StudioSemi Bold20 px
- Productic StudioMedium16 px
- Productic StudioRegular14 px
Monospace
φ = 1.618034
Geist Mono
--font-mono
