Design style guide

Zelong's Wiki visual system demo

A working Astro version of the uploaded style poster: restrained document layout, compact components, technical diagrams, and dark/light tokens.

resonator qubit

Design keywords

academic modern calm precise modular

Brand tone

  • rigorous but inviting
  • educational
  • research-oriented
  • not sci-fi gimmicky

Color palette

Background #0B1220
Surface #121A2B
Primary text #E6EAF2
Muted text #9AA4B2
Cyan #22D3EE
Teal #10B981
Gold #F6C453
Border #1F2A3D

Typography

RoleSizeWeight
Hero40-54700
Section26650
Body16400
Code13-14400

Layout rules

Left navigation, wide reading column, optional right-side context.

content: 720px - 960px
grid: 4, 8, 12, 16, 24, 32, 48
radius: 6px, 8px, 12px

Equation block

H = 4EC(n - ng)2 - EJ cos(φ)

χ = g2 / Δ

Learning path

Curated steps from oscillator intuition to hardware practice.

Browse path

Callout

High-Q microwave modes are most useful when assumptions and parameter ranges stay visible.

Code block

import numpy as np
w = 1 / np.sqrt(l * c)
z = np.sqrt(l / c)