OCL42
A refined editorial system for building with intention.
01 — Identity
Logo System
Primary Mark — Light
Primary Mark — Dark
Scale Variations
On Brand Colors
Clear Space
Maintain minimum clear space equal to the logo's curly brace width.
Usage Guidelines
- Minimum size: 32px for digital, 12mm for print
- Use on solid backgrounds only
- Do not rotate, skew, or add effects
- Maintain aspect ratio at all times
02 — Palette
Color Architecture
Light Mode
Chart Colors — Light
Dark Mode
Chart Colors — Dark
Color Combinations
03 — Type
Typography Scale
Font Families
Heading — Cormorant Garamond
Regular 400
Medium 500
Semibold 600
Bold 700
var(--font-cormorant-garamond)
Body — DM Sans
The quick brown fox jumps over the lazy dog. Clean, modern, and highly legible at any size.
var(--font-dm-sans)
Mono — Fira Code
const x = 42;
=> !== != === <=
Ligatures & fixed-width glyphs for code blocks, badges, and technical data.
Fira Code (monospace)
Heading 1
6xl / Black / -0.02em
Page titles, hero headings
Heading 2
5xl / Bold / -0.01em
Section headings
Heading 3
3xl / Bold / 0em
Card titles, subsections
Body text for readability and flow across longer-form content.
lg / Regular / 1.7
Paragraphs, descriptions
const vision = "Mentorship";
function buildFuture() {
return new Skillset();
}
// Used for code blocks, eyebrows, and technical data.
04 — Components
Interface Elements
shadcn/ui Button (CVA Variants)
Primary
Secondary
Ghost
Size Variants
Design System Buttons
PrimaryButton
SecondaryButton
GhostButton
05 — Spacing
Spacing & Layout
Border Radius Scale
rounded-sm
calc(0.5rem - 4px)
rounded-md
calc(0.5rem - 2px)
rounded-lg
0.5rem
rounded-xl
calc(0.5rem + 4px)
Spacing Tokens
Grid System
grid-cols-2
grid-cols-3
grid-cols-4
06 — Motion
Animation System
ScrollReveal Directions
up
Scroll to replay
down
Scroll to replay
left
Scroll to replay
right
Scroll to replay
Timing Reference
| Animation | Duration |
|---|---|
| Page Transition | 0.35s |
| Scroll Reveal | 0.6s |
| Tab Switch | 0.3s |
| Hover Effect | 0.2s |
Primary Easing (Framer Motion)
[0.22, 1, 0.36, 1]
Used for scroll reveals, tab transitions, and entrance animations. A smooth ease-out curve that feels natural and intentional.
Page Transition (GSAP)
power2.inOut
Used for route-level page transitions via GSAP. Provides a symmetrical ease-in-out for the opacity crossfade.
07 — Applied
Hero Section Example
LEGACY
From junior developer to technical leader.
I bridge the gap between code and business value.
08 — Merch
Merchandise
Full Developer Kit
The complete package: t-shirt, mug, and exclusive accessories for the dedicated coder.
Branded T-Shirts
Premium cotton tees featuring the OCL42 logo and signature designs.
Developer Mug
Fuel your coding sessions with a mug that speaks your language.
Rep the Brand
Show the world you're part of the OCL42 community.
OCL42
Launching Apps, Building Dreams, and Writing the Code of Life.
v2.0.0