Thenai Design System Deep Dive

1. Brand Overview

Thenai’s visual language hits you with a mix of academic credibility and a sharp, modern tech edge. This isn’t a playful startup palette—it’s structured, deliberate, and confident. The black-and-white base gives it authority, while the saturated violet (#7900f2) injects energy without feeling frivolous. You can tell they want to be taken seriously but also to stand apart from the usual dull blues and greys that dominate professional organizations.

The typography choices—GT America for most headings and buttons—are a statement. GT America isn’t a free system font, it’s a high-end, license-required typeface from Grilli Type. That’s a signal: They care about typographic detail, and they’re willing to invest in it. The fallback stack leans on ui-sans-serif for links and smaller text, which keeps things clean when GT America isn’t available.

Layout-wise, they’re working off an 8px grid with occasional micro-adjustments (4px, 6px increments). That keeps rhythm consistent while allowing flexibility for content-heavy layouts. Breakpoints span from mobile at 500px up to large desktop at 1280px, so they’re not chasing ultra-wide 4K-specific layouts—this is about accessibility and usability on realistic devices.

The vibe: structured, academic, trustworthy—but with enough color punch to avoid looking stale. This is for an audience that wants authority and clarity, probably in the AI ethics, governance, or academic research space. The UI is minimal in ornamentation, leaning on typography and color rather than heavy gradients or textures. Borders are used sparingly; shadows exist but are subtle, functional, not decorative. I love that—they’re resisting the temptation to over-style.

Odd choice: the use of full pill shapes (9999px radius) alongside squared edges in certain menus. A mix like this can feel incoherent unless there’s a strong rationale—here, it seems to distinguish interactive elements (pills) from containers (square). If you’re building for this brand, you’ll need to respect that separation.

Overall, Thenai’s design system is opinionated, minimal, and typography-led. You can’t just toss in your own color or font—they’ve already decided what works. And it works because it’s tight and consistent.

2. Color System

2.1 Primary Colors

Primary semantic color: rgb(0, 0, 0) (#000000). That’s unusual—most brands pick a chromatic primary. Here, black is the anchor, which makes sense given the academic tone. The real “brand” color is the vivid violet #7900f2, which shows up in links and accents. Violet here carries both creativity and authority—less corporate than blue, less aggressive than red.

This works because black provides contrast and gravitas, while violet signals the brand’s identity. Competitors in the AI ethics space often lean on blue (#0055aa) or teal—Thenai’s violet sets them apart visually.

2.2 Complete Palette

2.3 Color Relationships

Black + violet = high contrast and brand identity. Black on white meets WCAG AA easily. Violet on white also passes comfortably with a ratio >4.5:1. The more subtle greys (#5d5d5d, #757575) are fine for secondary text but shouldn’t be used for primary content without sufficient size.

They’ve got both opaque and semi-transparent variants of violet (#334aff with alpha) for background accents—these help soften the color for large areas while keeping text legible.

No explicit dark mode palette here, but given the deep indigos, you could invert easily—black becomes background, white text, violet still works as accent.

2.4 Usage Guide

• Use violet (#7900f2) for brand-linked interactions: links, CTAs.
• Keep black (#000000) for text and primary icons.
• Never put violet text on a violet background—legibility dies.
• Use greys for secondary info, but keep them above 3:1 contrast ratio.
• Semi-transparent blues (#334affxx) are safe for overlays and highlight backgrounds.
• Error red (#da394d) is only for error states—don’t use as accent.

3. Typography

3.1 Font Families

Primary: GT America — Used for headings and buttons. No fallbacks listed, so it relies on Adobe Fonts.

Secondary: ui-sans-serif — System stack: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji.

Occasional use of proxima-nova for certain heading contexts.

Adobe Fonts integration confirmed. No Google Fonts.

3.2 Type Scale

3.3 Hierarchy

Large headings (72px, 60px) are tight (line-height: 1.00), aggressive in visual space. GT America gives them authority and crispness. Link text at 30px for certain UI contexts is big—these aren’t subtle navigational links, they’re content-level calls to action.

Body text sits comfortably at 16px with 1.5 line height—good readability. The multiple 16px styles with slight tracking changes (0.8px) suggest fine-tuning for visual alignment, especially in headings with smaller sizes.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints:

• 500px
• 600px
• 640px
• 768px
• 781px
• 782px
• 1024px
• 1280px

Responsive approach is incremental—no huge jumps. Likely using Tailwind CSS responsive modifiers (sm:, md:, lg:) with Vuetify components under the hood.

5. Visual Elements

• Border Radius:

  • 6px (main menu) — low confidence; probably for small UI elements.
  • 9999px (pill) — high confidence; used for a and div elements to create pill shapes.

• Shadows:

  • rgba(0, 0, 0, 0.2) 0px 2px 15px 0px — functional depth for modals/cards.
  • Multi-layer subtle shadow for micro-elevation: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.06) 0px 1px 2px.

• Borders:

  • Common: 0px 0px 2px solid #e5e7eb — underline style for links.
  • Thicker (5px) for emphasis.
  • Side borders (2px solid #d1d5db) in certain containers.
  • Accent borders (2px solid #00c6f2) for highlights.

6. Components

6.1 Buttons

No explicit button background colors in extracted data, but typography and border radius imply:

• Primary: GT America, bold, 9999px radius for pill shape.
• States driven by accent colors (#334aff variants for hover/active).

6.2 Links

Multiple link styles:

1. Black (#000) — default text links. Hover: grey (rgba(107,114,128) var).
2. White (#fff) — on dark backgrounds.
3. Indigo (#6366f1) — accent links.
4. Violet (#7900f2) — brand links.
5. Cyan (#00c6f2) — strong CTA.

No underlines; hover changes color only.

6.3 Forms

Form backgrounds: #fff. Borders: #7d7d7d secondary. Likely subtle focus changes via #334aff accent.

6.4 Cards

Shadows: 0px 2px 15px rgba(0,0,0,0.2). Padding: multiple 32px, 40px increments.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-black: #000000;
  --color-brand-violet: #7900f2;
  --color-white: #ffffff;
  --color-deep-purple: #584e91;
  --color-deep-navy: #040112;
  --color-dark-indigo: #07021f;
  --color-dark-indigo-2: #040113;
  --color-dark-indigo-3: #070220;
  --color-event-icon-hover: #334aff;
  --color-link-accent-hover: #334affcc;
  --color-icon-secondary: #bababa;
  --color-event-icon: #141827;
  --color-accent-primary-bg: #334aff12;
  --color-accent-primary-week-event: #334aff1a;
  --color-text-secondary-event-date: #5d5d5d;
  --color-button-secondary-active: #141827e6;
  --color-swiper-theme: #007aff;
  --color-icon-primary-alt: #757575;
  --color-accent-secondary-hover: #141827cc;
  --color-icon-error: #da394d;
  --color-bg-secondary-datepicker: #f7f6f6;
  --color-border-secondary: #e4e4e4;
  --color-form-border-secondary: #7d7d7d;
  --color-accent-primary-week-event-featured: #334aff0a;
  --color-border-default: #d5d5d5;
  --color-accent-primary-week-event-featured-hover: #334aff24;
  --color-bg-messages: #14182712;
  --color-bg-transparent: #fff9;
  --color-bg-secondary-multiday: #1418273d;
  --color-bg-secondary-multiday-hover: #14182757;
  --color-accent-primary-week-event-hover: #334aff33;
  --color-bg-error: #da394d14;
  --color-bg-primary-multiday-hover: #334aff57;
  --color-button-primary-active: #334affe6;
  --color-bg-primary-multiday: #334aff3d;
  --color-bg-secondary-hover: #f0eeee;

  /* Typography */
  --font-gt-america: "GT America", sans-serif;
  --font-ui-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-proxima-nova: "Proxima Nova", sans-serif;

  /* Spacing */
  --space-4: 0.25rem;
  --space-6: 0.38rem;
  --space-8: 0.50rem;
  --space-10: 0.63rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-112: 7rem;
  --space-115: 7.21rem;
  --space-128: 8rem;
  --space-144: 9rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-lg: 0px 2px 15px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px rgba(0,0,0,0.06);
}

8. AI Coding Assistant Prompt

# Thenai Design System Specification

You are a Thenai design expert. Build UIs matching their visual language exactly.

## Brand Context
Thenai’s design is minimal, academic, and authoritative. Black and white provide structure; violet accents carry brand identity. Typography is premium and deliberate, with GT America leading visual hierarchy.

## Color Palette
- Primary Black: #000000 — Text, headings, UI icons
- Brand Violet: #7900f2 — Links, highlights
- White: #ffffff — Backgrounds, text on dark
- Deep Purple: #584e91 — Hover/focus accents
- Deep Navy: #040112 — Hover backgrounds
- Dark Indigo: #07021f — Alt hover backgrounds
- Dark Indigo 2: #040113 — Background hover
- Dark Indigo 3: #070220 — Alt hover
- Event Icon Hover: #334aff — Calendar/event icon hover
- Link Accent Hover: #334affcc — Link hover
- Icon Secondary: #bababa — Secondary icons
- Event Icon: #141827 — Calendar/event icons
- Accent Primary Background: #334aff12 — Accent surfaces
- Accent Primary Week Event: #334aff1a — Calendar week events
- Text Secondary Event Date: #5d5d5d — Secondary text
- Button Secondary Active: #141827e6 — Active state
- Swiper Theme Color: #007aff — Carousel UI
- Icon Primary Alt: #757575 — Alternate icons
- Accent Secondary Hover: #141827cc — Hover state
- Icon Error: #da394d — Error icons
- Background Secondary Datepicker: #f7f6f6 — Date picker
- Border Secondary: #e4e4e4 — Dividers
- Form Border Secondary: #7d7d7d — Input borders
- Accent Primary Week Event Featured: #334aff0a — Featured events
- Border Default: #d5d5d5 — Default borders
- Accent Primary Week Event Featured Hover: #334aff24 — Hover featured events
- Background Messages: #14182712 — Message container
- Background Transparent: #fff9 — Overlay
- Background Secondary Multiday: #1418273d — Calendar events
- Background Secondary Multiday Hover: #14182757 — Hover
- Accent Primary Week Event Hover: #334aff33 — Hover accent
- Background Error: #da394d14 — Error background
- Background Primary Multiday Hover: #334aff57 — Hover primary events
- Button Primary Active: #334affe6 — Active button
- Background Primary Multiday: #334aff3d — Primary events
- Background Secondary Hover: #f0eeee — Hover background

## Typography
- Headings: GT America
- Body/UI: ui-sans-serif stack
- Special: Proxima Nova in some headings

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 72px | 700 | 1.00 | Page titles |
| H1 | 60px | 700 | 1.00 | Large headings |
| H1 | 48px | 700 | 1.25 | Section headings |
| H1 | 36px | 700 | 1.11 | Subsections |
| Link | 30px | 500 | 1.20 | Large CTAs |
| H1 | 30px | 700 | 1.20 | Mid headings |
| Button | 24px | 700 | 1.33 | Primary buttons |
| Body | 20px | 700 | 1.40 | Key labels |
| Link | 18px | 700 | 1.56 | Inline CTAs |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Caption | 14px | 400 | 1.43 | Meta info |

## Spacing & Grid
Base: 8px. Scale: 4, 6, 8, 10, 12, 16, 24, 28, 32, 40, 48, 64, 80, 112, 115.328, 128, 144.

Map:
- Button padding: 12px vertical / 24px horizontal
- Card padding: 32px
- Section gaps: 64px

## Border Radius
- sm: 6px — menus
- full: 9999px — pill buttons, avatars

## Shadows & Depth
- Large: 0px 2px 15px rgba(0,0,0,0.2)
- Small: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px rgba(0,0,0,0.06)

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #7900f2;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 9999px;
  font-family: "GT America", sans-serif;
  font-weight: 700;
  font-size: 24px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #584e91; }
.btn-primary:focus { outline: 2px solid #334aff; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

Secondary Button

.btn-secondary {
  background: transparent;
  color: #000000;
  border: 2px solid #00c6f2;
  padding: 12px 24px;
  border-radius: 9999px;
}
.btn-secondary:hover { color: #584e91; border-color: #584e91; }

Navigation Links

.nav-link {
  color: #000000;
  text-decoration: none;
}
.nav-link:hover { color: rgba(107,114,128,1); }

Input Fields

.input {
  border: 1px solid #7d7d7d;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 16px;
  background: #ffffff;
}
.input:focus { border-color: #334aff; outline: none; }

Card

.card {
  background: #ffffff;
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
}

Layout & Responsive Rules

• Max content width: 1280px
• Page padding: 16px (mobile) / 32px (desktop)
• Grid gap: 32px
• Breakpoints: 500, 600, 640, 768, 781, 782, 1024, 1280

Interaction Rules

• Transition timing: 150ms ease
• Focus indicators: 2px solid accent
• Loading states: reduce opacity to 50%

DO List

• Use ONLY colors from the palette
• Maintain 8px grid spacing
• Use GT America for headings/buttons
• Keep link hover without underline
• Use pill shapes for interactive buttons
• Respect breakpoints for responsive design

DON'T List

• Add new colors
• Mix rounded and sharp corners inconsistently
• Use shadows heavier than provided
• Underline links unless specified
• Use GT America for body text (keep for headings/buttons)

Code Examples

Primary Button:

<button class="btn-primary">Click Me</button>

Secondary Button:

<button class="btn-secondary">Learn More</button>

Form Input:

<input class="input" placeholder="Search..." />

---

## 9. Summary

**TL;DR** — Thenai’s design system is academic minimalism with a punchy violet accent. Strict typography hierarchy, 8px grid, pill-shaped interactive elements, and subtle shadows define the look.

**Brand Keywords**:
- academic-minimalist
- violet-accented
- typography-led
- grid-disciplined
- interaction-focused