agentrhq__authsome/ui/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Authsome Secure Console	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #131315 #0e0e10 #2a2a2c #0e0e10 #1c1b1d #201f22 #2a2a2c #353437 #e5e1e4 #bbcabf #e5e1e4 #313032 #86948a #3c4a42 #4edea3 #4edea3 #003824 #10b981 #00422b #006c49 #a6d1ad #10381f #284f33 #95bf9d #bcc7de #263143 #98a3ba #2e394c #ffb4ab #690005 #93000a #ffdad6 #6ffbbe #4edea3 #002113 #005236 #c1edc8 #a6d1ad #00210d #284f33 #d8e3fb #bcc7de #111c2d #3c475a #131315 #e5e1e4 #353437	headline-lg headline-md body-lg body-sm code-md code-sm label-caps fontFamily fontSize fontWeight lineHeight letterSpacing Hanken Grotesk 30px 600 36px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Hanken Grotesk 24px 600 32px -0.01em fontFamily fontSize fontWeight lineHeight Hanken Grotesk 16px 400 24px fontFamily fontSize fontWeight lineHeight Hanken Grotesk 14px 400 20px fontFamily fontSize fontWeight lineHeight JetBrains Mono 14px 450 20px fontFamily fontSize fontWeight lineHeight JetBrains Mono 12px 400 16px fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 11px 700 16px 0.05em	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	margin-page gutter-grid stack-sm stack-md container-width 2rem 1rem 0.5rem 1.5rem 1200px

Brand & Style

The brand identity centers on Secure Developer Console: the calm, precise feeling of a well-instrumented control plane for agent credentials. It is built for engineers, platform teams, and security reviewers who need to trust the product before they try it.

The visual style is minimal infrastructure with quiet depth. It keeps shadcn component discipline, but avoids a page made of identical boxes. Sections should feel like layered panels, terminal surfaces, request traces, and security status bands rather than marketing cards. Gradients are allowed only as low-opacity light, edge glow, or inspection depth; they should never dominate the palette.

The strongest emotional signals are:

• Developer-focused: terminal fragments, command affordances, monospace metadata, request/audit language.
• Trustworthy: stable layout, restrained contrast, no bouncy motion, no over-decorated cards.
• Secure: emerald status accents, crisp boundaries, explicit policy/audit/vault language, subtle glow only around protected or verified states.
• Friendly: clear hierarchy, readable copy, obvious actions, enough whitespace for scanning.

Colors

The palette is anchored by Deep Emerald and Obsidian. We use a dark-first strategy to reduce eye strain for technical work and to evoke a code editor/control plane.

• Primary: Emerald (#10B981) used sparingly for successful states, primary actions, verified markers, and active request paths. It represents secure access, not decoration. Maps to --primary.
• Secondary: A deep Forest Green (#052E16) used for subtle backgrounds on active navigation items or success-themed containers.
• Neutral/Background: We use a true Obsidian (#09090B) for the primary background to maximize contrast with borders.
• Accents: Slate, zinc, and muted blue-gray tones support borders, secondary text, and architecture diagrams. Use them to create confidence without making the page monochrome.

Design token rules

Token	Dark mode value	Use
--primary	Emerald #10B981	Primary buttons, focus rings, active states, verified indicators
--accent	#2a2a2c (surface-container-high)	Neutral hover surface for cards, list rows, and menu items. Never set to emerald — that bleeds color into every interactive hover.
--muted	#201f22	Inactive backgrounds, inset panels, metadata rows
--border	#27272A	All 1px dividers and card outlines

--accent is intentionally a mid-level neutral surface, not a chromatic tint. Emerald influence on hover comes only from border-primary or a very low-opacity ring — never from bg-accent.

Typography

The typography system uses a dual-font approach to distinguish between "Interface" and "Data."

Hanken Grotesk serves as the primary UI font. It provides a sharp, contemporary sans-serif look that is highly legible at small sizes. Headings use tighter letter-spacing and heavier weights to feel structural.

JetBrains Mono is used for all "output" and system-related data, including IDs, terminal logs, audit event details, and credential strings. This distinction helps developers mentally categorize information: sans-serif is what the app is telling them, and monospace is the data they are managing. All labels for status or metadata use the label-caps role to mimic the appearance of a command-line header.

Layout & Spacing

The layout uses a fixed-fluid hybrid grid. Marketing pages should feel like product surfaces, not brochure sections: wide enough for technical detail, constrained enough for scanability.

• Navigation: Sticky, compact, and utility-like. The brand should read as a product in the first viewport.
• Content: Uses a 1rem gutter between elements. Information is grouped into panels, rows, terminal surfaces, and connected grids rather than repeated boxes.
• Rhythm: We follow a 4px base unit. Spacing between related items (label to input) is 8px, while spacing between unrelated sections is 24px or 32px.
• Mobile: On mobile devices, the grid collapses to a single column, the sidebar becomes a bottom sheet or a hidden menu, and page margins reduce to 1rem.

Elevation, Depth & Animations

This design system avoids high-elevation shadows in favor of Tonal Layering, Crisp Outlines, and Subtle Glows (Linear-style).

Depth is achieved through background contrast, hairline borders, and very soft gradients:

• Level 0 (Base): The primary app background (#09090B), with a subtle grid/cross texture.
• Level 1 (Panel/Section): A slightly lighter shade (#131315) with a subtle 1px border (#27272A).
• Level 2 (Terminal/Inspector): A higher contrast surface (#0E0E10 or #1C1B1D), internal dividers, and a soft ambient shadow.
• Gradient Use: Emerald gradients should sit at section edges, terminal glows, or hover borders at 5-12% opacity. They should imply protected flow, not decoration.

Shadows, when used, are strictly ambient: no heavy offset, large blur, low opacity. Interaction feedback is represented by changing the border color, surface tone, or very subtle glow. Avoid scaling cards and buttons; the product should feel steady.

Animations & Micro-interactions:

• Linear-style motion: Animations should be minimal, spring-based or smooth ease-outs using Framer Motion.
• Elements should fade in and slide up slightly (y: 20 to 0) as they enter the viewport.
• Staggered entrances for list items and grid cards.
• Hover states should include a subtle ease-in-out glow or border transition. Elements should feel responsive but not bouncy.

Shapes

The shape language is Soft-Technical. Use small radii and occasional open or split panels so the UI does not become boxy.

• Inputs & Buttons: 4px to 6px radius to provide just enough approachability.
• Containers: 8px radius for primary panels. Avoid large rounded cards unless they are terminal or inspector surfaces.
• Pills: Status badges (e.g., "Active", "Success") use a fully rounded/pill shape to distinguish them from interactive buttons.
• Section Grids: Prefer connected panels, timeline rows, split layouts, and hairline dividers over repeating boxed cards.

Components

Buttons

• Primary: Solid #10B981 with black text. No gradient. High contrast.
• Secondary: Transparent background with a 1px border (#27272A) and white text.
• Ghost: No border or background unless hovered.

Input Fields

• Dark backgrounds (#09090B) with 1px borders. Focus state should change the border color to #10B981 with a subtle emerald outer glow (2px). Labels should be in code-sm or body-sm.

Cards & Panels

• Cards must have a 1px border, but repeated cards should not all have the same box silhouette. Use connected grids, split panels, list rows, or asymmetric feature panels where possible.
• Use tonal surfaces over heavy shadows. A card hover can reveal a faint emerald edge or gradient, but should not jump or scale.

Status Chips

• Use the code-sm font. Backgrounds should be low-saturation (e.g., a very dark red for "Error" with light red text) to ensure the interface doesn't become too "noisy."

Code Blocks

• Use a distinct background (#000000) with a 1px emerald border left-accent. Use JetBrains Mono for the content.

Homepage Sections

• Hero: Must immediately communicate developer trust: install command, source link, runtime credential injection, and a real terminal/agent moment.
• Incident Proof: Should feel like a security briefing, not blog cards. Use compact evidence panels with source metadata.
• Problem/Context: Use a high-readability editorial block plus a connected claim grid.
• Features: Should look like capability inventory for platform engineers. Numbering, labels, and borders matter.
• Audience: Should feel human and clear, with less box weight than feature inventory.
• Architecture: Should read like a layered control plane, with terminal/trace language and calm state indicators.