Appearance and Branding

StarryBio’s appearance is configured through theme, layout, animation, and footer in config/starrybio.config.ts. Built-in theme presets supply the actual palette tokens; an accent override changes the theme accent without requiring CSS edits.

Pick a theme

theme: {
  preset: 'aurora',
  accent: '#6ee7b7',
  buttonStyle: 'glass',
  background: 'starfield',
  animationIntensity: 'normal',
},

Supported presets are:

Preset	Appearance	Visual direction
nebula	Dark	Purple space palette with soft magenta and violet glow.
midnight	Dark	The default restrained blue/gray space palette.
classic-blue	Dark	The renamed v2 Bright-style blue gradient.
aurora	Dark	Deep green with softly layered aurora color.
eclipse	Dark	Pink/red illumination over near-black surfaces.
cosmic-gold	Dark	Warm, luminous gold against a dark background.
minimal	Light	Restrained neutral surfaces with a minimal background.
terminal	Dark	High-contrast green terminal presentation and technical grid.
supernova	Dark	Explosive orange, magenta, and violet gradients with bright highlights.
black-hole	Dark	Near-black monochrome surfaces with restrained gravitational-ring glow.
pulsar	Dark	Electric cyan and white with sharp radial energy against navy-black.
andromeda	Dark	Elegant lavender, dusty pink, and blue-gray with a faint starfield.
mars	Dark	Rust red, burnt orange, sand, and dark brown inspired by Mars.
lunar	Dark	Clean moon-gray, silver, charcoal, and icy-blue treatment.
solar-flare	Dark	Yellow, orange, and red solar illumination over near-black.
deep-space	Dark	Extremely dark navy with sparse blue-white atmospheric accents.
starlight	Light	White, pale blue, and silver with subtle space-inspired sparkle.
event-horizon	Dark	Violet and amber accretion-disk light concentrated around dark edges.
quasar	Dark	Saturated electric blue, violet, and hot pink with luminous focal points.
voyager	Light	Cream, orange, muted blue, charcoal, and a retro telemetry grid.
apollo	Light	Off-white, dark navy, and red-orange in a restrained vintage program style.
alien	Dark	Acid green and ultraviolet atmospheric glow over black.
cyber-orbit	Dark	Cyan and magenta cyber styling with restrained grids and orbital lines.
ice-moon	Dark	Frosted cyan and white over deep navy with crystalline highlights.
titan	Dark	Hazy amber atmosphere, muted brown, and dark navy.
saturn	Dark	Refined cream, gold, and tan ring accents over blue-black.
red-giant	Dark	Deep crimson, burgundy, burnt orange, and warm red glow.
white-dwarf	Dark	Stark silver-white against charcoal with intense cool-blue highlights.

Set theme: 'aurora' when a preset is all you need. Use the object form to override it. accent must be a hex color: #RGB, #RRGGBB, or #RRGGBBAA.

Each preset owns its intentional appearance, including palette, background effects, card separation, typography color, borders, shadows, and star colors. There is no separate light/dark setting and StarryBio does not override a preset from the visitor’s operating-system preference. Choose minimal, starlight, voyager, or apollo for a light appearance; all other built-in presets are intentionally dark.

Change cards, background, and movement

Button style

theme.buttonStyle affects link controls, featured cards, and generated-download actions:

• glass — default translucent presentation.
• solid — blends the accent into the control background.
• outline — transparent controls with an outline.
• minimal — low-emphasis controls without the normal shadow.
• terminal — square-ish terminal controls without the normal shadow.

Background

theme.background accepts:

• starfield — preset background plus the animated star canvas.
• gradient — uses the preset’s background gradient without the star canvas styling.
• minimal — a flat preset background.

Motion

theme.animationIntensity controls the starfield’s base intensity: none, subtle, normal, or high. It combines with the optional numeric multipliers:

animation: {
  starMultiplier: 0.7,
  shootingStarMultiplier: 0.25,
},

Set either multiplier to 0 to remove that effect. StarryBio respects prefers-reduced-motion: visitors who request reduced motion receive a static, reduced visual treatment and no shooting stars. Use none or zero multipliers when you want the site itself to be quiet for everyone.

Choose the page layout

layout: {
  mode: 'portfolio',
  linkStyle: 'cards',
  profilePosition: 'top',
  featuredPosition: 'above-links',
},

layout.mode	Current behavior on a wide screen
centered	Default centered profile card.
split-screen	Profile header/actions in a left column; sections and featured cards in a right column.
profile-card	A narrower profile-card width.
compact	A smaller card and profile image.
creator-grid	Wider card with sections arranged in two columns.
portfolio	Wider two-column sections plus two-column featured cards.
terminal	Wider, left-aligned monospace card with a prompt before the name.

creator-grid, portfolio, and split-screen collapse to a single-column mobile layout below the project’s responsive breakpoint. profilePosition accepts top or left; it is part of the supported configuration contract, though the current stock layout modes provide the visible positioning behavior described above. Test the result you choose rather than assuming every combination creates a distinct layout.

linkStyle accepts cards, buttons, minimal, or terminal. The current stock stylesheet does not define separate visual rules for those values; the visible control treatment comes from theme.buttonStyle. It remains part of the supported configuration contract and is available for a customized stylesheet. Use matching terminal values if you extend the terminal presentation.

featuredPosition is reliable and direct:

• above-links is the default and places featured cards before sections.
• below-links puts the same cards after all sections.

Footer and built-in attribution

footer: {
  copyright: '© {year} Morgan Lee',
},

{year} is replaced with the current build-time year. If you omit footer.copyright, the page shows © <current year> StarryBio.

The stock page also includes a separate “Powered by StarryBio v…” link. The user-facing configuration only changes the copyright text; removing or changing the separate attribution requires a source modification in src/components/ProfileCard.astro. See Architecture and Customization.

Practical review

1. Start pnpm dev and test the selected theme in both a wide and a narrow window.
2. Use the browser’s reduced-motion emulation or operating-system setting to confirm the page remains usable without animation.
3. Check text contrast after an accent change, especially with solid buttons.
4. If the result needs a new preset, layout behavior, or CSS change rather than configuration, use the developer guidance in Architecture and Customization.

Related: Managing Content controls what the layout contains, while SEO and Analytics controls the browser theme-color metadata.