メニュー
Applies bahonavi's official brand colors, gradients, and typography to any artifact that may benefit from having bahonavi's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
Expert in generating cocotb testbenches for IPCraft RTL. Reads .mm.yml to generate exhaustive register access tests and scaffolds Python test files with GHDL Makefiles.
Expert in FPGA IP core and Memory Map architecture. Design valid .ip.yml and .mm.yml files from natural language descriptions, ensuring schema compliance and optimal register layouts for IPCraft.
Create distinctive, production-grade frontend interfaces with high design quality anchored to bahonavi's brand. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics and stays on-brand for bahonavi.
SOC 職業分類に基づく
| name | brand-guidelines |
| description | Applies bahonavi's official brand colors, gradients, and typography to any artifact that may benefit from having bahonavi's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. |
bahonavi (Back Home Navigation) builds intelligent software, web applications, Python automation, and FPGA solutions. The visual identity bridges technology and heritage — modern, dark-first interfaces with warm brand accents that recall direction, guidance, and craftsmanship.
Keywords: branding, corporate identity, visual identity, styling, brand colors, typography, bahonavi brand, visual formatting, visual design, dark theme, light theme
The website uses a token-based color system with a dark theme (default) and an optional light theme.
| Token | Value | Role |
|---|---|---|
--bg | #050811 | Page background |
--bg-card | #0c1123 | Card / panel background |
--surface | rgba(255,255,255,0.05) | Elevated surfaces (buttons, chips) |
--line | rgba(255,255,255,0.08) | Borders and dividers |
--text | #d4deee | Primary body text (soft blue-white, reduced eye strain) |
--muted | #7a8fa8 | Secondary / muted text |
--accent | #00f2fe | Highlight accent (cyan) |
--nav-bg | rgba(5,8,17,0.84) | Navbar background (frosted glass) |
--shadow | 0 20px 60px rgba(0,0,0,0.36) | Card drop shadow |
| Token | Value | Role |
|---|---|---|
--bg | #e8ecf5 | Page background (blue-gray, more character) |
--bg-card | #f1f4fb | Card / panel background |
--surface | rgba(0,0,0,0.07) | Elevated surfaces (buttons, chips) |
--line | rgba(0,0,0,0.14) | Borders and dividers |
--text | #0d1120 | Primary body text |
--muted | #3d5370 | Secondary / muted text (deeper, more readable) |
--accent | #006ea3 | Highlight accent (richer cyan-blue) |
--nav-bg | rgba(232,236,245,0.93) | Navbar background (frosted glass) |
--shadow | 0 20px 60px rgba(0,0,0,0.12) | Card drop shadow |
| Token | Value | Role |
|---|---|---|
--brand | #ff512f | Primary brand color (orange-red) |
--brand-2 | #dd2476 | Secondary brand color (pink) |
--grad | linear-gradient(135deg, #ff512f → #dd2476) | CTA buttons, step badges, dividers |
These two colors and the gradient are never overridden by the light theme — they are always used the same way regardless of theme.
The signature gradient is used on all primary calls-to-action, step-number badges, and process dividers.
background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%);
Usage: CTA buttons (.btn), process step numbers (.step-num), gradient text on headings (.grad-text), process step dividers.
Used in diagrams, SVG nodes, and decorative elements.
| Token | Dark | Light | Role |
|---|---|---|---|
--node-cyan | #4facfe | #005e9e | Primary diagram node |
--node-pink | #f5576c | #b51c3c | Secondary diagram node |
--node-purple | #da22ff | #8a0ea8 | Tertiary diagram node |
The bahonavi logomark uses four internal gradients that are theme-independent.
| ID | Direction | Color Stop 1 | Color Stop 2 |
|---|---|---|---|
nPG — pillar | top → bottom | #FF512F | #DD2476 |
nLG — left arm | bottom-right → top-left | #DA22FF | #9733EE |
nRG — right arm | bottom-left → top-right | #F5576C | #F093FB |
nOG — orbit glow | left → right | #00f2fe (80%) → #4facfe (10%) → #00f2fe (60%) |
| Role | Font | Fallback | Weights |
|---|---|---|---|
| Headings / Display | Space Grotesk | system-ui, sans-serif | 500, 700 |
| Body Text | Manrope | system-ui, sans-serif | 400, 500, 700 |
−0.03em to −0.04em) and line-height 1.03–1.12.line-height: 1.6.0.76rem with letter-spacing: 0.18em.letter-spacing: 0.08em uppercase.| Token | Value | Usage |
|---|---|---|
--r | 20px | Default border radius for cards and panels |
--max | 1140px | Max content width |
| Base font | "Manrope", sans-serif | Body default |
| Body line-height | 1.6 | Comfortable reading |
#050811 background). Light theme is an opt-in alternative.--accent (cyan #00f2fe / #0097c4) marks links, chips, and informational callouts.--muted grays carry supporting text, captions, and icon defaults. Use sparingly to preserve hierarchy.