Design System – tommcatee.com
This page documents the design elements for tommcatee.com, supporting my organisational culture research.
Colour System – Colour Philosophy for tommcatee.com
The color philosophy for tommcatee.com embraces a thoughtful balance between academic credibility and visual engagement. The palette is anchored by a deep navy blue that communicates trustworthiness and intellectual depth—qualities essential for presenting PhD research. This primary color is complemented by a sophisticated teal that adds freshness and approachability to the scholarly foundation.
The system employs strategic contrasts through warm grey and light neutral backgrounds, creating optimal readability for extended engagement with complex content. Accent colors (amber and burgundy) are used sparingly and purposefully to highlight key research insights and guide attention to critical elements.
This palette consciously avoids overstimulation while maintaining visual interest—an approach that respects the cognitive demands of engaging with academic content. The colors work together to create a coherent visual environment that supports the scholarly nature of organizational culture research while reflecting the innovative aspects of your diagnostic model and artifact intelligence focus.
By maintaining this deliberate balance between tradition and innovation, the color philosophy creates a distinctive yet appropriate academic identity that positions your research at the intersection of established organizational theory and emerging approaches.
primary-dark navy blue
(#1A365D)
secondary-teal
(#795548)
accent 1-amber
(#81C784)
accent 2-burgundy
(#FFF8E1)
Typography System
Heading 1 Example
Purpose: Primary heading for page titles and major section headers
Usage: The Heading 1 style establishes the main focus of my page and serves as the primary entry point for my content hierarchy. On orgculture.ai, this style creates immediate visual impact while maintaining academic credibility.
Design Philosophy: This heading combines the authority of Playfair Display with the deep green of established plants, creating a natural hierarchy that guides visitors through my research content. The generous size ensures prominence, while the balanced line height maintains readability across devices.
Implementation Guidelines:
- Use sparingly (typically once per page)
- Reserve for page titles and major section divisions
- Maintain adequate spacing above and below
- Ensure proper contrast with background elements
- Scales responsively from 48px on desktop to 32px on mobile
This typography choice balances the garden metaphor with scholarly presence, creating an inviting yet authoritative introduction to my research concepts, AI experiments, and collaborative work.
Heading 2 Example
Purpose: Secondary heading for major content divisions and important subsections
Usage: The Heading 2 style functions as a critical signpost throughout orgculture.ai, establishing clear content boundaries and guiding readers through my structured research presentation. This heading level creates meaningful hierarchy between main topics and their supporting elements.
Design Philosophy: Using Playfair Display in a slightly smaller size than H1, this heading maintains the garden theme’s sophisticated aesthetic while creating clear visual distinction from primary headings. The rich green colour connects to growing, thriving elements of organisational culture—symbolising established ideas that support new growth.
Implementation Guidelines:
- Use to separate major content sections
- Maintain consistent spacing (36px above, 24px below)
- Align with my content grid structure
- Keep to 1-2 lines when possible for maximum impact
- Scales proportionally across devices (36px desktop to 28px mobile)
This heading style supports both my academic rigour and garden metaphor, creating a harmonious balance between scholarly presentation and the organic, growth-focused nature of my research into organisational culture.