IdeaSpring Style Guide
Living documentation of our Vintage Technical Artistry aesthetic. A design system that embodies "Authentic Intelligence" through professional precision and human warmth.
Design Philosophy
Vintage Technical Artistry
For concepts, diagrams, and illustrations. Inspired by Leonardo da Vinci sketches, patent drawings, and engineering blueprints. Hand-drawn quality with technical precision.
- Cross-hatching and line work
- Sepia tones and aged paper
- Technical annotations
- Geometric construction lines
Abstract/Symbolic
For structure, backgrounds, and UI elements. Clean, simplified forms that suggest humanity and connection without photorealism.
- Hands and silhouettes
- Connection imagery
- Geometric patterns
- Flowing organic shapes
NO fake AI-generated photorealistic people. Use illustrated portraits, silhouettes, or authentic photography only.
Color Palette
Warm, grounded tones that feel authentic and approachable.
Parchment Tones
Background
Sepia & Ink Tones
Accent Colors
Primary
Secondary
Accent
Alternative
Typography
A balanced mix of serif for warmth and sans-serif for clarity.
Font Families
Crimson Pro
Serif - HeadingsProfessional serif font for headings and emphasis. Conveys timeless quality.
Inter
Sans-serif - BodyClean, readable sans-serif for body text. Optimized for screens.
JetBrains Mono
Monospace - TechnicalTechnical annotations, code, and labels. Precision aesthetic.
Heading Scale
Innovation That Matters
Authentic Intelligence
Technology Changes; Being Human Doesn't
The CEDAR Framework
Discovery Process
Technical Annotation
Body Text Sizes
The future of work isn't about replacing humans with AI—it's about freeing humans to do what only humans can do.
We help organizations implement AI automation that amplifies human connections, not replaces them.
Our CEDAR framework ensures alignment between technical implementation and organizational values.
Strategic consulting for authentic intelligence implementation.
Published January 2026 • 8 min read
Typography on Backgrounds
Text readability matrix across all sepia background shades. Shows appropriate text colors for each background level with WCAG contrast guidance.
Heading Sample
Subheading Style
Body text demonstrates readability with sufficient line height and contrast. WCAG AAA compliance for normal text requires 7:1 contrast ratio.
CODE_SAMPLE Link Example Muted text for secondary information
Heading Sample
Subheading Style
Light sepia backgrounds work well with dark text. Maintain high contrast for accessibility and vintage aesthetic authenticity.
CODE_SAMPLE Link Example Muted text with deeper sepia tone
Heading Sample
Subheading Style
Medium sepia backgrounds create vintage aesthetic. Dark headings provide strong hierarchy. Consider ink-black for primary text.
CODE_SAMPLE Link Example Muted text maintains readable contrast
Heading Sample
Subheading Style
Deep sepia backgrounds require light text for readability. Use parchment tones for body text and white/cream for headings.
CODE_SAMPLE Link Example (Blueprint Cyan) Muted text in lighter parchment shade
Heading Sample
Subheading Style
Dark sepia backgrounds demand high-contrast light text. Parchment-50 and parchment-100 provide excellent readability.
CODE_SAMPLE Link Example (Blueprint Cyan) Muted secondary information
Heading Sample
Subheading Style
Darkest sepia tone creates dramatic vintage aesthetic. Requires brightest text colors for WCAG compliance. Excellent for footer sections.
CODE_SAMPLE Link Example (Blueprint Cyan) Secondary text remains readable
Heading Sample
Subheading Style
Technical ink black provides maximum contrast. Ideal for footer areas and dramatic content sections. Light text creates technical drawing aesthetic.
CODE_SAMPLE Link Example (Blueprint Cyan) Muted information text
AA Level (Minimum): 4.5:1 for normal text, 3:1 for large text (18pt+/14pt+ bold)
AAA Level (Enhanced): 7:1 for normal text, 4.5:1 for large text
All text color recommendations in the matrix above meet or exceed WCAG AA standards. Most combinations achieve AAA compliance for enhanced accessibility.
Typography Components
Heading Component
Semantic headings (h1-h6) with visual variants.
Standard Heading Style
Hero Display Heading
Fig. 1 - System Architecture
Secondary Information
View Code
<Heading level=2>Standard Heading Style</Heading>
<Heading level=2 variant="display">Hero Display Heading</Heading>
<Heading level=3 variant="technical">Fig. 1 - System Architecture</Heading>
<Heading level=3 variant="subdued">Secondary Information</Heading>Text Component
Body text with size and weight variants.
Default paragraph text with optimal readability and leading.
Larger, medium-weight text for emphasis.
Small text for captions and secondary information.
View Code
<Text>Default paragraph text</Text>
<Text size="lg" weight="medium">Emphasized text</Text>
<Text size="sm" class="text-muted-foreground">Caption text</Text>Label Component
Small text for labels, captions, and metadata.
Interactive Components
Button Component
Interactive buttons with variants aligned to the vintage aesthetic.
View Code
<Button variant="primary">Primary Action</Button>
<Button variant="secondary" size="lg">Large Secondary</Button>
<Button href="/contact">Link Button</Button>
<Button type="submit" disabled>Disabled</Button>Link Component
Styled anchor links with vintage aesthetic.
This is a paragraph with a default styled link that follows our secondary color scheme.
This is a paragraph with a subdued link for less prominent navigation.
Visit our external resource (opens in new tab).
Layout Components
Section Component
Page section wrapper with consistent spacing and visual treatments.
Sections support spacing variants: none, sm,
md (default), lg, xl
Background options: default, parchment,
muted, white
Add vintage prop to apply subtle paper texture overlay.
View Code
<Section spacing="lg" background="parchment" vintage>
<Container>
</Container>
</Section>Container Component
Max-width content container with responsive padding.
Card Component
Content card with vintage aesthetic styling.
Default Card
Clean white background with subtle shadow.
Vintage Card
Parchment background with paper texture and vintage border.
Outlined Card
Border emphasis without shadow.
Interactive Card
Hover for elevation effect. Can be made clickable.
View Code
<Card variant="vintage" padding="lg">
<Heading level=4>Card Title</Heading>
<Text>Card content</Text>
</Card>
<Card href="/article" interactive>
</Card>Divider Component
Section dividers with vintage-inspired styling.
ImagePlaceholder Component
Visible placeholder for images not yet available. Communicates image requirements to content creators.
Hero background: Abstract illustration of human-AI collaboration
Alt: "Human and AI working together symbolically"
Team member portrait
Alt: "Portrait of team member"
Feature icon
Alt: "Feature icon"
Article thumbnail
Alt: "Article featured image"
Product screenshot
Alt: "Product interface screenshot"
View Code
<ImagePlaceholder
description="Hero background: Abstract illustration of human-AI collaboration"
aspectRatio="16:9"
resolution="1920x1080"
alt="Human and AI working together symbolically"
/>
<ImagePlaceholder
description="Team member portrait"
aspectRatio="1:1"
resolution="400x400"
alt="Portrait of team member"
size="sm"
/>Content Cards
Specialized cards for displaying content like articles, whitepapers, and resources. These components handle specific content types with appropriate image aspect ratios.
Related Article Card
Card for displaying article previews in related articles sections and article listings. Uses 1:1 square aspect ratio for thumbnail images (standard: 1024×1024px).
View Usage
import RelatedArticleCard from '../components/content/RelatedArticleCard.astro';
// Single card
<RelatedArticleCard article={articleEntry} />
// In a grid (typical usage)
<div class="grid md:grid-cols-3 gap-6">
{relatedArticles.map((article) => (
<RelatedArticleCard article={article} />
))}
</div>Image Dimension Standards
Standard image dimensions for content across the site.
Use object-cover CSS to handle images that don't match exactly.
| Image Type | Dimensions | Aspect Ratio | Use Case |
|---|---|---|---|
| Hero Images | 1536 × 1024 | 3:2 | Article heroes, OG images |
| Thumbnails | 1024 × 1024 | 1:1 | Related articles, listings |
| Framework Diagrams | 1536 × 1024 | 3:2 | CEDAR, AIKIDO, process diagrams |
| OG/Social Images | 1200 × 630 | ~1.91:1 | Social media sharing |
Spacing System
Consistent spacing based on 4px base unit. Available as CSS custom properties and Tailwind classes.
Section Spacing Guidelines
When to use each Section spacing variant. Default to md for standard content flow.
Excessive lg spacing creates false "end of page" signals where users stop scrolling.
| Use Case | Spacing | Rationale |
|---|---|---|
| Standard content sections | md | Default for content continuity and visual flow |
| Hero sections | md or lg | First impression; case-by-case basis |
| Final CTA sections | lg | Intentional pause before action; signals page end |
| Major topic transitions | lg | Clear visual break between page divisions |
| Tight content sequences | sm | Related content groups that should feel connected |
sm
48px / 64px / 80px
md
64px / 80px / 96px
lg
80px / 96px / 128px
Values shown as mobile / tablet / desktop. Stacked lg sections create 256px gaps on desktop.
Vintage Effects
Utility classes for applying vintage aesthetic treatments.
Applies subtle paper texture overlay. Best used on sections and large containers.
Adds double-border effect inspired by technical drawings.
Creates embossed/pressed paper effect with subtle shadows.
<div class="vintage-paper vintage-border">
<!-- Content with vintage aesthetic -->
</div>Ready to Get Started?
This style guide is a living document. As the design system evolves, this page will be updated to reflect new components and patterns.