Design Atlas

← Atlas

Typography and styles ​

Type treatments, colour and spacing tokens, and whole visual styles for interfaces.

Start here ​

  • Refero Styles — real brand styles extracted into DESIGN.md files with searchable mood tags.
  • DESIGN.md — a community library of complete design systems as single markdown files.
  • getdesign.md — about 73 free MIT brand style files with unusually specific Do's and Don'ts and light/dark previews.
  • CSS Text Effects — 90 copy-ready CSS text effects with customizable colour tokens.
  • Ramps — a full OKLCH palette and light/dark semantic tokens from one brand colour, with enforced contrast; see the Color hub for more colour tools.

All sources ​

Showing 50 of 198 sites

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • 10xShivamDark developer portfolio using dashed outlines, serif headings and expandable work entries to structure a long page.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • 81-webA Japanese web design archive with filters for type, category, color, font, tags, studio and date, plus desktop/mobile and cover/masonry views.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • 8bitcnRetro 8-bit shadcn/ui skin: 56 components, 63 blocks, game UI pieces and 21 themes.Verdict Very usefulShip licence, open source permissiveAgent channels registryReviewed
  • a-freshA categorized website and component archive with previews, desktop and mobile views, and filters for design traits.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • A1A curated gallery of live websites, full pages and individual sections, with visual filters and measured design details.Verdict Very usefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Aditya LogsMonospace portfolio with inline emphasis, an activity sidebar and a compact, terminal-like visual language.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • AKUTallinn studio portfolio with spacious project listings, expressive typography and colorful visual identity case pages.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Animesh ThakurA grid-based portfolio with offset display lettering, diagonal section dividers, project cards and a compact music player.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • AnjilA restrained developer portfolio pairing a dithered travel photograph with a serif headline, concise biography and compact work timeline.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Anthropic SkillsAnthropic's frontend-design anti-default skill plus canvas-design, theme-factory and brand-guidelines, all Apache-2.0.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • Anzal AbidiA personal portfolio that frames a professional story with classical paintings, editorial type and a chaptered timeline.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • ArtCenter Spring 2025 Grad ShowA clean, searchable graduate portfolio catalogue with department routes, term filters and individual project pages.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Ashutosh TiwariA long-form developer portfolio framed by a wide illustrated hero, dashed grid rules, project cards and a command palette.Verdict UsefulConditional licence, proprietary freeAgent channels llms-txtReviewed
  • AthrixDeveloper portfolio with an editorial serif headline, dotted page grid and pale botanical accents.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • AtmosOKLCH palette workspace with shade, gamut and contrast tools for building UI color systems.Verdict Very usefulConditional licence, proprietary paidAgent channels noneReviewed
  • BehanceAdobe's portfolio network of long-form case studies for branding, type and UI; blocks AI crawlers and scripted access.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Best Designs on XHourly feed of 9,400+ credited design posts from X, plus Instagram, Dribbble, Behance, fonts, app icons and OG images; Panda Network, sponsor-funded.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Best Free FontsA searchable font catalog with live specimens, variable-font details and license information on each font page.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • BounshyA live Framer specimen for glitching text, particle trails and configurable colour treatments on hover.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Browse.coolA beta gallery of 25 high-craft, type-led sites and 194 screenshots and clips for mood-boarding.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • BRRRANDINGHuman curated identity projects with filters for industry, colour, typography, medium and year, linked to original case studies.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Brutalist WebsitesGallery of brutalist sites, with the style defined up front as a reaction against comfortable, polished web design.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Business Cards on the Web — STstudioA poster and web workshop case pairs a black portfolio interface, electric blue linework and an acid-green poster with engraved coin imagery.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • CARIThe Consumer Aesthetics Research Institute: dated, credited pages on consumer-era looks such as Y2K, Neo-Y2K and Frutiger Aero, each with a gallery.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Case Study ClubA weekly design publication with a restrained, print-like layout for long-form notes, portfolios and design links.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Chloé MaillotA quiet design-engineer portfolio combining short editorial notes, a small component catalogue and a handmade image grid.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Chornobyl Exclusion Zone — BandaBanda's Ukrainian government identity turns the reactor silhouette into a yearly changing mark that gradually disappears by 2064.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • ChronicleAI deck builder on a freeform canvas, sold on brand rules and designer-made templates rather than on generating slides from nothing.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • CIRKA®Singapore creative portfolio pairing extreme condensed display type and compact project metadata with a cream canvas and full case studies.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Coca-Cola Visual SystemCoca-Cola’s 2026 identity announcement and embedded film show how its signature assets extend across packaging, retail and digital work.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Color.reviewWCAG 2.1 contrast checker with pass/fail lines on the picker and shareable pair links.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • CraftShort design-engineering notes pair practical interface principles with small live demos and before-and-after comparisons.Verdict NicheShip licence, open source permissiveAgent channels skillReviewed
  • Craftwork40,000+ illustrations, mockups, fonts and templates; the Pro plan adds an OAuth MCP server and an agent setup wizard.Verdict Very usefulConditional licence, proprietary paidAgent channels mcp, api, skillReviewed
  • CSS Text Effects90 copy-ready animated text effects in pure CSS, with custom-property colour tokens.Verdict UsefulShip licence, open source permissiveAgent channels promptsReviewed
  • CSSlineA long-running web design gallery with tagged site previews, a tag browser and direct links to current sites.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • CuratedLive-site gallery filtered by industry and style, with a separate section library for comparing page blocks.Verdict Very usefulConditional licence, proprietary paidAgent channels noneReviewed
  • daisyUIMIT Tailwind plugin of semantic component classes and 35 themes; llms.txt doubles as a skill, paid Blueprint MCP.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, skillReviewed
  • Daniel WhiteA portfolio presented as an illustrated book, with warm paper tones, editorial serif typography and chapter-like project navigation.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Dark Mode DesignAbout 380 dark-by-default websites, hand-picked since 2020; plain paginated grid, no filters.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Dead Simple SitesA screenshot-led archive of minimal websites, with creator names and direct visit links in a sparse grid.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Death of TypographySingapore type collective whose home page is a cropped 380px marquee in its own face, plus a specimen tester with 27 sliders.Verdict NicheConditional licence, mixedAgent channels noneReviewed
  • Departure MonoFree OFL pixel monospace font by Helena Zhang with box drawing, Cyrillic and Greek.Verdict Very usefulShip licence, open source permissiveAgent channels noneReviewed
  • Design Academy Eindhoven Graduation Show 2025DAE's 2025 graduate exhibition page links its visual show presentation to a filterable archive of individual BA and MA projects.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Design MinisDirectory of small design tools filtered by category and price, including effects, backgrounds, motion, type and image editors.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • DESIGN.mdCommunity library of whole design systems as single markdown files, with light/dark previews, an MCP server and a CLI.Verdict Very usefulLook only licence, not statedAgent channels mcp, cliReviewed
  • Design.md Store51 free brand-inspired DESIGN.md packs plus clear docs on the Google DESIGN.md format; strict reuse terms.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txtReviewed
  • Designer Skills111 small design-practice skills in nine plugins, with a router that picks one entry point.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • DesignMD (designmd.me)Credit-based URL-to-DESIGN.md generator with CLI, agent skill, Figma import and a free Discover gallery.Verdict UsefulConditional licence, mixedAgent channels llms-txt, cli, skillReviewed
  • DesignMD.ccFree URL-to-DESIGN.md generator measuring live CSS, with an MIT CLI and a benchmark library.Verdict Very usefulConditional licence, mixedAgent channels cli, apiReviewed
  • designmd.supplyFree open-source domain-to-DESIGN.md generator; copy as markdown, Tailwind v4 theme or CSS variables.Verdict UsefulConditional licence, mixedAgent channels noneReviewed

Patterns worth reusing ​

  • Formalize a brand's style as a text file (DESIGN.md) so an agent can consume it without visual interpretation.
  • Tag styles with mood phrases ("golden hour editorial") in addition to technical categories, so they're searchable by feel, not just by token values.
  • Expose CSS custom-property tokens (e.g. --ink) so a whole effect or style set can be recolored without touching markup.
  • Sort a fast-growing style library by trending/popular/newest to keep it navigable as it scales.
  • Collect a reference site's real font names and metrics with an inspector before writing a type scale, instead of guessing from a screenshot (Typeface.fyi).
  • Hand the same tokens out in several ready-to-paste forms (spec file, Tailwind theme, CSS variables) so they fit any stack (designmd.supply).
  • Name reusable styles by aesthetic rather than by brand, so they carry no trademark baggage (TypeUI).
  • Tag every reference with the typefaces it uses, so a site or brand gallery doubles as a type-pairing index (SEESAW, Rebrand Gallery).
  • Describe styles by feel (vibrant, confident, warm) as well as by style and typeface, since that is how clients talk (Rebrand Gallery).
  • Record each colour's role and rough share of the palette, not just its value, and publish the guideline as structured data next to the page (Vessa).
  • Keep one token set and compile it for each output, such as email renderers or PDF engines, so a theme travels without a redesign (emailcn, pdfcn).
  • Set display type tight and keep the text ranks neutral: Refs.Gallery measured minus 3.36px at 56px, about minus 0.06em, and Rueya minus 2.16px at 41.6px, about minus 0.05em.
  • Pair a tight headline with an airy paragraph so the two ranks read as deliberate: Rueya runs its hero at 41.6px on a 1.02 line height and the body at 18.4px on 1.75.
  • Use a warm off-white ground instead of pure white under large black type: Death of Typography measured rgb(255, 252, 252) behind rgb(40, 40, 40).
  • Set a line box smaller than the type to crop a bleeding band, and scroll it linearly over a long duration rather than easing it: Death of Typography runs its name at 380px on a 56px line height on a 45s linear loop.
  • Keep two steps of one accent, a deeper tone for display and a hotter one for links, so the two never compete: Death of Typography uses rgb(236, 86, 54) on headings and rgb(255, 72, 35) on links.
  • Give a specimen three controls per line, size, line height and letter spacing, so a face can be judged at display and text scale in place (Death of Typography).

Pitfalls ​

  • Extracting a real brand's style can get uncomfortably close to its visual identity — use it as a starting point, never a 1:1 copy.
  • No licence is stated for many community-submitted systems — check before reusing one on a commercial project.
  • A text-only style spec doesn't replace viewing the original site to validate real hierarchy, motion and accessibility.
  • Knowing a font's name doesn't give you the right to use it: Google Fonts are mostly open, Adobe Fonts need a subscription, and foundry fonts need a web licence (Typeface.fyi).
  • Generated style files usually have LLM-written prose and no stated output licence; see the DESIGN.md files hub before relying on one.
  • Brand-named themes imitate a look and nothing more; emailcn's Airbnb, Apple or Stripe themes must not ship as those companies' mail.
  • Uploading a font to a guideline or style tool doesn't license it for the web; that stays your responsibility (Vessa).
  • Letter-by-letter animation breaks kerning, ligatures and joined scripts such as Arabic or Devanagari, so use word mode (slot-text); NumberFlow doesn't support non-Latin digits or right-to-left locales yet.
  • Strict style rules, such as Hallmark's ban on italic headings, can clash with an existing brand guide.
  • Quiet display type needs a busy, dark ground to hold it: 41.6px at weight 300 disappears on a light page (Rueya).
  • Cropped type bands need a clipping container. Lifting Death of Typography's 380px at a 56px line height without the overflow rule overlaps the next section.
  • Sample lines that depend on a webfont fall back to a generic sans when it fails to load, which misrepresents the face (Death of Typography).
  • A tight tracking value belongs to one face at one size; moving minus 0.06em onto small text or a serif makes words collide (Refs.Gallery).