Skip to content
DesignMunkDesignMunk Submit a site

Shade Inc.

shade.inc
Media storage that just works better.
AI Software Framer Homepage Inter Tight
Share Visit site
shade.inc DESKTOP · 1440
Shade Inc.

AI Breakdown

Design export

---
version: alpha
name: Shade Inc.
description: Media storage that just works better.
colors:
  primary: "#ffffff"
  secondary: "#833cfb"
  tertiary: "#855cf8"
  neutral: "#08090a"
  border: "#374151"
  brand-vega-violet: "#b15afb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter Tight
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.017em
  headline-md:
    fontFamily: Inter Tight
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.19
  headline-sm:
    fontFamily: sans-serif
    fontSize: 33px
    fontWeight: 500
    lineHeight: 1.21
  headline-xs:
    fontFamily: VCR OSD Mono Regular
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.18
  body-md:
    fontFamily: Inter Tight
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 6px
  sm: 24px
  md: 40px
  lg: 56px
  xl: 152px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Shade Inc.: Neon Violet CTAs on a Deep-Black Canvas

## Overview

Dark-mode first, cinematic, and confident. The interface targets creative and media teams who live in editors and review tools. Spacing is generous in heroes and tighter in product sections, with high contrast (white on near-black) and sparing, high-energy violet accents for action and focus. When a token doesn't exist, prefer clarity: white text on black surfaces, minimal decoration, small radii.

## Colors

- Primary (#ffffff): Core text and primary button fill in light-on-dark contexts.
- Secondary (#833cfb): Main accent for CTAs, highlights, and interactive states.
- Tertiary (#855cf8): Lighter accent for hovers, secondary pills, and subtle gradients.
- Neutral (#08090a): Deep background for the entire experience.
- Border (#374151): Low-contrast dividers and interactive outlines on dark.
- Brand-vega-violet (#b15afb): High-saturation highlight for glows, focus rings, and special badges.
- Surface ({colors.neutral}): Page and card surfaces; use as base fill.
- On-surface ({colors.primary}): Default text and icon color on dark surfaces.

## Typography

- Inter Tight (Google; available to load). Used for display and body: headline-lg 80px/1.08 (weight 500) for hero, headline-md 52px/1.19 for section leads, body-md 14px/1.5 for long copy. Its compact width supports dense UI without losing legibility.
- Headline-sm (sans-serif, generic). When a compact sans is needed and Inter Tight is unavailable, use system UI sans (Segoe UI, SF Pro Text) to keep weights around 500 at 33px.
- VCR OSD Mono Regular (custom/self-hosted; not agent-loadable). Reserved for small, branded callouts (headline-xs 22px/1.18). Substitutes: VT323 (Google) for a CRT feel, Major Mono Display (Google) for display monospace, or Space Mono (Google) for a cleaner mono while retaining character.

## Layout

- Spacing scale aligns to an 8pt system: 24, 40, 56, 152 with a micro 6px for tight gaps. Use xl (152px) for hero top/bottom padding, lg (56px) for section rhythm, md (40px) inside cards, and sm (24px) for gutters.
- Grid: 12 columns with 24px gutters works well for the dense product frames; collapse to a single column with 24–40px padding on mobile. Keep headings clear of the frame edges using lg or xl padding.

## Elevation & Depth

Depth is conveyed through tone, borders, and minimal shadow. Use the sm shadow for subtle lifts (floating promos, tooltips). md/lg/xl shadows are none—lean on the border token (#374151) and inner shadow for highlighted surfaces instead of heavy drop shadows. Violet accents provide perceived depth through contrast, not blur.

## Shapes

Two radii define the language. 4px (rounded.sm) for interactive elements like buttons; 8px (rounded.md) for cards, app-window frames, and media. Avoid pill shapes; the look is crisp and technical.

## Components

### Buttons
- Primary: background #ffffff, text #08090a, 4px radius, 40px height, 8px×16px padding. Use for primary CTAs.
- Secondary: text #ffffff on transparent with 4px radius; pair with a #374151 1px border for visibility on dark.
- Link: text #ffffff, radius 0; use for quiet actions.

### Card
- Background #08090a, text #ffffff, 8px radius, 16px padding, optional 1px #374151 border. Use sm shadow only when the card should float.

### Hero CTA Pair
- Stack headline-lg (80px) over body-md (14px). Place two CTAs side-by-side: Primary (white fill) then Secondary (transparent with #374151 border). Gap: 24px. Accent arrows or notes may use #833cfb.

### App Window Mockup
- 8px corners, 1px #374151 border, inner shadow allowed for glow. Toolbar row uses body-md. Content shows tabs and comments; maintain 24–40px interior padding. Use #833cfb for active tab and focus states; inactive tabs stay #ffffff at reduced opacity.

### AirPods Promo Card
- Small floating card with 8px radius, sm shadow, 16px padding. Headline uses body-md; CTA or badge highlight in #b15afb. Keep it visually secondary to the hero CTAs.

### Tabbed Review Panel
- Four tabs (Details, Comments, Transcript, Similar). Active tab: text #ffffff with bottom border #833cfb. Panel content in 14px with 24px vertical rhythm; timestamp chips can use #374151 borders.

### Step List with Keyboard Cue
- Numbered steps in a single column. Each step row gets 24px gap. Keyboard keys (⌘/O) sit in a 4px-radius chip with #374151 border on #08090a.

### Feature Link Tiles
- Each tile: 8px radius card, 24–40px padding, title in headline-sm (33px/500), supporting copy in body-md. Hover: shift accent to #855cf8 or underline the link.

### Footer Link Grid
- Multi-column list with section headings in headline-xs (22px mono) and links in body-md. Columns separated by 24–40px gaps; top border #374151 optional.

## Do's and Don'ts

- Do reserve #833cfb/#b15afb for actions, indicators, and active states; keep informational text white.
- Do use 4px radius on buttons and 8px on frames for consistent hierarchy.
- Do rely on #374151 borders and tone shifts instead of heavy drop shadows.
- Don't mix new grays; stick to #08090a for surfaces and #ffffff for text to maintain contrast.
- Don't swap CTA colors arbitrarily—choose either white-fill or violet-accent as the single primary in any given section.
- Don't expand the spacing scale; compose with 6/24/40/56/152 to keep rhythm consistent.

## Agent Prompt Guide

Quick color reference — Text: #ffffff; Background: #08090a; Border: #374151; Accent: #833cfb (use #b15afb for highlights).

1) Build a dark hero with two CTAs
- Background: #08090a. Headline: Inter Tight 80px/1.08, weight 500, color #ffffff. Subhead: Inter Tight 14px/1.5, color #ffffff at 80% opacity. Padding top/bottom: 152px; sides: 40px. Place two buttons: Primary (fill #ffffff, text #08090a, radius 4px, height 40px, 8px×16px) and Secondary (transparent, text #ffffff, 1px border #374151, radius 4px). Button gap: 24px.

2) Create a feature card grid
- Three cards per row on desktop. Card: background #08090a, 1px border #374151, radius 8px, padding 40px. Title: Inter Tight 33px/1.21, weight 500, color #ffffff. Body: Inter Tight 14px/1.5. Hover: change link/indicator to #855cf8.

3) Tabbed review panel
- Container: radius 8px, 1px border #374151, padding 24px. Tabs row (left): Inter Tight 14px. Active tab: underline/bottom-border #833cfb and text #ffffff; inactive: #ffffff at 70%. Comments list uses 24px vertical spacing and timestamp badges with 1px #374151 border.

4) CTA stripe
- Section background: #08090a. Copy: Inter Tight 52px/1.19, weight 500. Supporting line: 14px/1.5. Centered primary button (fill #ffffff, text #08090a, radius 4px) and a link-style secondary (#ffffff, no fill). Section padding: 56px top/bottom.

## Similar Brands

- Linear — Dark canvas with purple accents; Linear is sparser with more grayscale, while Shade leans heavier on neon violets.
- Vercel — High-contrast black UI and restrained chrome; Vercel is more minimal with fewer decorative glows.
- Frame.io — Media-focused, dark surfaces and vibrant purples; Frame.io uses more gradients and cinematic imagery.
- Raycast — Dark, developer-leaning aesthetic with tight typography; fewer marketing flourishes, more utility-first components.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 hour ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 hour ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 13 hours ago