cooldad.computer Style Guide

Version 1.0 | Jekyll Theme Console Base

1. Brand Overview

Brand Personality

cooldad.computer is a portfolio for whimsical, purpose-built coding projects that balance technical sophistication with playful irreverence. The brand voice is:

Think: “A senior engineer who builds silly things on weekends and isn’t afraid to explain the journey.”

Target Audience

Design Principles

  1. Let content shine - The design supports, never overwhelms
  2. Embrace constraints - Terminal aesthetic is a feature, not a limitation
  3. Warmth through color - Use the brown/teal palette to soften the monospace starkness
  4. Intentional playfulness - Quirky content deserves a confident presentation

2. Color System

Note: This site uses a fixed color scheme with no light/dark mode switching. The brown background with teal text maintains consistent branding and readability across all contexts.

Primary Colors

Brand Brown (Page Background)

Brand Teal (Primary Text)

Background Variations

Primary Background (Main page)

Secondary Background (Cards, sections)

Tertiary Background (Subtle divisions)

Text Colors

Primary Text

Secondary Text (Muted)

Tertiary Text (Very subtle)

Interactive Colors

Link States

Interactive Backgrounds

Semantic Colors

Success/Complete

Warning/In Progress

Error/Experimental

Border & Divider Colors

Borders (for cards, sections)

Color Contrast Ratios (on Brown Background)

3. Typography

Font Families

Primary Font: Libre Baskerville

Secondary Font: Monospace (System)

Type Scale

Headings

Body Text

Font Weights & Styles

Typography Hierarchy Rules

  1. Headings use Libre Baskerville to break up monospace monotony
  2. Body text uses monospace to maintain terminal authenticity
  3. Never use more than 2 hierarchy levels on a single screen
  4. Line length: max 75 characters for optimal readability

4. Layout & Spacing

Grid System

Spacing Scale (8px base)

xs:  0.5rem /  8px  - Tight spacing (inline elements)
sm:  1rem   / 16px  - Default spacing (paragraphs)
md:  1.5rem / 24px  - Section breathing room
lg:  2rem   / 32px  - Major sections
xl:  3rem   / 48px  - Page sections
xxl: 4rem   / 64px  - Hero spacing

Spacing Usage Rules

Responsive Breakpoints

Mobile:  < 768px   (single column, reduced spacing)
Tablet:  768-1024px (optimize for touch)
Desktop: > 1024px   (full layout)

Layout Patterns

Standard Page:

[Navigation: 60px fixed height]
[Content Container: 800px max-width, centered]
  [Page Title: H1 + subtitle]
  [spacing: xl]
  [Content sections with lg spacing between]
[Footer: minimal, center-aligned]

Project Listing:

[Project Card]
  [Title: H3, Libre Baskerville]
  [spacing: sm]
  [Tags: inline, small]
  [spacing: sm]
  [Description: 2-3 lines max]
  [spacing: sm]
  [Link: "View project →"]
[spacing: lg]
[Next Project Card]

5. Components

Specifications:

Elements:

Mobile Behavior:

Project Cards

Specifications:

Structure:

[Project Title - H3 in Libre Baskerville]
[Tags - comma separated, brand teal, 14px]
[spacing: sm]
[Description - 2-3 lines, monospace]
[spacing: sm]
[Link - "View project →" in brand teal]

Tags Format:

Buttons

Primary Button:

Secondary Button (Link Style):

Button Usage:

Default Link:

Inline Text Links:

External Links:

Interactive States (Accessibility)

Focus Indicators: All interactive elements (links, buttons, form inputs) must have visible focus states for keyboard navigation.

Interaction State Order:

  1. Default (normal state)
  2. Hover (mouse over)
  3. Focus (keyboard navigation)
  4. Active (mouse down / key press)
  5. Visited (for links only)

All interactive elements should provide clear visual feedback for each state.

Code Blocks

Inline Code:

Block Code:

Terminal/Console Elements

Command Prompt:

$ command-here

Output Block:

ASCII Art:

6. Content Guidelines

Image Specifications

Project Thumbnails:

Logo Usage:

Icon Style:

Writing Tone & Voice

Do:

Don’t:

Example Project Description:

Good: "A Chrome extension that replaces all instances of 
'synergy' with 'friendship' on corporate websites. Built 
with vanilla JS because sometimes the simple solutions are 
the right ones."

Bad: "Leveraging cutting-edge browser APIs to disrupt the 
corporate communications paradigm through linguistic 
transformation! 🚀"

Project Description Format

Title:

Tags:

Description:

Example:

Title: Potato Quality Classifier

Tags: python, opencv, machine-learning, food

Description: Trained a CNN to classify potatoes as "suitable 
for mashing" vs "suitable for frying" because my wife asked 
me to help with dinner. Achieved 87% accuracy using transfer 
learning on MobileNetV2. The model is more confident than I am.

7. Visual Style Examples

Homepage Header

┌────────────────────────────────────────────────────┐
│                                                    │
│              cool dad                              │
│         (in Libre Baskerville, teal)               │
│                                                    │
│     whimsical code. purpose-built projects.       │
│            (in monospace, muted teal)              │
│                                                    │
└────────────────────────────────────────────────────┘

Project Card Example

┌────────────────────────────────────────────────────┐
│ Email Excuse Generator                             │
│ python, api, automation                            │
│                                                    │
│ Generates plausible excuses for delayed email     │
│ responses using Markov chains trained on actual   │
│ out-of-office messages. Surprisingly effective.   │
│                                                    │
│ View project →                                     │
└────────────────────────────────────────────────────┘

Typography Hierarchy Example

┌────────────────────────────────────────────────────┐
│                                                    │
│ Projects                                           │
│ (H1, Libre Baskerville, 40px, teal)               │
│                                                    │
│ things i've built for reasons that seemed good    │
│ at the time                                        │
│ (subtitle, monospace, 16px, muted teal)           │
│                                                    │
│ 2024                                               │
│ (H2, Libre Baskerville, 32px, teal)               │
│                                                    │
│ Project Name Here                                  │
│ (H3, Libre Baskerville, 24px, teal)               │
│                                                    │
│ Description text in monospace creates nice         │
│ contrast with the serif headings...                │
│ (Body, monospace, 16px, white-ish)                │
│                                                    │
└────────────────────────────────────────────────────┘

End of Style Guide v1.0