# Stellar Management design system

> Stellar Management design system measured from stellarmanagement.com: General Sans Variable font, 10 color hex codes, type scale, spacing and a free DESIGN.md.

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

Stellar Management’s website (stellarmanagement.com) uses the General Sans Variable font on a white background. Measured by Sitepeel on November 6, 2026.

## What font does Stellar Management use?

Stellar Management uses General Sans Variable (weight 500) on stellarmanagement.com. Page titles are 81px at weight 500 (44px on phones) and body text is 16px. Measured on November 6, 2026.

- General Sans Variable (weights 500)

## Stellar Management colors: palette and hex codes

Stellar Management’s main colors are #FFFFFF (white) for the background and #181513 (charcoal) for text, with #06184F (deep blue) as another accent. Measured on November 6, 2026.

- #FFFFFF: white
- #181513: charcoal
- #000000: near black
- #727272: slate
- #CDCDCD: silver
- #06184F: deep blue

## What is Stellar Management built with?

Stellar Management’s website (stellarmanagement.com) is built with Nuxt, Vue.js, Swiper, Cloudflare and GSAP. Measured on November 6, 2026.

- JavaScript framework: Nuxt 3.17.2, Vue.js 3.5.13
- Animation & 3D: GSAP 3.13.0, GSAP CustomEase 3.13.0, GSAP DrawSVG 3.13.0, GSAP ScrollTrigger 3.13.0
- Hosting & CDN: Cloudflare
- Server: ASP.NET
- Analytics: Cloudflare Web Analytics, Google Ads
- UI & CSS: Swiper

## Questions and answers

### What font does Stellar Management use?

Stellar Management’s website uses General Sans Variable (weight 500). Page titles are 81px at weight 500 (44px on phones) and body text is 16px. Measured on November 6, 2026.

### What are the Stellar Management colors and hex codes?

On stellarmanagement.com: #FFFFFF (white) for the background and #181513 (charcoal) for text, with #06184F (deep blue) as another accent. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Stellar Management design system?

The design system on this page is stellarmanagement.com’s, as measured on November 6, 2026: General Sans Variable type and 10.8px corners, written down as a DESIGN.md. It is not Stellar Management’s own documentation.

### What is Stellar Management built with?

Stellar Management’s website (stellarmanagement.com) is built with Nuxt, Vue.js, Swiper, Cloudflare and GSAP. The full tech stack Sitepeel found: Nuxt, Vue.js, GSAP, GSAP CustomEase, GSAP DrawSVG, GSAP ScrollTrigger, GSAP SplitText, Lenis, Cloudflare and ASP.NET. Measured on November 6, 2026.

### What is the Stellar Management DESIGN.md?

A plain-text file with Stellar Management’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 Stellar Management’s official design system?

No. Sitepeel measured it from stellarmanagement.com’s public page on November 6, 2026. It is an independent analysis, not made or approved by Stellar Management.

### Can I use Stellar Management’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 Stellar Management’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/stellarmanagement.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 Stellar Management.

## The DESIGN.md file

```markdown
---
version: alpha
name: Stellar Management
description: "Light monochrome interface measured from stellarmanagement.com: General Sans Variable type, tonal surfaces and 10.8px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#181513"
  on-background: "#181513"
  on-surface-strong: "#000000"
  on-surface-variant: "#727272"
  surface-container-low: "#CDCDCD"
  overlay: "#00000099"
  outline: "#CDCDCD"
  primary: "#181513"
  on-primary: "#FFFFFF"
  secondary: "#06184F"
typography:
  headline-display:
    fontFamily: General Sans Variable
    fontSize: 81px
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: General Sans Variable
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.03em
  headline-md:
    fontFamily: General Sans Variable
    fontSize: 29px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: General Sans Variable
    fontSize: 21.5px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-md:
    fontFamily: General Sans Variable
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  label-lg:
    fontFamily: General Sans Variable
    fontSize: 14.5px
    fontWeight: 500
    lineHeight: 1.5
  label-md:
    fontFamily: General Sans Variable
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.5
  label-sm:
    fontFamily: General Sans Variable
    fontSize: 9px
    fontWeight: 500
  headline-display-mobile:
    fontFamily: General Sans Variable
    fontSize: 44px
    fontWeight: 500
    lineHeight: 0.94
    letterSpacing: -0.03em
  headline-lg-mobile:
    fontFamily: General Sans Variable
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-sm-mobile:
    fontFamily: General Sans Variable
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.34
    letterSpacing: -0.02em
rounded:
  md: 10.8px
spacing:
  xs: 3.6px
  sm: 7.2px
  md: 12px
  lg: 24px
  xl: 36px
  gutter: 18px
  section: 225px
  margin: 36px
components:
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: 0px
    padding: 0px
  card:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: 0px
    padding: 18px
  link:
    textColor: "{colors.on-surface-variant}"
---

# Stellar Management Design System

## Overview

Stellar Management describes itself as: “Stellar is a leading New York real estate developer and manager providing a wide range of apartments and commercial properties. Browse no fee rentals in Manhattan, Brooklyn, and Queens.” The interface is light, built on **White (#FFFFFF)** with **Charcoal (#181513)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **General Sans Variable**. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Corners are mostly 10.8px.

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

## Colors

The palette has 10 roles.

- **White (#FFFFFF):** Page background, seen 8 times. Token `background`, CSS `--white`.
- **Charcoal (#181513):** Primary text and headings, seen 19 times. Token `on-surface`, CSS `--black`.
- **Near Black (#000000):** Headings and emphasis, seen 7 times. Token `on-surface-strong`.
- **Slate (#727272):** Secondary text, seen 7 times. Token `on-surface-variant`, CSS `--grey-dark`.
- **Silver (#CDCDCD):** Raised areas one step from the page, seen 24 times. Token `surface-container-low`, CSS `--grey`.
- **Near Black 60% (#00000099):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **Silver (#CDCDCD):** Borders and dividers, seen 9 times. Token `outline`, CSS `--grey`.
- **Charcoal (#181513):** Primary actions (the main text color; the palette is monochrome), seen 34 times. Token `primary`, CSS `--black`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Deep Blue (#06184F):** Accent in text, fills and borders, seen 3 times. Token `secondary`.

## Typography

**General Sans Variable** carries the whole interface. Fallback stack: `General Sans Variable, Arial, sans-serif`. Other loaded fonts: Playfair Display.

- **headline-display:** General Sans Variable 81px at weight 500, line height 0.9, tracking -0.04em (44px on mobile). Page title (h1).
- **headline-lg:** General Sans Variable 54px at weight 500, line height 1.05, tracking -0.03em (32px on mobile). Section headings (h2).
- **headline-md:** General Sans Variable 29px at weight 500, line height 1.25, tracking -0.03em. Sub-section headings.
- **headline-sm:** General Sans Variable 21.5px at weight 500, line height 1.25, tracking -0.01em (20px on mobile). Card and feature titles.
- **body-md:** General Sans Variable 16px at weight 500, line height 1.5. Body text.
- **label-lg:** General Sans Variable 14.5px at weight 500, line height 1.5. Large buttons and tabs.
- **label-md:** General Sans Variable 12.5px at weight 500, line height 1.5. Buttons, navigation and labels.
- **label-sm:** General Sans Variable 9px at weight 500. Small labels and badges.

## Layout

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

- **Scale:** xs 3.6px, sm 7.2px, md 12px, lg 24px, xl 36px.
- **Sections:** 225px vertical padding between major sections.
- **Gaps:** 18px is the most common gap in flex and grid layouts.
- **Page margin:** 36px on each side of full-width sections.
- **Breakpoints:** 360px, 480px, 560px, 650px, 651px, 767px, 967px, 968px, 1024px, 1200px, 1920px, 2440px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#CDCDCD) and #CDCDCD borders.

## Shapes

Most elements use 10.8px corners. Measured radii, most used first:

- **md (10.8px):** 14 elements.

## Components

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

- **button-ghost (“Company”):** transparent fill, #181513 text, 14.4px/500, padding 0px.
- **card:** #00000099 fill, #FFFFFF text, 9px/500, padding 18px.
- **link:** transparent fill, #727272 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #CDCDCD.
- Do keep text in 3 levels: #181513, #000000, #727272.
- Do let contrast carry emphasis; primary actions use #181513 on #FFFFFF.
- Do set headlines in General Sans Variable with tight tracking (-0.04em).
- Do reuse the measured spacing steps (7.2px, 12px, 24px).
- Do use 10.8px corners on most elements.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond General Sans Variable.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.42s, 0.5s. Longer ambient animations run 0.62s, 1.32s.

- **Easing:** `cubic-bezier(0.28, 0.11, 0.32, 1)`, `ease`.

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

```