Written by Stef Sy

This style guide and the website css are generated by Claude based on a design brief that I had written. Frankly, without the design brief, even the frontend-design /plugin can’t help you make a good looking website.

Really nice to see Claude code can look through websites. I just threw it a few links and explained what I wanted it to grab from those sites. There’s also two books that influence how I think about personal visual design

1. The book “Elements of Typographic Style” by Robert Bringhurst. Gave me the language and framework to tell Claude what to do with the sizing and things that irked me about the spacing. I really am not a fan of the ‘standard’ 3 font rule for websites.
2. The Visual Display of Quantitative Information by Tufte. You know I love my sidenotes ;)

Written by Claude Code

This post demonstrates all the visual features of the design system. It’s a living reference showing typography, sidenotes, code blocks, examples, and more.

Sidenotes & Margin Notes

Sidenotes are one of the most distinctive features of this design system.Inspired by Edward Tufte’s books, sidenotes provide a way to include supplementary information without disrupting the flow of the main text. They appear in the right margin on desktop and convert to inline footnotes on mobile devices.

You can also use unnumbered margin notesThis is a margin note without a number. Use these for brief asides or contextual information. for less formal annotations.

Typography Hierarchy

The type system uses Crimson Pro for body text and Manrope for headings, creating a distinctive technical journal aesthetic.

Subheading Level 3

Text at various levels maintains proper rhythm and hierarchy. The line height is carefully tuned—not too loose like some sites, but comfortable for extended reading.

Subheading Level 4

Small caps, uppercase styling for labels and metadata.

Visual Blocking

Blockquotes

The purpose of visualization is insight, not pictures. We need to think about what questions we’re trying to answer and what stories we’re trying to tell. Ben Shneiderman

Example Blocks

Definition Blocks

Code Examples

Inline code like const x = 42 is styled with subtle background and border.

Code blocks have language labels and syntax highlighting:

// Memoization example
const cache = new Map();

function memoize(fn) {
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);

    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

// Usage
const fibonacci = memoize((n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

Lists

Unordered lists use accent-colored markers:

• Information density: Content-heavy but never cluttered
• Subtle interactivity: Nostalgic micro-interactions
• Tuftean restraint: High data-ink ratio, minimal chrome
• Visual connectivity: Subtle graphics connect related concepts

Ordered lists maintain the same treatment:

1. Read the documentation
2. Understand the design principles
3. Implement with attention to detail
4. Test across devices and browsers

Tables

Tables are clean and scannable:

Links and Interactions

Links use animated underlines that expand on hover, creating a subtle 2010s-nostalgic feel. The timing is deliberate—not too fast, allowing the animation to be perceived and appreciated.

Emphasis and Formatting

You can use italic text for emphasis and bold text for strong emphasis. The design maintains readability without drawing excessive attention to formatting.

Responsive Behavior

The design adapts gracefully across screen sizes:

• Desktop (>1200px): Full sidenote support in margins
• Tablet (768-1200px): Sidenotes inline, optimized spacing
• Mobile (<768px): Simplified interactions, comfortable reading

Design Principles in Action

This design system demonstrates:

1. Clarity over cleverness: Every element has a purpose
2. Information density: Rich content without overwhelming
3. Subtle interactivity: Delightful without distracting
4. Technical elegance: Professional yet warm

Logo Options: Generative Art Patterns

These are computational logo concepts inspired by classic generative art algorithms. Each represents a different approach to visualizing “working memory” through mathematical patterns.

Why generative art for a logo? These patterns share DNA with computational thinking: algorithmic, deterministic yet complex, beautiful through mathematics rather than decoration. Each hover effect reveals the underlying system—cells lighting up, pathways brightening—making the computational nature interactive.

Conclusion

This design system creates a distinctive reading experience that feels like a well-designed technical journalThe inspiration comes from Will Larson’s clarity, Maggie Appleton’s warmth, Mike Bostock’s visual sophistication, and Edward Tufte’s restrained elegance.—authoritative, thoughtful, and easy to navigate.

The warm color palette, careful typography, and thoughtful interactions create an environment optimized for reading and learning. Every detail serves the content.