Design Catalog

Design tokens and component patterns reference.

Semantic Elements

Base styles for HTML semantic elements. These are defined in global.css @layer globals.

Headings

h1 - Page title

Heading Level 1 (1.5rem / 24px)

font-size: --font-size-2xl, margin-bottom: --space-base

h2 - Section heading

Heading Level 2 (1.25rem / 20px)

font-size: --font-size-xl, margin-bottom: --space-sm

h3 - Subsection heading

Heading Level 3 (1.125rem / 18px)

font-size: --font-size-lg, margin-bottom: --space-sm

h4 - Minor heading

Heading Level 4 (1rem / 16px)

font-size: --font-size-md, margin-bottom: --space-xs

h5 - Small heading

Heading Level 5 (0.875rem / 14px)
font-size: --font-size-base, margin-bottom: --space-xs

h6 - Minimal heading

Heading Level 6 (0.75rem / 12px)
font-size: --font-size-sm, margin-bottom: --space-xs

Paragraph & Text Elements

p - Paragraph

This is a paragraph element. It has font-size: --font-size-base (14px), line-height: 1.6, and margin-bottom: --space-sm (12px).

Multiple paragraphs will have consistent spacing.

small - Small text

Regular text for comparison.

This is small text (font-size: --font-size-sm / 12px).

Links & Buttons

a - Link

Links are styled with navy color and underline. Hover them to see the effect.

button - Reset base

The button element has a reset base style (no background, no border, no padding). Use .btn classes for styled buttons (see Buttons section).

Interactive States

Global interactive state styles for accessibility and user feedback. All focusable elements have consistent :focus-visible styles for keyboard navigation.

Focus-Visible (Keyboard Navigation)

All focusable elements

Press Tab to navigate and see the aqua outline on keyboard focus.

Link
outline: 2px solid var(--color-netsuki-aqua); outline-offset: 2px;

Hover States

Links

Hover this link to see aqua color

a:hover - color: var(--color-netsuki-aqua)

Buttons

Each button variant has its own hover color. See Buttons section for details.

Active State

Buttons

Click and hold to see the active state (slight downward shift).

.btn:active - transform: translateY(0.125rem)

Disabled State

Form Elements

:disabled, [aria-disabled="true"] - cursor: not-allowed; opacity: 0.5;

Buttons

See Buttons section for more disabled button examples.

Buttons

Color x Size Grid

Primary (Gold)

.btn.btn--primary
.btn.btn--primary.btn--sm
.btn.btn--primary.btn--lg

Action (Aqua)

.btn.btn--action
.btn.btn--action.btn--sm
.btn.btn--action.btn--lg

Secondary (White)

.btn.btn--secondary
.btn.btn--secondary.btn--sm
.btn.btn--secondary.btn--lg

Outline (Aqua)

.btn.btn--outline
.btn.btn--outline.btn--sm
.btn.btn--outline.btn--lg

Disabled State

Primary (Gold) (disabled)

.btn.btn--primary :disabled
.btn.btn--primary.btn--sm :disabled
.btn.btn--primary.btn--lg :disabled

Action (Aqua) (disabled)

.btn.btn--action :disabled
.btn.btn--action.btn--sm :disabled
.btn.btn--action.btn--lg :disabled

Secondary (White) (disabled)

.btn.btn--secondary :disabled
.btn.btn--secondary.btn--sm :disabled
.btn.btn--secondary.btn--lg :disabled

Outline (Aqua) (disabled)

.btn.btn--outline :disabled
.btn.btn--outline.btn--sm :disabled
.btn.btn--outline.btn--lg :disabled

Color Palette

Theme Colors

--color-netsuki-aqua#00ced1Secondary accent, links
--color-netsuki-aqua-dark#0891b2Darker aqua (hover)
--color-netsuki-blue#4dabf7Blue accent
--color-netsuki-charcoal#1f2937Canvas border
--color-netsuki-charcoal-dark#111827Canvas background
--color-netsuki-charcoal-light#374151Button background
--color-netsuki-cyan#22d3eeNormal game block
--color-netsuki-gold#ffd700Primary accent
--color-netsuki-gold-dark#facc15Darker gold (hover)
--color-netsuki-green#0f0Success states
--color-netsuki-green-vivid#22c55eVivid green
--color-netsuki-green-dark#16a34aDarker green
--color-netsuki-white#fffBackgrounds
--color-netsuki-navy#000080Text, borders, headings
--color-netsuki-black#000Strong emphasis
--color-netsuki-red#ef4444Error, warning, danger
--color-netsuki-red-dark#dc2626Darker red
--color-netsuki-amber#f59e0bAmber accent
--color-netsuki-yellow-light#fef9c3Light yellow
--color-netsuki-yellow#fef08aYellow
--color-netsuki-gray-light#f3f4f6Light gray (hover bg)
--color-netsuki-gray-border#d1d5dbBorder and separator
--color-netsuki-gray#6b7280Muted text
--color-netsuki-gray-text#4b5563Darker muted text
--color-netsuki-magenta#d946efHoming projectile, laser block
--color-netsuki-orange#f97316Rain projectile
--color-netsuki-pink#ec4899Puzzle completion text
--color-netsuki-yellow-bright#fde047Laser gradient, completion border

Chat Character Colors

--color-chat-author#ffe57fChat bubble (author)
--color-chat-partner#87ceebChat bubble (partner)
--color-chat-guest#e8a0a0Chat bubble (guest)

Font Families

Font family CSS variables. Web fonts are downloaded at build time via Astro Fonts API (self-hosted, no CDN).

ねつきのバーチャル妖狐サイト
The quick brown fox jumps over the lazy dog
--font-bodySystem'MS PGothic', 'Hiragino Sans', sans-serif
ねつきのバーチャル妖狐サイト
The quick brown fox jumps over the lazy dog
--font-dotWeb fontDotGothic16
ねつきのバーチャル妖狐サイト
The quick brown fox jumps over the lazy dog
--font-monoSystem'Courier New', 'MS Gothic', monospace
ねつきのバーチャル妖狐サイト
The quick brown fox jumps over the lazy dog
--font-roundedWeb fontM PLUS Rounded 1c
ねつきのバーチャル妖狐サイト
The quick brown fox jumps over the lazy dog
--font-antiqueWeb fontZen Antique

Typography

The quick brown fox jumps over the lazy dog
--font-size-xs0.64rem (10.24px)
The quick brown fox jumps over the lazy dog
--font-size-sm0.8rem (12.8px)
The quick brown fox jumps over the lazy dog
--font-size-base1rem (16px)
The quick brown fox jumps over the lazy dog
--font-size-md1.25rem (20px)
The quick brown fox jumps over the lazy dog
--font-size-lg1.563rem (25px)
The quick brown fox jumps over the lazy dog
--font-size-xl1.953rem (31.25px)
The quick brown fox jumps over the lazy dog
--font-size-2xl2.441rem (39.06px)

Spacing

--space-2xs0.25rem (4px)
--space-xs0.5rem (8px)
--space-sm0.75rem (12px)
--space-base1rem (16px)
--space-lg1.5rem (24px)
--space-xl2rem (32px)
--space-2xl3rem (48px)
--space-3xl4rem (64px)

Responsive Breakpoints

This project uses a mobile-first approach with two standard breakpoints. Resize your browser window to see the responsive behavior.

Breakpoint Values

NameMedia QueryDescription
Mobile(default)< 640px, mobile devices
Tabletwidth >= 640px≥ 640px, tablets and above
Desktopwidth >= 768px≥ 768px, desktop and laptops
Touchhover: noneTouch-capable devices
Pointerpointer: coarseCoarse pointer input devices

Responsive Behavior Demo

Mobile (< 640px)
Tablet (≥ 640px)
Desktop (≥ 768px)

Only one indicator should be visible at a time based on your current viewport width.

Layout Example

Box 1
Box 2
Box 3

Mobile: single column / Tablet: 2 columns / Desktop: 3 columns

Common Components

Section Box

.section-box.section-box--gold

Gold background section box. Used for primary emphasis.

.section-box.section-box--white

White background section box. Used for content areas.

.section-box.section-box--aqua

Aqua background section box. Used for secondary emphasis.

.section-box.section-box--white.section-box--border-gold

White section box with gold border.

.section-box.section-box--white.section-box--border-aqua

White section box with aqua border.

Inner Box

.inner-box

Inner box for nested content. 2px solid navy border with 1rem padding.

Section Title

.section-title

Section Title Example

Centered, bold, navy-colored heading. font-size: --font-size-lg.

Tags & Badges

Inline label components. Use .tag base class with color variants.

.tag .tag--aqua

#diary#cooking#programming.tag.tag--aqua

.tag .tag--navy

Feature AFeature B.tag.tag--navy

.tag .tag--gold

NewHot.tag.tag--gold

Data Tables

Structured data display with header color variants.

.data-table .data-table--header-aqua

PropertyValue
NameNetsuki
SpeciesVirtual Fox

.data-table .data-table--header-gold

RankScore
1st9800
2nd7500

Form Elements

Styled form inputs used across pages (fortune form, etc.).

Decorative Effects

Text decoration patterns defined globally.

.blink (animation: blink)

Blinking Text

animation: blink (defined in global.css @keyframes)

.sparkle

Sparkling Text

color: var(--color-netsuki-gold); animation: sparkle-glow (defined in global.css @keyframes)

Dividers

Decorative horizontal separators.

.divider-stars

★☆★☆★

.divider-stars

Background Patterns

CSS-only repeating background patterns for the body (frame area). Patterns use site CSS variables with opacity to stay visually receding per the 60-30-10 color rule, while offering character and color variety. Pick a favorite to apply to BaseLayout.astro.

Pattern Candidates

Aqua Dotsradial-gradient · aqua 22% · 20pxBright aqua dots. Matches the sidebar accent color.
Gold Checkerconic-gradient · gold 18% · 16pxClassic checkerboard in gold. Warm and playful.
Rainbow Stripesrepeating-linear-gradient · aqua+gold+blue · -45degDiagonal stripes in three site colors. Festive and energetic.
Polka Partyradial-gradient x3 · aqua+gold+red · offset positionsScattered multicolor dots. Lively and eye-catching.
Aqua Zigzaglinear-gradient x4 · aqua · chevronChevron zigzag in aqua. Bold and directional.
Gold Starsradial-gradient x3 · gold+amber · scatteredScattered gold and amber dots like twinkling stars.
Aqua Argylerepeating-linear-gradient x2 · aqua · diamond gridDiamond lattice in aqua. Elegant and structured.
Warm Confettiradial-gradient + linear-gradient x2 · gold+amber gridGold dots on an amber grid. Warm and cozy.

Base Color Variations

The same dot pattern reads very differently depending on the base background color. These candidates use color-mix() to create tinted bases, paired with a contrasting pattern color. Pick a base + pattern combination to apply to BaseLayout.astro.

Aqua Mistaqua 10% base · aqua-dark 40% dotsAqua-tinted base with deeper aqua dots. Cool and cohesive.
Cream & Goldgold 8% base · gold 28% checkerIvory-cream base with gold checkerboard. Warm and inviting.
Cream DotsAdoptedgold 6% base · gold 18% dotsWarm cream base with subtle gold dots. Personal and approachable.
Lavender Navyblue 15% base · navy 35% dotsSoft lavender base with deep navy dots. Calm and refined.
Blush Redred 8% base · red 28% dotsBlush pink base with red dots. Soft yet lively.
Deep Nightnavy 22% base · aqua 60% dotsDark blue-gray base with bright aqua dots. Bold and dramatic.
Amber Duskamber 12% base · amber 22% argyleWarm amber base with diamond lattice. Cozy and textured.

60-30-10 Color Rule

The pattern fills the frame (Ground / 60%) and must visually recede behind the sidebar aqua (30%) and page content white (10% accent area). All patterns keep opacity below 30% so the frame remains background, not foreground.

color-mix() Patterns

Semi-transparent color patterns using color-mix(in srgb, COLOR %, transparent).

Gold 30%
Gold 50%
Gold 70%
Aqua 20%
Aqua 40%
Aqua 60%
Navy 10%
Navy 20%
Navy 40%

Easing Tokens

Named cubic-bezier curves for consistent motion. Always use these tokens instead of raw cubic-bezier() or bare ease/ease-in-out keywords.

--ease-out (most UI transitions)

transition: transform 400ms var(--ease-out); /* cubic-bezier(0.215, 0.61, 0.355, 1) */

--ease-in-out (modals, open/close panels)

transition: transform 400ms var(--ease-in-out); /* cubic-bezier(0.645, 0.045, 0.355, 1) */