attoset-brand
Applies AttoSet branding and design system guidelines to all UI and visual tasks.
Install
mkdir -p .claude/skills/attoset-brand && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14544" && unzip -o skill.zip -d .claude/skills/attoset-brand && rm skill.zipInstalls to .claude/skills/attoset-brand
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
AttoSet brand + design system. Use whenever building, editing, or reviewing any AttoSet website UI, component, page, copy, or visual asset to keep colors, typography, spacing, motion, and tone on-brand.Key capabilities
- →Apply AttoSet brand personality to UI
- →Use specific color tokens for text, backgrounds, and CTAs
- →Implement typography rules for headings, body, and labels
- →Adhere to layout and spacing guidelines
- →Utilize defined component styles (buttons, cards, mockups)
- →Incorporate Framer Motion for orchestrated animations
How it works
The skill provides a complete guide to the AttoSet brand and design system, detailing personality, color tokens, typography, layout, component styles, motion, icons, and voice, to ensure consistent on-brand output.
Inputs & outputs
When to use attoset-brand
- →Updating website UI components
- →Applying brand colors to new features
- →Reviewing page design consistency
About this skill
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--mutedor--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
--bgand--bg-warmbetween sections for quiet structure. - Hairline borders (
--line), rounded corners: cardsrounded-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
--lineborder. 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
Revealwrapper (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.
When not to use it
- →When using purple gradients
- →When using generic fonts like Inter/Roboto
- →When implementing a dark-mode default
Limitations
- →Requires adherence to a light mode only design
- →Orange color is for surgical use only, not large fills
- →Does not permit generic fonts or stock clip-art
How it compares
This skill enforces a specific, detailed design system for AttoSet, ensuring visual and tonal consistency across all assets, unlike generic design practices.
Compared to similar skills
attoset-brand side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| attoset-brand (this skill) | 0 | 2mo | No flags | Beginner |
| visual-design-foundations | 5 | 5mo | No flags | Beginner |
| preline-theme-generator | 1 | 3mo | Review | Intermediate |
| design-system-create | 0 | 3mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
preline-theme-generator
htmlstreamofficial
Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS.
design-system-create
JHamidun
Собрать дизайн-систему с нуля: токены, типографика, компоненты, гайдлайны.
ckm:design
akshh229
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), soci
frontend-design
anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
retro-css-architecture
TheOrcDev
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.