# Hotaru design system

> Hotaru design system measured from hotarusouthport.com: Jost font, #C9AB81 primary on #000000, 8 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/hotarusouthport.com/

Hotaru’s website (hotarusouthport.com) uses the Jost font and #C9AB81 as its main color on a black background. Measured by Sitepeel on November 5, 2026.

## What font does Hotaru use?

Hotaru uses Jost (weights 400 and 600) and Poppins (weights 400 and 500) on hotarusouthport.com. Page titles are 95px at weight 400 (40px on phones) and body text is 16px. Measured on November 5, 2026.

- Jost (weights 400, 600)
- Poppins (weights 400, 500)

## Hotaru colors: palette and hex codes

Hotaru’s main colors are #000000 (near black) for the background, #FFFFFF (white) for text and #C9AB81 (orange) as the main accent. Measured on November 5, 2026.

- #000000: near black
- #FFFFFF: white
- #C9AB81: orange

## What is Hotaru built with?

Hotaru’s website (hotarusouthport.com) is built with Next.js, React, CSS Modules, Sass and Slick. Measured on November 5, 2026.

- JavaScript framework: Next.js 16.3.1, React 19.3.0-canary-cbb046ab-2
- Animation & 3D: GSAP 3.15.0, Lenis 1.0.42
- Server: Apache HTTP Server
- Analytics: Microsoft Clarity, Google Analytics, Google Tag Manager
- UI & CSS: CSS Modules, Sass, Slick, Swiper
- Media: Google Maps

## Questions and answers

### What font does Hotaru use?

Hotaru’s website uses Jost (weights 400 and 600) and Poppins (weights 400 and 500). Page titles are 95px at weight 400 (40px on phones) and body text is 16px. Measured on November 5, 2026.

### What are the Hotaru colors and hex codes?

On hotarusouthport.com: #000000 (near black) for the background, #FFFFFF (white) for text and #C9AB81 (orange) as the main accent. The color palette above lists all 8 colors with their hex codes and where each one is used.

### What is the Hotaru design system?

The design system on this page is hotarusouthport.com’s, as measured on November 5, 2026: Jost type, #C9AB81 as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Hotaru’s own documentation.

### What is Hotaru built with?

Hotaru’s website (hotarusouthport.com) is built with Next.js, React, CSS Modules, Sass and Slick. The full tech stack Sitepeel found: Next.js, React, GSAP, Lenis, Apache HTTP Server, Microsoft Clarity, CSS Modules, Sass, Slick and Swiper. Measured on November 5, 2026.

### What is the Hotaru DESIGN.md?

A plain-text file with Hotaru’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Hotaru’s official design system?

No. Sitepeel measured it from hotarusouthport.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by Hotaru.

### Can I use Hotaru’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Hotaru’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/hotarusouthport.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Hotaru.

## The DESIGN.md file

```markdown
---
version: alpha
name: Hotaru
description: "Dark interface measured from hotarusouthport.com: Jost type with Poppins, orange accents, flat surfaces and pill-shaped controls."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  overlay: "#00000066"
  overlay-strong: "#FFFFFF66"
  outline: "#C9AB814D"
  outline-variant: "#FFFFFF1A"
  primary: "#C9AB81"
  on-primary: "#000000"
typography:
  headline-display:
    fontFamily: Jost
    fontSize: 95px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Jost
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.3
  headline-md:
    fontFamily: Poppins
    fontSize: 30px
    fontWeight: 400
  headline-sm:
    fontFamily: Poppins
    fontSize: 29px
    fontWeight: 400
    lineHeight: 1.6
  title-lg:
    fontFamily: Jost
    fontSize: 22.5px
    fontWeight: 600
    letterSpacing: 0.089em
  body-md:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 400
  body-lg:
    fontFamily: Poppins
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.78
  body-sm:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: 400
    letterSpacing: 0.08em
  label-md:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.88
    letterSpacing: 0.031em
  headline-display-mobile:
    fontFamily: Jost
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: -0.015em
  headline-lg-mobile:
    fontFamily: Jost
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.3
rounded:
  sm: 16px
  md: 30px
  lg: 40px
  xl: 50px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 40px
  gutter: 8px
  section: 60px
  margin: 15px
components:
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 12px 50px
  link:
    textColor: "{colors.on-surface}"
---

# Hotaru Design System

## Overview

Hotaru describes itself as: “Modern Japanese omakase dining in Southport, CT. Premium sushi, nigiri, wagyu & caviar. Dine-in, takeout & delivery on Post Road, Fairfield County.” The interface is dark, built on **Near Black (#000000)** with **White (#FFFFFF)** text, and **Orange (#C9AB81)** as the main accent.

Type is set in **Jost** and **Poppins**. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Controls are pill-shaped.

Measured from [hotarusouthport.com](https://hotarusouthport.com/) on November 5, 2026 at 1440×900 and 390×844 from 151 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 8 roles, plus gradient stops #C9AB81, #D7B57B.

- **Near Black (#000000):** Page background, seen 2 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 45 times. Token `on-surface`.
- **Near Black 40% (#00000066):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **White 40% (#FFFFFF66):** Stronger translucent fill, seen 4 times. Token `overlay-strong`.
- **Orange 30% (#C9AB814D):** Borders and dividers, seen 8 times. Token `outline`.
- **White 10% (#FFFFFF1A):** Secondary dividers, seen 2 times. Token `outline-variant`.
- **Orange (#C9AB81):** Most used accent color, seen 60 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.

## Typography

**Jost** and **Poppins** share the interface. Fallback stack: `Jost, sans-serif`. Other loaded fonts: Cormorant Garamond.

- **headline-display:** Jost 95px at weight 400, line height 1.1, tracking -0.02em (40px on mobile). Page title (h1).
- **headline-lg:** Jost 44px at weight 400, line height 1.3 (32px on mobile). Section headings (h2).
- **headline-md:** Poppins 30px at weight 400. Sub-section headings.
- **headline-sm:** Poppins 29px at weight 400, line height 1.6. Card and feature titles.
- **title-lg:** Jost 22.5px at weight 600, tracking 0.089em. Small titles.
- **body-md:** Poppins 16px at weight 400. Body text.
- **body-lg:** Poppins 18px at weight 400, line height 1.78. Lead paragraphs.
- **body-sm:** Poppins 14px at weight 400, tracking 0.08em. Secondary and small text.
- **label-md:** Poppins 16px at weight 500, line height 1.88, tracking 0.031em. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 47% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 8px, md 12px, lg 24px, xl 40px.
- **Sections:** 60px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 15px on each side of full-width sections.
- **Breakpoints:** 480px, 500px, 576px, 767px, 768px, 991px, 992px, 1024px, 1025px, 1200px, 1215px, 1280px, 1366px, 1399px, 1400px, 1600px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast and #C9AB814D borders.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 44 elements.
- **md (30px):** 24 elements.
- **xl (50px):** 16 elements.
- **sm (16px):** 12 elements.
- **lg (40px):** 8 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-ghost (“Order Now”):** transparent fill, #FFFFFF text, 16px/400, 50px radius, padding 12px 50px.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #000000 for the page.
- Do reserve #C9AB81 for primary actions and key highlights.
- Do set headlines in Jost with tight tracking (-0.02em).
- Do reuse the measured spacing steps (8px, 12px, 24px).
- Do make buttons and chips fully rounded (9999px); most other elements use 30px corners.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Jost and Poppins.
- Don't use #C9AB81 for large backgrounds or body text.
- Don't make interface transitions slower than 0.6s.

## Motion

Interface transitions are quick: 0.3s, 0.2s, 0.4s, 0.6s. Longer ambient animations run 1.5s.

- **Easing:** `ease`, `ease-in-out`, `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/hotarusouthport.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```