AFSHomeShowcase

21テーマ

AUP’s composable style system expresses every visual design as a formula: Style = Tone × Palette × Mode. This three-axis approach produces 40 unique combinations (4 tones × 5 palettes × 2 modes) from a minimal set of building blocks. Each axis is independent—you can change the color palette without affecting typography, or switch from dark to light mode without touching anything else.

How the Three Axes Work

𝖨

Tone

Controls typography, shape, effects, and spacing—everything except color. A tone defines the font families, heading weights, border-radius values, shadow styles, transition speeds, and spacing scale. Tone tokens never include --color-* variables, making them completely independent of the palette.

Implemented via [data-tone] CSS attribute selector on the root element. The 4 tones are: editorial, clean, bold, mono.

🎨

Palette

Controls colors only—background, surface, border, text, accent, and semantic colors (success, error). Each palette defines separate color sets for dark and light modes. Palette tokens only include --color-* variables, making them orthogonal to tones.

Implemented via [data-palette][data-mode] compound selector. The 5 palettes are: neutral, warm, vivid, natural, electric.

◐

Mode

Toggles between dark and light color schemes within the active palette. Each palette defines 11 color tokens per mode: --color-bg, --color-surface, --color-border, --color-text, --color-dim, --color-accent, --color-accent-bg, --color-accent-secondary, --color-assistant, --color-assistant-bg, --color-success, --color-error.

Set via data-mode="dark" or data-mode="light" on the root element. Dark is the default for most contexts.

CSS Custom Properties Architecture

The style system is built entirely on CSS custom properties (variables). Three HTML data attributes on the root element—data-tone, data-palette, and data-mode—select which CSS rules are active. The browser’s native cascade handles the composition automatically.

How styles are applied
<!-- Root element attributes drive the entire style system -->
<html data-tone="editorial" data-palette="warm" data-mode="dark">

<!-- CSS selectors compose independently: -->
[data-tone="editorial"]    { --font-heading: "DM Serif Display"; --radius-lg: 2rem; ... }
[data-palette="warm"][data-mode="dark"]  { --color-accent: #e6b450; --color-bg: #0a0e14; ... }
[data-palette="warm"][data-mode="light"] { --color-accent: #b8860b; --color-bg: #f5f3ef; ... }

<!-- All UI components reference the same custom properties: -->
.my-card {
  font-family: var(--font-body);
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

To change the theme at runtime, update the three data attributes—no class toggling, no CSS reloading, no JavaScript variable swaps. Every AUP primitive already references these tokens, so the switch is instant and affects the entire page.

Switching themes at runtime
// Apply a theme combination with one function call:
function applyTheme(tone, palette, mode) {
  const root = document.documentElement;
  root.setAttribute("data-tone", tone);     // "editorial" | "clean" | "bold" | "mono"
  root.setAttribute("data-palette", palette); // "neutral" | "warm" | "vivid" | "natural" | "electric"
  root.setAttribute("data-mode", mode);      // "dark" | "light"
}

// Example: switch to developer theme
applyTheme("mono", "electric", "dark");

Token Categories

Tone tokens fall into 7 categories. Each category is independent—changing the heading font doesn’t affect spacing, and changing the radius doesn’t affect shadows.

CategoryTokensWhat It Controls
Typography--font-body, --font-heading, --font-display, --font-monoFont families for different text roles
Type Scale--type-display, --type-heading, --type-body, --type-caption, --type-smallFont sizes from largest (display) to smallest
Shape--radius-sm, --radius-md, --radius-lgBorder-radius values (0 for brutalist, 2rem for soft)
Shadow--shadow-card, --shadow-hoverBox shadows for resting and hover states
Effects--backdrop, --transition, --glow, --atmosphereVisual effects: blur, speed, glow, gradient overlays
Spacing--space-section, --space-block, --space-element, --space-page-xVertical and horizontal rhythm
Layout--content-max, --container-maxMaximum widths for content and containers

The 4 Tones

Each tone is a complete typographic and spatial personality. They share no values—every token is explicitly set per tone. The design rationale behind each:

Editorial

DM Serif Display (headings) + Sora (body)

Serif headings create a premium magazine feel. Large border-radius gives a soft, friendly aesthetic. The radial gradient atmosphere adds subtle depth behind content. Body font weight is light (300) for an airy reading experience.

Radius8px / 12px / 2rem
EffectsBackdrop blur, gradient atmosphere, smooth 0.3s transitions
Use when

Consumer product landing pages, brand storytelling, luxury positioning, content-rich editorial sites

Avoid when

Data-heavy dashboards (light weight hurts readability), technical documentation (too decorative), dense admin panels (too much whitespace)

--font-heading: DM Serif Display; --heading-weight: 400; --radius-lg: 2rem; --backdrop: blur(20px); --atmosphere: radial-gradient(...); --space-section: 4rem

Clean

Inter (all text)

Inter provides excellent readability at all sizes. Medium radius feels professional without being playful. Zero visual effects keep the interface distraction-free. Standard density packs more information per screen.

Radius6px / 8px / 12px
EffectsNone — no backdrop, no atmosphere, no glow
Use when

Enterprise SaaS dashboards, admin panels, data tables and analytics, professional B2B products

Avoid when

Brand-heavy consumer products (too generic), creative portfolios (too corporate), luxury positioning (lacks personality)

--font-heading: Inter; --heading-weight: 600; --radius-lg: 12px; --backdrop: none; --atmosphere: none; --space-section: 2.5rem

Bold

Outfit (headings, weight 900) + Rubik (body)

Zero border-radius creates a brutalist, graphic design aesthetic. Hard offset shadows reference print design and risograph art. The heaviest heading weight (900) commands immediate attention. Instant transitions (0s) feel snappy and direct.

Radius0 / 0 / 0
EffectsHard offset shadows (4px 4px 0), thick 3px borders, zero transitions
Use when

Creative products and design tools, startup landing pages, playful/young-audience products, portfolio sites

Avoid when

Enterprise/corporate contexts (too informal), financial products (lacks trust signals), content-heavy reading (hard edges fatigue eyes)

--font-heading: Outfit; --heading-weight: 900; --radius-lg: 0; --shadow-card: 4px 4px 0 var(--color-text); --transition: 0s

Mono

JetBrains Mono (headings) + IBM Plex Mono (body)

Monospace fonts create a terminal/code aesthetic. The accent glow effect gives interactive elements a futuristic feel. Compact spacing (1.5rem sections vs 4rem editorial) maximizes information density. Smallest type scale of all tones (display: 2rem vs 3.5rem bold).

Radius0 / 0 / 0
EffectsAccent glow (0 0 8px), no shadows, compact spacing
Use when

Developer tools and CLI interfaces, API documentation, technical/engineering products, code-centric applications

Avoid when

Consumer products (too technical), marketing pages (lacks warmth), long-form editorial (monospace hurts readability at length)

--font-heading: JetBrains Mono; --heading-weight: 400; --glow: 0 0 8px var(--color-accent); --space-section: 1.5rem; --type-display: 2rem

The 5 Palettes

Each palette defines a complete dual-mode color system. Dark mode colors are tuned for OLED-friendly dark backgrounds; light mode colors are optimized for paper-white readability. The accent color shifts between modes to maintain consistent contrast ratios.

Neutral

Professional, safe

Blue is the most universally trusted color in UI design. The neutral palette uses a mid-saturation blue that works in both modes without feeling cold. Dark mode uses a lighter #5B9BF0 for contrast against dark backgrounds; light mode shifts to #1E6FD9 for legibility on white. The accent-secondary (#818cf8 indigo) provides a complementary highlight for assistant messages and secondary actions.

Color System11 CSS custom properties per mode: bg, surface, border, text, dim, accent, accent-bg, accent-secondary, assistant, assistant-bg, success, error
Best Paired WithClean tone for enterprise dashboards. Editorial tone for corporate storytelling.

Warm

Luxurious, sophisticated

Gold/amber accent evokes wealth, quality, and established trust. The dark mode background (#0a0e14) has a slight blue undertone that makes the warm gold pop. Light mode uses an off-white cream (#f5f3ef) background with rich brown text (#2c2418) for a paper-like reading experience. The accent-secondary is intentionally cool (#59c2ff cyan) to create contrast with the warm primary.

Color SystemDark mode: deep navy bg + gold accent. Light mode: warm cream bg + dark gold accent. The blue secondary provides temperature contrast for visual hierarchy.
Best Paired WithEditorial tone for fintech and luxury brands. Editorial tone for content magazines.

Vivid

Bold, energetic

Hot pink (#ff1493, CSS named color 'deeppink') demands attention and signals energy. This palette breaks from the convention of 'safe' UI colors to make a statement. Dark mode uses a dark navy surface (#111827) that provides enough contrast for the vivid pink without competing. The accent-secondary (#0080ff pure blue) is chosen as a cool counterpoint to the warm pink.

Color SystemDark mode: cool navy bg + electric pink accent. Light mode: soft lavender-white (#f0f4ff) + deep rose accent. High contrast in both modes for maximum visual impact.
Best Paired WithBold tone for creative studios. Editorial tone for premium consumer products.

Natural

Fresh, organic

Lime green (#c4f04d) is an unconventional UI accent that immediately signals freshness and innovation. In dark mode, the high-brightness lime creates an almost fluorescent effect. Light mode shifts to a deep forest green (#2a6e00) for readability while maintaining the organic feel. The accent-secondary (#e879f9 orchid) in dark mode creates an unexpected but harmonious pairing, while light mode uses a consistent green family.

Color SystemDark mode: near-black bg (#0a0a0f) + electric lime accent. Light mode: warm off-white (#fafaf8) + deep green accent. Assistant messages use the same green accent, creating a unified organic feel.
Best Paired WithEditorial tone for eco/sustainability brands. Any tone for health-focused products.

Electric

Futuristic, tech

Cyan (#22D3EE) is the color of sci-fi interfaces and futuristic tech. This palette pairs it with a dark navy background (#0B1120) reminiscent of space or deep water. The dark mode surface (#131C2E) has just enough blue tint to feel immersive without sacrificing text readability. Accent-secondary (#818cf8 indigo) adds depth for multi-level highlighting.

Color SystemDark mode: deep space navy + bright cyan accent. Light mode: clean white + teal accent (#06B6D4). Slate-toned neutrals (--color-dim: #94A3B8) keep the futuristic feel in non-accent text.
Best Paired WithMono tone for developer tools. Clean tone for tech startup products.

Recipes: Curated Combinations

Recipes are pre-selected tone + palette pairings for common product categories. They encode design expertise—the "why" behind each combination—so you can start with a well-reasoned default and customize from there. Click any recipe to apply it live.

Tone × Palette Grid

All 20 combinations in one view. Click any cell to apply that combination live. Cells with a recipe label indicate curated pairings. Use Ctrl+Shift+S to open the full style inspector overlay.

Neutral
Warm
Vivid
Natural
Electric
Editorial
Clean
Bold
Mono