THYME STUDIO

Overview

THYME STUDIO is a brutalist design studio specializing in digital product design, UI/UX, and visual identity for web3 and crypto brands. The aesthetic movement is 'Architectural Brutalism'—a deliberate rejection of ornament in favor of stark geometric forms, high contrast, and typographic precision. The interface evokes clarity and intellectual rigor: every pixel serves a function, every color choice is intentional, and the user experiences a sense of refined minimalism rather than warmth. The brand serves interdisciplinary designers and creative directors who value substance over decoration.

The voice is direct, confident, and unapologetically technical. THYME speaks in active verbs and concrete nouns—never flowery, never apologetic. Vocabulary leans into design terminology ("brutalism," "typography," "hierarchy") and web3 language ("crypto," "web3," "digital product"). The tone is peer-to-peer: a senior designer addressing other senior designers. Example sentence: "We design interfaces that prioritize signal over noise—every interaction earns its place."

Colors

The color system is rooted in high-contrast monochromacy with a single accent: primary blue (#278dcd) serves as the only chromatic element, used exclusively for interactive affordances (CTAs, links, focus states) and the logo. This restraint forces the eye to the most important interactions. The surface stack moves from pure white (#ffffff) through carefully calibrated grays (#f5f5f5, #e9ecef, #d0d0d0, #cccccc) to near-black (#222222), creating a 9-step hierarchy. On-surface text is always #222222 (not pure black, which reads as harsh); on-surface-variant is #6c757d for secondary information. The outline color (#505050) is used for borders and dividers, creating visual separation without aggression. Primary (#278dcd) is applied to buttons, active navigation states, and hover effects; its c

Typography

The type system uses two typefaces from Adobe Typekit: ftnk (a geometric sans-serif, weights 400–700) for headlines, labels, and navigation; dwgd (a humanist sans-serif, weights 300–400) for body text and longer-form content. This pairing creates contrast: ftnk's geometric precision conveys authority and structure, while dwgd's warmth makes body copy readable and approachable. Display (64px, 700 weight, -0.03em tracking) is reserved for hero statements and major section breaks; headline-lg (40px, 700 weight) anchors project titles; body-md (16px, 400 weight, 24px line-height) is the default for descriptions and metadata. All labels use ftnk at 14px or 12px with increased letter-spacing (0.02–0.03em) to reinforce hierarchy and scanability. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on

Layout

The page uses a 12-column fluid grid with a max-width of 1024px, centered on the viewport. The grid is invisible but enforced: all major sections (header, project covers, footer) align to column boundaries. White-space is semantic and generous: lg spacing (40px) separates major sections; md spacing (24px) separates cards and components; sm spacing (12px) is used for internal padding within cards and buttons. The project gallery uses a 2-column layout on desktop (each project cover spans 6 columns), collapsing to 1 column on mobile. The gutter between columns is 24px. Container max-width is 1024px, with 24px padding on either side on tablet and mobile, creating a responsive rhythm that never feels cramped. The header is fixed and uses 0px vertical padding, allowing the logo and navigation t

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color gradients. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for small interactive elements like buttons and badges; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for expanded states and overlays. Project covers use no shadow by default, but on hover they scale to 0.98 and receive md elevation, creating a subtle lift effect. The lightbox overlay uses a fixed background with z-index layering: base content at z-index 0, cards at z-index 100, modals at z-

Shapes

The shape philosophy is 'Geometric Restraint'—rounded corners are used strategically to soften brutalist edges without compromising the aesthetic. Buttons and inputs use full border-radius (9999px) to create pill-shaped affordances that signal interactivity; this is the most rounded element in the system. Cards and project covers use sm (4px) or DEFAULT (8px) radius, just enough to prevent harsh corners without appearing playful. The logo uses a 60px border-radius on its oval container, creating a contained, badge-like appearance. All radius values are applied consistently: no arbitrary roundi

Components

Action Elements Buttons are the primary interactive element. The button-primary uses a 2px solid border in primary blue (#278dcd) with transparent background, 12px vertical and 32px horizontal padding, and full border-radius (9999px). On hover, the background fills with primary blue and text inverts to white, creating a clear state change. The transition is 0.2s ease on both background and color. The button-secondary is identical but inverted: transparent background with primary blue text and border, filling with primary-container (#e3f2fd) on hover. Both buttons use label-md typography (14px, 500 weight, 0.02em tracking) for crisp, scannable text.

Containers & Surfaces Cards use a 1px solid border in surface-container-high (#d0d0d0), 24px padding, and 4px border-radius. The defau

Do's and Don'ts

**Do**

• Do use primary blue (#278dcd) exclusively for interactive affordances—buttons, links, focus states, and the logo—to create an immediate visual language.
• Do maintain high contrast between text and background; never use on-surface-variant (#6c757d) for body copy, only for secondary metadata.
• Do apply full border-radius (9999px) to buttons and interactive pills to signal clickability; use minimal radius (4–8px) on containers.
• Do use ftnk for all headlines, labels, and navigation; reserve dwgd for body text and longer-form content.
• Do respect the 24px gutter between grid columns and use lg spacing (40px) to separate major sections; white-space is a design tool.
• Do apply 0.2s ease transitions to all interactive state changes (hover, focus, active) to create a cohesive interaction model.

**Don't**

• Don't use color for hierarchy; use typography weight, size, and letter-spacing instead. Color is reserved for interaction and the brand accent.
• Don't apply shadows to project covers or gallery items by default; reserve elevation for cards, modals, and hover states.
• Don't use rounded corners on containers larger than cards; the grid and typography should define hierarchy, not shape.
• Don't mix typefaces within a single component; ftnk for labels, dwgd for body—never reverse or blend.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #222222 for on-surface and #ffffff for backgrounds only.
• Don't animate color changes faster than 0.2s or slower than 0.3s; the system uses 0.2s ease for color and 0.3s ease for transforms to maintain consistency.