Skip to content

Brand

Our name, our mark, and how to use them.

For partners, press and anyone putting ModelSide on a page or a slide. Download the files, match the colors and type, and copy the approved wording. If a use isn’t covered here, ask us first.

Download the full kit(ZIP 653 KB)

One zip: every SVG and PNG, plus the ground rules.

ModelSide lockup constructionThe reversed lockup on a grid. x is the emblem height. The wordmark cap height is half of x, centered on the emblem, and the wordmark starts 0.3x after it. A dashed box marks 1x of clear space on every side.xxxx0.3x
Clear space: 1x on every sideCap height 0.5x, centeredx = emblem height, gap 0.3x

01Marks

The marks

Two marks: the emblem on its own, and the lockup with the wordmark. Each comes in a treatment for dark surfaces, one for light surfaces and one-color versions. Every file is shown on the surface it is built for.

Emblem

A diamond with a bracket inside it. Use it for avatars, app icons and anywhere the wordmark would be too small to read.

Lockup

The emblem and the wordmark together. This is the first choice wherever there is room for it.

More files

Legacy social avatar

The original emblem on navy, 400 by 400. Retained for existing profiles.

Download social avatar as PNG 400, 4 KB

Link card

1200 by 630, for link previews when this page is shared.

Download link preview card, 1200 by 630 PNG as PNG 1200x630, 47 KB

Ground rules

The file list, colors, usage rules and boilerplate in plain text.

Download brand kit readme as README.txt, 10 KB

02Color

Color

Two quiet palettes, one identity. The website follows the system’s light or dark preference automatically, with dark as the fallback. The colors inside the original logo stay unchanged.

Dark palette

Deep green charcoal and warm white. The fallback when no light preference is detected.

  • Background

    #101613

    The quiet base behind the page.

    var(--ms-bg)

  • Surface

    #18201c

    Cards, panels and foreground surfaces.

    var(--ms-card)

  • Section

    #0c110e

    Alternate sections and inset areas.

    var(--bg-950)

  • Text

    #f3f5ee

    Headlines, body text and strong labels.

    var(--text-100)

  • Secondary

    #a7b0a7

    Supporting text and captions.

    var(--text-300)

  • Muted

    #909c92

    Quiet labels and metadata.

    var(--muted-500)

  • Readable blue

    #82aaff

    Links, emphasis and focus indicators.

    var(--primary)

  • Stroke

    rgba(224,235,223,.13)

    Subtle borders and section dividers.

    var(--stroke-700)

Light palette

Warm ivory, white surfaces and dark ink. Used when the system requests light mode.

  • Background

    #f7f7f2

    The quiet base behind the page.

    var(--ms-bg)

  • Surface

    #ffffff

    Cards, panels and foreground surfaces.

    var(--ms-card)

  • Section

    #f0f1eb

    Alternate sections and inset areas.

    var(--bg-950)

  • Text

    #17201d

    Headlines, body text and strong labels.

    var(--text-100)

  • Secondary

    #656b65

    Supporting text and captions.

    var(--text-300)

  • Muted

    #69716b

    Quiet labels and metadata.

    var(--muted-500)

  • Readable blue

    #275df5

    Links, emphasis and focus indicators.

    var(--primary)

  • Stroke

    rgba(23,32,29,.12)

    Subtle borders and section dividers.

    var(--stroke-700)

Action colors

The same blue and white pairing in both themes.

  • Action blue

    #275df5

    Primary action backgrounds, paired with white text in both themes.

    var(--action)

  • Action hover

    #214fd2

    Hover states for primary actions in both themes.

    var(--action-hover)

Action backgrounds use --action and --ms-blue. Text accents use --primary or --ms-cyan: #82aaff on dark, #275df5 on light. The downloaded CSS follows the system preference without JavaScript and also supports an explicit data-theme preview.

Download website design tokens as JSON, 7 KBDownload website color variables as CSS, 4 KB

Mark colors

Used only inside the emblem and wordmark files. Not for text or backgrounds.

  • Emblem slate

    #464B56

    The ring of the emblem on dark surfaces.

    Mark only

  • Slate on light

    #1F2937

    The ring of the emblem on light surfaces.

    Mark only

  • Emblem blue

    #5D98FF

    The bracket, on every color treatment.

    Mark only

  • Ink

    #0C1424

    The wordmark on light surfaces.

    Mark only

Archive: the aurora field

A legacy background retained for existing collateral. Both current website themes use quiet surfaces, without aurora or neon glow.

ModelSide lockup on the aurora field

Legacy artwork, shown here for reference.

  1. Cyan light

    #22D3EE at 18% strength, centered 12% across and 18% down. A circle with a radius of 42% of the frame width, faded out by 60% of that radius.

  2. Blue light

    #1E66F5 at 22% strength, centered 84% across and 28% down. A circle with a radius of 34% of the frame width, faded out by 60% of that radius.

  3. Purple light

    #8B5CF6 at 16% strength, centered 50% across and 78% down. A circle with a radius of 44% of the frame width, faded out by 65% of that radius.

  4. Base

    A 140 degree linear gradient: Navy #020617, Card #050818 at 35%, deep blue #031024 at 70%, and back to Navy. The lights sit on top of it. This field belongs to the archived dark identity.

Download aurora field as SVG, 1 KBDownload aurora field, 1600 by 900 PNG as PNG 1600x900, 142 KB
Show the CSS
background:
  radial-gradient(42vw 42vw at 12% 18%, rgba(34,211,238,.18), transparent 60%),
  radial-gradient(34vw 34vw at 84% 28%, rgba(30,102,245,.22), transparent 60%),
  radial-gradient(44vw 44vw at 50% 78%, rgba(139,92,246,.16), transparent 65%),
  linear-gradient(140deg, #020617, #050818 35%, #031024 70%, #020617);

03Typography

Typography

Two open-source typefaces from Google Fonts. Space Grotesk carries the headlines and the wordmark. Inter carries everything people read.

Display

Space Grotesk

Weights
Semibold 600, Bold 700
Used for
Headlines, section titles, card titles and the wordmark.
Settings
Semibold on the homepage: hero tracking −0.065em, line height 1.015; section titles −0.055em, line height 1.08. Elsewhere, headline tracking −0.055em and section titles down to −0.04em. Bold for selected titles and the supplied wordmark.
License
SIL Open Font License 1.1. Get it from Google Fonts

Built around your business.

  • 600Designed for the way you work.
  • 700Designed for the way you work.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 & . , : ; ? ! ( ) @ #

Text

Inter

Weights
Regular 400, Medium 500, Semibold 600
Used for
Body copy, buttons, navigation, forms and captions.
Settings
Regular for reading, Semibold for buttons. Line height about 1.6 for paragraphs.
License
SIL Open Font License 1.1. Get it from Google Fonts

Built around your business.

Custom software, intelligent automation, and private AI. Thoughtfully designed around your operations, and built to move your business forward.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 & . , : ; ? ! ( ) @ #

04Usage

Usage

A few rules keep the mark recognizable wherever it shows up. If you are not sure a use is fine, email us before it goes out and we will answer within one business day.

Do

  • Use the files as shipped, from this page or the kit.
  • Pick the treatment for the surface: color or reversed on dark, on-light on white, one color when color printing is not available.
  • Keep clear space of at least 1x, the height of the emblem, on every side of the mark.
  • Scale the mark proportionally. When the wordmark would be shorter than 24 px, switch to the emblem alone.
  • Put the mark on a quiet, flat dark or light field. Use the supplied dark and light treatments for each website theme.

Don’t

  • Recolor, redraw or outline the mark. Use the flat files for navigation, documents and ordinary brand usage.
  • Rotate the diamond into a square, or stretch, squash or skew it.
  • Retype the wordmark or set “ModelSide” in another font next to the emblem.
  • Place the mark over busy photos, patterns or low-contrast colors.
  • Use the mark to imply an endorsement or partnership that doesn’t exist.

One permitted dimensional treatment

In the website hero only, shallow depth may sit behind the exact front-facing emblem paths. The front face keeps the original proportions, spacing and mark colors. Keep the diamond upright, without perspective skew or rotation. Use the flat logo everywhere else.

Motion with a purpose

One contained hero sequence may connect the emblem to the studio’s capabilities. It follows native scroll and reverses when the visitor scrolls back. When desktop scrolling pauses inside the scene, gently settle to the opening view below halfway and the capabilities view from halfway onward. New input interrupts the settling. Move the mark through uniform scale and translation only, with no continuous float. Keep navigation and the project action available throughout. On compact screens, keep the full introduction in normal flow and limit motion to a light sweep and 10 px of total vertical emblem travel. Do not add scaling, a sticky stage, extra scroll length, settling or fading copy. Reduced-motion preferences remove all of these effects.

Automatic light and dark

Follow the visitor’s system preference and respond when it changes. Use dark as the fallback when no light preference is detected. Keep primary buttons blue with white text in either theme; use the lighter blue token for readable accents on dark surfaces. Switch between the supplied logo treatments without recoloring or changing the artwork’s proportions.

What not to do, drawn

  • Don’t recolor it
  • Don’t outline it
  • Don’t replace the mark’s colors
  • Don’t rotate it into a square
  • Don’t stretch or squash it
  • Don’t retype the wordmark
  • Don’t place it on busy images
  • Don’t imply an endorsement

05Co-branding

ModelSide alongside a partner

When our mark appears next to another company’s, both should look like equals. These rules apply to slides, announcements, event pages and anything else that shows the two marks together.

Co-branding example, stackedA neutral placeholder partner logo, a thin rule, and the ModelSide reversed lockup. Both marks are the same height, and each has 1x of clear space; the two clear zones meet at the rule.1x1x1x1xPARTNER, PLACEHOLDERMODELSIDE, REVERSED
Partner first, a thin rule, then ModelSide. The partner mark is a neutral placeholder, not a real logo. Dashed lines show each mark’s 1x clear space, and the purple lines show the shared height. Stacked like this, the rule runs horizontally between the two clear zones, in white at 16% opacity.

  1. Equal optical height

    Size the two marks so they read as the same height. Neither mark should look like the smaller partner.

  2. A thin rule or a light ×

    Separate the marks with the website stroke color on light surfaces, or white at 16% opacity on dark surfaces, as shown. Vertical when side by side, horizontal when stacked. Or use a light × between them.

  3. Clear space for each

    Keep at least 1x of clear space around each mark, and more if the partner’s own guidelines ask for it. The rule sits where the two clear zones meet.

  4. Each in its own treatment

    Both marks use their own primary version for the surface. On dark, that means our reversed lockup and the partner’s reversed logo.

  5. Never merged

    Don’t join the marks into one shape, share letters, or build a new combined logo.

  6. Only for real relationships

    Co-brand only when both sides have agreed to it. In a joint announcement we name the partner first, as a courtesy.

06Boilerplate

Boilerplate

Approved wording for articles, event programs, partner pages and introductions. Copy it as written.

Tagline

Built around your business.

27 characters

How to write the name

ModelSide

One word, capital M and capital S. The legal name is ModelSide LLC.

  • ModelSide
  • Modelside(incorrect)
  • Model Side(incorrect)

Short description (in our voice)

Custom software, intelligent automation, and private AI. Thoughtfully designed around your operations, and built to move your business forward.

143 characters

Founder line

Nathaniel Golyan, founder of ModelSide LLC, New York, New York.

63 characters

Long description (for press)

ModelSide is an independent software and AI studio creating custom software, intelligent automation, and private AI systems. Its work is thoughtfully designed around each client's operations, with direct collaboration from discovery through delivery and ongoing support. ModelSide LLC was founded in 2025 and is based in New York, New York.

340 characters

Take the kit.

Every mark in SVG and PNG, current website tokens, archived artwork and the ground rules in one zip. Questions about a use we haven’t covered? Ask before it goes out.

Download the full kit(ZIP 653 KB)Ask about usage

Or call 516-423-7714. We reply within one business day.

ZIP 653 KB28 filesUpdated 2026-10-06