Oscar Codes Life
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
ENGINEER YOUR
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 Oscar Codes Life 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 Oscar Codes Life community.
Oscar Codes Life
Launching Apps, Building Dreams, and Writing the Code of Life.
v2.0.0