Hume AI

This design system evokes a sense of gentle authority and advanced scientific inquiry, presenting complex AI research with an approachable, almost pastel-like palette. The primary typefaces, Fellix and PP Fraktion Mono, contrast a bespoke humanist sans-serif with a technical monospaced font, establishing a duality of user-friendliness and precision. Subtle, muted chromatic backgrounds create distinct section breaks and highlight content, preventing visual fatigue, while the prominent use of rounded forms offers visual softness in a technology-focused context. Use Pale Ivory (#fff9f3) as the default page background to establish a warm, inviting tone. Apply Graphite (#222222) for all primary body text, headlines, and main interactive element backgrounds to ensure strong contrast and readability. Employ the fully rounded 1.67772e+07px radius for all buttons and text input fields to maintain a soft, approachable aesthetic. Reserve Deep Plum (#c094e4) for key interactive elements, headlines that need emphasis, and prominent data visualizations. Utilize Fellix for all general UI text and headings, adjusting letter-spacing to -0.6px where larger font sizes are used. Alternate section backgrounds between Pale Ivory (#fff9f3) and muted chromatic tints like Light Mauve (#fce0ee) or Soft Lilac (#e6d1ed) to create visual separation. Maintain a clear element gap of 12px and card padding of 24px within components for consistent internal spacing. Avoid using harsh, saturated colors for backgrounds; stick to the muted pastel range provided for secondary content areas. Do not introduce sharp corners on interactive elements or cards; the aesthetic relies on a consistent soft radius (8px to 1.67772e+07px). Refrain from using bold or heavy font weights for headlines; the Fellix typeface in weights 400 and 520 provides sufficient hierarchy without being assertive. Do not deviate from the established letter-spacing values; the tight -0.025em for Fellix and expanded 0.025em for PP Fraktion Mono are integral to the typographic identity. Avoid excessive use of drop shadows; depth is primarily achieved through background color shifts and subtle elevation. Do not use PP Fraktion Mono for general body text; its monospaced nature is intended for data and technical contexts only. Never use generic blue for links; active links should employ Deep Plum (#c094e4) to align with brand accents.