Shalltry Design System Deep Dive

1. Brand Overview

Shalltry doesn’t look like it’s trying to impress you with visual fireworks. In fact, the first impression is almost stark — type-driven, minimal, and stripped of ornamentation. This isn’t the kind of brand that’s chasing gradients, neon palettes, or elaborate UI patterns. Instead, it leans into restraint. There’s a confidence in that choice: when you remove all the fluff, you force the content and structure to carry the weight.

The typography choices say a lot. Headings in Times — a serif classic — combined with monospace captions. That’s unusual. It pairs a voice of tradition (Times) with a utilitarian, almost code-like secondary style (monospace). This creates an interesting tension. You’re not being sold a lifestyle; you’re being handed information, and the tools to engage with it. If you’ve seen old academic journals or early web documentation, you’ll recognize the DNA.

Shalltry’s layout is tight. The spacing scale is custom — 5px, 10px, 13px — not the common 4px or 8px grids most modern systems use. This breaks from convention, but it also signals independence. They’re not following Bootstrap’s lead or Material’s spacing guidelines; they’ve carved their own increments.

Borders are sparse. There’s a single recorded border combination: 0px top/left, 2px solid bottom, black (rgb(0, 0, 0)). That’s a subtle underline, probably used for separation without boxing elements in. No border-radius tokens are defined. No shadows. This is flat design taken to a purist level — depth is implied through spacing and hierarchy, not visual effects.

If you’re a designer or developer coming to Shalltry’s world, expect minimal visual cues and a lot of typographic responsibility. This is a system where color is almost absent (no palette data was extracted), and the hierarchy is driven almost entirely by font and spacing. It’s a deliberate choice, and it works if you want focus and clarity.

2. Color System

Here’s the interesting thing: the extracted data shows no defined color palette other than one border color — pure black (rgb(0, 0, 0)). That’s it. No semantic colors, no background, no primary brand color. This is rare. Most brands at least define one or two core colors to anchor their identity.

2.1 Primary Colors

The absence of a primary color suggests that Shalltry’s primary "color" is actually black text on white background. That’s a statement in itself. It’s timeless, neutral, and maximizes legibility. Competitors who lean on color (think GitHub’s blues or Medium’s greens) are using hue to differentiate. Shalltry avoids it entirely — differentiation here comes from type and layout.

Black is psychologically associated with authority, formality, and clarity. In UI, it’s the ultimate neutral — it makes content king. The downside: without color, interactive elements must rely on other cues (weight, underline, spacing) to signal affordance.

2.2 Complete Palette

From the extracted data:

No other colors are extracted. This means the site likely defaults to browser text colors (black) and white backgrounds without explicit tokens.

2.3 Color Relationships

With only black in play, contrast ratios are naturally high on white backgrounds — WCAG AAA compliance for text is trivial. The absence of other colors means no risk of low-contrast text. Accessibility is strong by default.

Dark mode? Not represented in the data. If Shalltry were to implement it, they’d need to invert the scheme (white text on black background) and define at least one accent color for links and focus states.

2.4 Usage Guide

• Works well: Black text on white backgrounds, black borders for subtle separation.
• Avoid: Introducing arbitrary colors — it will break the visual unity. If you must add color (e.g., for error messages), define it explicitly and keep it minimal.
• Interactive elements: Since there’s no color token for links or buttons, use underline, weight changes, or spacing to signal clicks.

3. Typography

Typography is the hero here.

3.1 Font Families

Two contexts are defined:

• Heading-1: Times — classic serif, no fallback stack defined.
• Caption: monospace — functional, fixed-width font, no fallback defined.

No Google Fonts or Adobe Fonts are used. No variable fonts. This is pure system fonts — fast to load, universally available.

3.2 Type Scale

Yes, you read that right — H1 is 16px. That’s the same as most body text defaults. This flattens hierarchy. The distinction between heading and body must come from font family rather than size. In a typical scale, H1 might be 32px+, but Shalltry compresses it.

3.3 Hierarchy

With such close sizes (16px vs 13px), hierarchy is subtle. Times headings stand out because of their serif shapes, while captions drop in size and switch to monospace. The result: a clean, content-first look with minimal visual noise. Readability is high for text-heavy layouts, but large displays might feel underwhelming without bigger headings.

4. Spacing & Layout

4.1 Spacing Scale

Custom values:

This is not a multiple-of-4 grid. It’s irregular, which means developers need to be careful — you can’t just multiply a base unit. These are likely hand-picked for specific contexts.

4.2 Layout

No breakpoints are defined in the data — likely a static or fluid layout without responsive tokens. Container widths aren’t specified. Given the minimal design, responsiveness probably relies on default browser behavior rather than explicit design system rules.

5. Visual Elements

• Border radius: None recorded. This means corners are sharp throughout. Cards, buttons, and inputs (if any) will be rectangular with 90° angles.
• Shadows: None. This is pure flat design.
• Borders: One combo — bottom border only, 2px solid black, applied to div. This is minimalistic separation.

6. Components

The extracted data shows no styled components for buttons, inputs, links, or cards. This is unusual but consistent with the brand’s minimalism — perhaps they rely on native browser styles.

6.1 Buttons

No custom button data. Likely using <button> defaults: grey background, black text, rectangular shape.

6.2 Links

Not registered in the data. Possibly default browser blue underlined links.

6.3 Forms

All input types are empty in the data — no custom styles. This means form fields look native to the OS/browser.

6.4 Cards

No defined padding, shadows, or hover effects. Layout probably uses simple div stacks with borders or spacing.

7. Design Tokens

Here’s the minimal CSS custom properties set based on extracted values:

:root {
  /* Colors */
  --color-black: #000000;

  /* Typography */
  --font-heading-1: Times;
  --font-caption: monospace;
  --font-weight-normal: 400;
  --font-size-heading-1: 16px;
  --font-size-caption: 13px;

  /* Spacing */
  --space-5: 5px;
  --space-10: 10px;
  --space-13: 13px;

  /* Borders */
  --border-bottom-width: 2px;
  --border-bottom-style: solid;
  --border-bottom-color: var(--color-black);

  /* Radius */
  --radius-none: 0;
}

8. AI Coding Assistant Prompt

# Shalltry Design System Specification

System Prompt:
You are a Shalltry design expert. Build UIs matching their visual language exactly.

Brand Context:
Shalltry's visual language is minimal, typographic, and content-first. It uses system fonts, sharp corners, no shadows, and almost no color except black. Hierarchy comes from font family changes rather than size differences.

Color Palette:
- Black: #000000 — Borders, text, primary visual anchor.

Typography:
- Heading-1: "Times", weight 400, size 16px (1.00rem) — Use for all main titles.
- Caption: "monospace", weight 400, size 13px (0.81rem) — Use for secondary notes, labels.
- No Google/Adobe fonts; system fonts only.

Spacing & Grid:
- Base units: 5px, 10px, 13px.
- Use 5px for tight gaps, 10px for medium spacing, 13px for captions or small block padding.
- No standard 4px or 8px grid — use exact values.

Border Radius:
- none: 0px — All components have sharp corners.

Shadows & Depth:
Flat design — no shadows. Use borders (2px solid black bottom) for separation.

Component Specifications:

Primary Button:
```css
.btn-primary {
  background: transparent;
  color: #000000;
  font-family: Times;
  font-size: 16px;
  font-weight: 400;
  border: none;
  border-bottom: 2px solid #000000;
  padding: 5px 10px;
  border-radius: 0;
  transition: opacity 150ms ease;
}
.btn-primary:hover { opacity: 0.8; }
.btn-primary:focus { outline: 2px solid #000000; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #000000;
  font-family: monospace;
  font-size: 13px;
  font-weight: 400;
  border: none;
  border-bottom: 2px solid #000000;
  padding: 5px 10px;
  border-radius: 0;
}
.btn-secondary:hover { opacity: 0.8; }
```

Navigation Links:
```css
.nav-link {
  color: #000000;
  text-decoration: underline;
  font-family: Times;
  font-size: 16px;
}
.nav-link:hover { opacity: 0.8; }
```

Input Fields:
```css
.input {
  border: 2px solid #000000;
  border-radius: 0;
  padding: 5px;
  font-family: monospace;
  font-size: 13px;
}
.input:focus { outline: 2px solid #000000; }
```

Cards:
```css
.card {
  background: transparent;
  border-bottom: 2px solid #000000;
  padding: 10px;
}
```

Layout & Responsive Rules:
- Max content width: fluid.
- Page padding: 10px.
- Grid gap: choose from 5px, 10px, 13px.
- No defined breakpoints — rely on browser defaults.

Interaction Rules:
- Transition timing: 150ms ease for hover/focus changes.
- Focus indicators: 2px solid black.
- No loading animations — keep static.

DO List:
- Use ONLY black for text and borders.
- Maintain spacing units of 5px, 10px, 13px — no arbitrary values.
- Keep corners sharp — radius 0.
- Use Times for headings, monospace for captions.
- Use borders for separation — no shadows.

DON'T List:
- Don’t introduce colors other than black.
- Don’t add rounded corners.
- Don’t use shadows.
- Don’t increase H1 size beyond 16px.
- Don’t mix font families outside Times/monospace.

Code Examples:

Primary Button:
```css
<button class="btn-primary">Click Me</button>
```

Card:
```css
<div class="card">
  <h1>Card Title</h1>
  <p>Card content here.</p>
</div>
```

Form Input:
```css
<input type="text" class="input" placeholder="Enter text">
```

9. Summary

TL;DR — Shalltry’s design system is stripped down to the bones: black text, system fonts, sharp corners, no shadows. It’s all about typography and spacing, with a custom scale (5px, 10px, 13px) and minimal borders. If you want to build for Shalltry, you need discipline — introduce nothing extra.

Brand Keywords:

• type-first-minimalism
• monochrome-authority
• flat-purist
• grid-independent
• content-driven