← ClaudeAtlas

ashby-ui-skillslisted

Ashby's UI design system. Use when building interfaces inspired by Ashby's aesthetic - dark mode, Inter font, 4px grid.
goharabbas321/zeoel-framework · ★ 0 · Web & Frontend · score 63
Install: claude install-skill goharabbas321/zeoel-framework
# Ashby UI Skills Opinionated constraints for building Ashby-style interfaces with AI agents. ## When to Apply Reference these guidelines when: - Building dark-mode interfaces - Creating Ashby-inspired design systems - Implementing UIs with Inter font and 4px grid ## Colors - MUST use dark backgrounds (lightness < 20) for primary surfaces - detected lightness: 9 - MUST use `#0E1122` as page background (`surface-base`) - SHOULD limit color palette to 8 distinct colors - MUST maintain text contrast ratio of at least 4.5:1 for accessibility ### Semantic Tokens | Token | HEX | RGB | Usage | |-------|-----|-----|-------| | `surface-base` | #0E1122 | rgb(14,17,34) | Page background | | `surface-raised` | #FEFEFE | rgb(254,254,254) | Cards, modals, raised surfaces | | `text-primary` | #D6D9DD | rgb(214,217,221) | Headings, body text | | `text-secondary` | #34384D | rgb(52,56,77) | Secondary, muted text | | `text-tertiary` | #797979 | rgb(121,121,121) | Additional text | | `border-default` | #818288 | rgb(129,130,136) | Subtle borders, dividers | ## Typography - MUST use `Inter` as primary font family - SHOULD use single font family for consistency - MUST use `28px` / `700` for primary headings - MUST use `24px` / `semi_bold` for body text - SHOULD reduce font weights (currently 4 detected) - MUST use `text-balance` for headings and `text-pretty` for body text - SHOULD use `tabular-nums` for numeric data - NEVER modify letter-spacing unless explicitly requested ### Text Sty