DesignMe Agency — Design System

1. Visual Theme & Atmosphere

DesignMe Agency presents itself through radical restraint. White canvas, black type, zero decorative colour — and then a surprise: section labels and metadata set in JetBrains Mono, a monospaced programmer’s typeface, while headlines deploy Inter Display at a measured 40px/600 weight. This typographic friction between display grotesque and developer monospace creates a personality that says “designers who code.” The absence of custom CSS properties is itself a statement — this is a hand-authored system, not a design-token framework.

2. Color Palette & Roles

The complete absence of brand colour is the brand statement. Even the link colour is the browser default, suggesting an ironic or conceptual design sensibility. The muted grey for h2/labels (#8a8a8a) creates a whisper-soft label system.

3. Typography Rules

Display typeface: Inter Display (SemiBold 600) — headlines only. Label / body typeface: JetBrains Mono — all secondary text, eyebrows, paragraphs.

• The dual-font system is the primary visual tension: proportional grotesque (Inter Display) vs. monospaced (JetBrains Mono).
• h2 at 11px uppercase in mono is a label/eyebrow pattern — it’s metadata, not a heading in the semantic sense.
• No custom font-feature settings — no OpenType magic here.
• Very compact scale: body text lives at 11–12px.

4. Component Styling

• Main layout: 24px top, 16px right, 16px bottom, 8px left padding — asymmetric, intentional.
• Content gap: 16px — tight, editorial.
• Buttons: Transparent background, dark navy text (rgb(28,36,48)) — borderless ghost style.
• No custom shadows, no border-radius tokens, no elevation system.
• No custom properties at all — this is raw, direct CSS.

5. Layout Principles

• Main container uses asymmetric padding (24/16/16/8) — a grid offset that creates a visual pull to the right.
• Content gap of 16px throughout — compressed, editorial density.
• No section-level padding tokens — layout is handled at the component level.
• The absence of a design token system suggests a custom, hand-tuned layout.

6. Depth & Elevation

• No shadows whatsoever. The design is completely flat.
• Depth is created only through typographic contrast (large Inter Display vs. tiny JetBrains Mono) and whitespace.
• No overlays, no modals, no elevation vocabulary.

7. Do’s and Don’ts

Do:

• Use Inter Display at 600 weight for all primary headings.
• Set all labels, eyebrows, and metadata in JetBrains Mono at 11px.
• Embrace the asymmetric layout — the offset padding is intentional.
• Treat the browser-default blue link as a design element, not an oversight.

Don’t:

• Add brand colour — the monochrome palette is the identity.
• Use Inter for labels or JetBrains Mono for headings — the role separation is strict.
• Add shadows, gradients, or decorative elements.
• Round any corners — pure sharp geometry throughout.

8. Responsive Behavior

• No breakpoint tokens defined — likely a fixed or simple responsive layout.
• The asymmetric padding (24/16/16/8) may need rebalancing at mobile — consider centred padding.
• Compact text sizes (11px) need careful handling on mobile to remain legible.

9. Agent Prompt Guide

Build a design agency portfolio with DesignMe’s typographic duality. White background (#ffffff), black text. Headings: Inter Display SemiBold 600 at 40px, tracking -0.4px. Labels and all secondary text: JetBrains Mono at 11px, uppercase for section markers. No brand colour, no shadows, no border-radius. Main padding asymmetric: 24px top, 16px right, 16px bottom, 8px left. Content gap 16px. Flat, white, typographically precise.

Generated by Sparkbites — extracted from live CSS analysis