attoset-brand

AttoSet Brand & Design System

Apply this on every UI/visual/copy task for the AttoSet site.

1. Personality

Modern · intelligent · bold · premium · minimalistic · enterprise-ready. Restraint over decoration. Confidence over noise. Every screen should feel engineered.

2. Color tokens

Token	Value	Use
--ink	#0A0A0A	primary text, primary buttons, dark feature panels
--ink-soft	#3A3A3A	secondary text
--muted	#6B6B6B	tertiary text, captions
--line	#ECEAE7	hairline borders, dividers
--bg	#FFFFFF	base background
--bg-warm	#FBFAF8	alternating off-white sections
--orange	#FF512A	CTAs, AI/Atto, key highlights ONLY
--orange-600	#E8431F	hover state
--peach	#FFE9E1	soft tints, gradient stops

Orange is surgical. It marks the most important action or any Atto/AI moment — not large fills of body UI. White + ink carry the structure; orange punctuates.

Light mode only. Never ship a prefers-color-scheme: dark default. Dark panels are an intentional design choice (e.g. a security/agents band), not theming.

3. Typography

• Display / headings: Bricolage Grotesque (tight tracking, weight 600–800). Large, confident, mostly text-balance.
• Body / UI: Geist Sans.
• Eyebrows / labels / code: Geist Mono, uppercase, tracking-[0.2em], small, often in --muted or --orange. This monospace label is a signature element — use it above section headings.
• Headline sizes are big (hero clamp(2.75rem, 6vw, 5rem)). Body 16–18px, relaxed leading.

4. Layout & spacing

• Max content width ~1200px (Container).
• Generous vertical rhythm: sections ~py-24/py-32.
• Alternate --bg and --bg-warm between sections for quiet structure.
• Hairline borders (--line), rounded corners: cards rounded-2xl/rounded-3xl, buttons pill (rounded-full).
• Atmosphere: soft peach→orange radial glows behind hero & final CTA; subtle dot/grid textures for depth. Keep it tasteful.

5. Components

• Buttons: primary = ink fill / white text, pill, arrow on hover. Accent = orange fill. Secondary = white with --line border. Always have hover motion.
• Eyebrow: mono uppercase label, optionally a small orange dot.
• Cards: white, hairline border, soft shadow, hover lift.
• Product mockups: build in code — crisp table/kanban/calendar/gantt/dashboard/Atto-chat panels. Rounded, layered, subtle shadows. This is how we show the product.

6. Motion (Framer Motion)

• One orchestrated hero load: staggered fade+rise reveals.
• Scroll-triggered section reveals via a Reveal wrapper (whileInView, once, ~16–24px rise).
• Hover micro-interactions on buttons/cards. Respect prefers-reduced-motion.

7. Icons

lucide-react, stroke ~1.5–1.75, consistent sizing. Modern and clean — no emoji in product UI.

8. Voice & copy

Confident, concise, intelligent. Speak to organizations/teams. Lead with outcomes (build, automate, scale, execute). Highlight Atto (AI assistant) and autonomous AI Agents as differentiators. Avoid hype clichés; sound enterprise-credible.

9. Do / Don't

• ✅ White canvas, surgical orange, mono eyebrows, crisp code mockups, big confident type.
• ❌ Purple gradients, generic Inter/Roboto, dark-mode default, orange everywhere, stocky clip-art, cramped layouts.